Tag: css3

填充水animation: 我正在试图清理animation，使其看起来像是在灌水。我遇到了两个错误，甚至没有能够解决第三个错误：它填满了错误的方式它填充后重置为空（黑色） * 现在，我正在使用<img>标记，但是我想将这个效果移到body { background-image: }并且需要一些方法来指导如何做到这一点。我到目前为止所尝试的： #banner { width: 300px; height: 300px; position: relative; } #banner div { position: absolute; } #banner div:nth-child(2) { -webkit-animation: wipe 6s; -webkit-animation-delay: 0s; -webkit-animation-direction: up; -webkit-mask-size: 300px 3000px; -webkit-mask-position: 300px 300px; -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, […]

css3限于类的types: 有什么办法来限制css3的nth-of-type到一个类？我有不同类别的dynamic数量的section元素指定他们的布局需求。我想要抓住每一个第三个.module ，但是看起来nth-of-type查找类的元素types，然后计算types。相反，我想只限于.module s。谢谢！ JSFiddle来演示： http : //jsfiddle.net/danielredwood/e2BAq/1/ HTML： <section class="featured video"> <h1>VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO (3)</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured module"> <h1>NOT A VIDEO</h1> </section> <section class="featured […]

我应该使用最大设备宽度还是最大宽度？: 使用CSS媒体查询，您可以使用max-device-width来定位设备宽度（例如iPhone或Android设备）和/或以页面宽度为目标的max-width宽度。如果您使用max-device-width ，当您更改桌面上浏览器窗口的大小时，CSS不会更改，因为您的桌面不会更改大小。如果使用max-width ，当您更改桌面上浏览器窗口的大小时，可能会显示移动设备的样式，例如触摸友好的元素和菜单等等。针对特定的浏览器（和设备？）现在已经被弃用了，你应该对你的目标有所不知。这也适用于媒体查询吗？你为什么要瞄准另一个呢？哪一个是推荐的？这是我在生产网站上使用的媒体查询的示例： @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) { /* Change a menu to fit the screen better, etc… */ } 我倾向于使用max-device-width和max-width 。

CSS媒体查询只针对iPad和iPad？: 嗨，我正在与多个平板设备，iPad，银河标签，macros碁Iconia，LG 3D垫等。 iPad – 1024 x 768 LG垫 – 1280 x 768 Galaxy Tab – 1280 x 800 我只想使用CSS3媒体查询来定位iPad。因为，LG和iPad的设备宽度是相同的768px – 我无法分离每个设备。我试过以下分开，但似乎没有工作： @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */ @media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) […]

使用CSS3滤镜模糊定义边缘: 我用这段代码模糊了一些图像 img { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } 尽pipe如此，图像的边缘也会变得模糊。是否可以模糊图像，同时保持边缘定义？像一个插图模糊或什么的？

使用CSS变换后模糊的文本：scale（）; 在Chrome中: 似乎Google Chrome最近有一个更新，在进行transform: scale()后会导致模糊的文本transform: scale() 。具体来说，我正在这样做： @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } 如果您在Chrome中访问http://rourkery.com ，则应该在主文本区域中看到问题。它并没有用来做到这一点，它似乎并没有影响其他的webkit浏览器（如Safari）。还有一些关于人们遇到与3D变换类似的问题的其他post，但没有find像这样的2D变换的任何东西。任何想法将不胜感激，谢谢！

是否有可能在浏览器中模拟方向？: 由于标题是可以模仿在谷歌浏览器或Firefox的方向？意思是改变浏览器来支持媒体查询（orientation =（landscape or portrait））我有一个移动模拟器，但我想从铬或萤火虫开发人员的工具。更新 Chrome v25特定… 对于任何人，在谷歌浏览器开发工具>覆盖>覆盖设备方向，你可以改变alpha ， beta和gamma 。我认为这是一个开始的地方，但我不知道这些工作如何，因此没有find任何东西。也可以模拟CSS媒体，但不能纵向和横向，但打印，屏幕，电视等。

CSS：在保持比例的同时用图像填充div: 我知道这个问题不是新的，但是我想也许用新的CSS3技术可能会有解决scheme。我发现这个线程 – 如何拉伸图像填充<div>，同时保持图像的纵横比？ – 这不完全是我想要的东西。我有一个特定大小的div，里面有一个图片。无论图像是风景还是肖像，我都希望始终用图像填满div。如果图像被切断（div本身已经隐藏了溢出），这并不重要。所以如果图像是肖像，我想width为100% ， height:auto所以它保持成比例。如果图像是风景，我想height为100% ， width to be自动。听起来很复杂吗？ <div class="container"> <img src="some-image.jpg" alt="Could be portrait or landscape"/> </div> 因为我不知道该怎么做，所以我简单地创build了一个我的意思的快速图像。我甚至不能正确地描述它。所以，我想我不是第一个问这个问题的。但是我真的找不到解决办法。也许有一些新的CSS3方法 – 我正在考虑弹性框。任何想法？也许这比我预期的更容易？先谢谢你。

寻找与“不透明”等同的颜色: 说我有一个背景颜色与“色带”在另一个纯色运行。现在，我希望色带部分透明，让一些细节融合在一起，但仍然保持色带在背景上“相同的颜色”。有一种方法可以很容易地确定，对于给定的不透明度/ alpha <100％的色带颜色，它应该与背景中的100％不透明度相同的RGB值是什么？这是一张照片。背景是rgb(72, 28, 97) ，带rgb(45, 34, 70) 。我想要一个rgba(r, g, b, a)的色带，使其看起来与这个纯色相同。

概述只有一个边界: 如何将embedded边框应用于HTML元素，但仅限于其一侧。到目前为止，我一直使用一个图像来做到这一点（GIF / PNG），然后我将它用作背景，并将其拉伸（repeat-x），并从我的块的顶部稍微偏离一点。最近，我发现了CSS的属性，这太棒了！但似乎圈出整个块…是否有可能使用这个大纲属性来做只有一个边界？另外，如果没有，你有任何CSS技巧，可以取代背景图像？（这样我可以稍后使用CSS来个性化轮廓的颜色等）。提前致谢！这是一个想要实现的图像： http : //exiledesigns.com/stack.jpg