纯css ui
2010 update: Lo, the Web Performance Advent Calendar hath moved
2010年更新： Lo， Web Performance Advent Calendar已移动
Dec 23 This post is the one-before-last article in the 2009 performance advent calendar experiment.
12月23日这篇文章是2009年性能出现日历实验中的前一篇文章。
Often performance improvements come with their drawbacks, sometimes improving performance causes pains in other parts of the development process or strips stuff from the final product. Sometimes there's even a conflict where you have to pick: slow, unusable and beautiful or fast and looking like hacked with a blunt axe. But it doesn't have to be this way.
性能改进通常带有其缺点，有时性能改进会导致开发过程中其他部分的麻烦，或者剥夺最终产品中的东西。 有时甚至需要选择一个冲突：缓慢，无法使用，美观或快速，看起来像是被钝斧砍死了。 但这不一定是这种方式。
This post outlines some approaches to achieving common UI elements using CSS tricks in as many browsers as possible while using as fewer images as possible. Some of the tricks are brand new, some are very, very old, IE5.5. old. They all have in common the "fewer or no images" mantra. Using fewer images comes with some pronounced benefits:
这篇文章概述了在尽可能多的浏览器中使用CSS技巧同时使用尽可能少的图像来实现常见UI元素的一些方法。 某些技巧是全新的，有些技巧非常老旧，即IE5.5。 旧。 他们都有一个共同点：“更少或没有图像”的口头禅。 使用较少的图像会带来一些明显的好处：
- less time spent in Photoshop 减少在Photoshop中花费的时间
- lighter page, less HTTP requests, less image payload页面更浅，HTTP请求更少，图像有效载荷更少
- fewer elements in the sprite to maintain (and sometimes fewer sprites) which means longer lived sprites with fewer updates and cache invalidation精灵中要维护的元素更少(有时更少的精灵)，这意味着寿命更长的精灵具有更少的更新和缓存失效
- generally easier maintenance - it's much easier to change a color value than to update and push a new image version通常更容易维护-与更新和推送新图像版本相比，更改颜色值要容易得多
Sometimes some browsers may not be fully supported but that's ok - as long as there's progressive enhancement and the basic page is usable, people rarely notice 1px glows and other ornaments.
有时可能不完全支持某些浏览器，但是没关系-只要进行了逐步增强并且基本页面可用，人们很少会注意到1px发光和其他装饰。
So let's get started. BTW, a test page with the stuff discussed in the post is here.
因此，让我们开始吧。 顺便说一句，这里有讨论的内容的测试页面。
圆角 (Rounded corners)
Yep, let's tackle the biggie.
是的，让我们解决大问题。
Forget rounded corners in browser that don't support border-radius. Period. It may be hard to argue this case, but definitely try. Doing rounded corners any other way than border-radius is a pain - it adds markup bloat, it makes you create more images or sprite elements. It's tougher to update. Just forget it. Forget rounded corners in IE < 9 (as rumor has it border-radius is coming to IE9). People may argue that IE is important for your audience. No doubt that's true, but rounded corners are not so important for the audience. Show your designer Yahoo Search results page - the sidebar on the left-hand side. Not very rounded in IE. Do you think this was an easy battle - losing rounded corners in IE for such a high-profile site? Ask the man who won the battle 😉
忘记浏览器中不支持border-radius 。 期。 这种情况可能很难争论，但一定要尝试。 除边框半径外，以其他任何方式进行圆角都是一种痛苦-它增加了标记膨胀，使您可以创建更多图像或精灵元素。 更新起来比较困难。 把它忘了吧。 忘记IE <9中的圆角(因为谣传它的边界半径即将到达IE9)。 人们可能会说IE对您的受众很重要。 毫无疑问，这是对的，但是圆角对于听众来说并不那么重要。 显示您的设计师Yahoo搜索结果页面-左侧的侧边栏。 在IE中不是很全面。 您是否认为这是一场轻松的战斗-对于如此高调的网站，IE失去了圆角？ 问赢得战斗的人the
So starting with a normal module - head, body and border:
因此，从普通模块开始-头部，身体和边界：
The markup - nice and clean:
标记-干净利落：
<div class="module">
<div class="hd"><h3>This is the header</h3></div>
<div class="bd">
<p>Here comes the content</p>
<p>Here comes some more</p>
<p>You can never have too much content, because
content is king, right?
</p>
</div>
</div>
Some fairly simple border radius to support Firefox, Webkit (Safari, Chrome, iPhone...) and, since a few days ago, Opera 10.5 alpha:
一些相当简单的边界半径，以支持Firefox，Webkit(Safari，Chrome，iPhone ...)以及几天前以来的Opera 10.5 alpha：
.module {
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
Result:
结果：
This is it! Easy-peasy, lemon squeezy.
就是这个！ 轻松自如，柠檬紧致。
Now, it's a little annoying to write three declarations for the same thing, but, hey - beats images and extra markup hands down. Also annoying are the differences when setting individual corners (-moz-border-radius-topleft is -webkit-border-top-left-radius). In this case we need to also round the header (class .hd) so it doesn't bleed through the beautifully rounded corners:
现在，为同一件事编写三个声明有点烦人，但是，嘿，击败了图像和多余的标记手。 同样烦人的是设置各个角时的差异(-moz-border-radius-topleft是-webkit-border-top-left-radius)。 在这种情况下，我们还需要对标头(类.hd )进行四舍五入，以使它不会流经漂亮的圆角：
.hd {
-moz-border-radius: 8px 8px 0 0;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-radius: 8px 8px 0 0;
}
判决： (Verdict:)
- Full support: Firefox, Safari, Chrome, Opera 10.5 全面支持：Firefox，Safari，Chrome，Opera 10.5
- Fallbacks: IE (corners are not rounded) 备用：IE(不对角)
投影和发光 (Drop shadows and glows)
Another favorite effect designers love - dropping shadows. It's easy to enhance that existing .module without any new images:
设计师最喜欢的另一个效果器-投下阴影。 无需任何新图像即可轻松增强现有的.module ：
.module {
/* offset left, top, thickness, color with alpha */
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
/* IE */
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
/* slightly different syntax for IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}
And now our module casts a shadow:
现在我们的模块投下了阴影：
Now two notes for IE: first the shadow doesn't have alpha so it's not as nice and second, this filter may not play along with other filters in the same module. But the shadow is cast and that's a check for IE too, even IE5.5!
现在有两个关于IE的注意事项：首先，阴影没有alpha，所以效果不佳；其次，此过滤器可能无法与同一模块中的其他过滤器一起使用。 但是阴影已经投射，这也是IE的检查，甚至是IE5.5！
You may notice that in this case we basically need to more or less repeat the same declaration three times and the IE declaration two times. This is irksome, but hopefully keeping the strings close together should help gzip compression.
您可能会注意到，在这种情况下，我们基本上需要或多或少重复相同的声明三次和IE声明两次。 这太麻烦了，但是希望将字符串保持在一起应该有助于gzip压缩。
As for glowing, it's the same thing in FF, Webkit, Opera, only without any offset. For IE, there's a different filter called glow:
至于发光，在FF，Webkit，Opera中是一样的，只是没有任何偏移。 对于IE，有一个不同的过滤器称为glow：
.glow {
-webkit-box-shadow: 0 0 10px rgba(50, 50, 50, 0.8);
-moz-box-shadow: 0 0 10px rgba(50, 50, 50, 0.8);
box-shadow: 0 0 10px rgba(50, 50, 50, 0.5);
filter:progid:DXImageTransform.Microsoft.glow(Strength=5, Color='gray');
-ms-filter:"progid:DXImageTransform.Microsoft.glow(Strength=3, Color='gray')";
}
I added these declaration to a new class .glow so I can add the class name to modules that need to glow. The result:
我将这些声明添加到新的类.glow以便可以将类名称添加到需要发光的模块中。 结果：
The result as it glows in IE:
结果在IE中发光：
Now you see why I added only 3 pixels glow in IE and whole 5 in the rest. The IE glow is a little .. interesting. Also in IE8 (could be my VM, in IE6 XP no VM all looks OK) the glow seems to move slightly when you hover over the module.
现在您了解了为什么我在IE中仅添加了3个像素的发光，其余的全部添加了5个。 IE发光有点..有趣。 同样在IE8中(可能是我的VM，在IE6 XP中没有VM看起来都不错)，当您将鼠标悬停在模块上时，光晕似乎会稍有移动。
判断阴影和发光： (Verdict for shadows and glows:)
- Full support: FF, Safari, Chrome, Opera, IE5.5 and up 全面支持：FF，Safari，Chrome，Opera，IE5.5及更高版本
More info:
更多信息：
渐变色(Gradients)
Ah, gradients. Sometimes so subtle that we, muggles and other mere mortals, don't see them even when we try our hardest. But for the designer they could be life/death situation.
啊，渐变。 有时如此微妙，以至于我们，麻瓜和其他凡人，即使我们尽力而为，也看不到它们。 但是对于设计师来说，这可能是生死攸关的情况。
Let's make the head (class .hd) of our module a gradient without any images:
让我们将模块的头部( .hd类) .hd没有任何图像的渐变：
.hd {background-image: -moz-linear-gradient(top, #641d1c, #f00);
background-image: -webkit-gradient(linear, left top, left bottom, from(#641d1c), to(#f00));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff641d1c,endColorstr=#ffff0000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff641d1c,endColorstr=#ffff0000)";
}
The result:
结果：
What a beautiful (code-speaking, of course, not so sure about visually beautiful) module. It has rounded corners, drop shadows and a gradient and so far we haven't used even a single image. Which means this reddish module can become blue, green or, god forbid, pink - with a single tweak in the code, the CMS or the user preferences (if you're building a social network for example).
多么漂亮的模块(讲代码，当然，对于视觉上的漂亮不是那么确定)。 它具有圆角，阴影和渐变，到目前为止，我们甚至都没有使用单个图像。 这意味着该带红色的模块可以变为蓝色，绿色或(禁止的)粉红色-只需对代码，CMS或用户首选项(例如，如果要构建社交网络)进行一次调整即可。
渐变判定： (Gradients verdict:)
- Full support: FF, Safari, Chrome, IE 全面支持：FF，Safari，Chrome，IE
- Fallbacks: Opera (solid color) 后备：Opera(纯色)
More info:
更多信息：
...以及所有的RGBA(... and RGBA for all)
Being able to set the transparency of the background without affecting the transparency of the foreground (the text) is quite handy. That's why there's rgba() in CSS (red, green, blue, alpha). IE is not yet supporting it, but we can use the gradient filter which does support transparency. In this case we don't need the actual gradient so we set start and end color to the same thing. Also the background: transparent is needed for the whole thing to work in IE:
能够设置背景的透明度而不影响前景(文本)的透明度非常方便。 这就是CSS中存在rgba()的原因(红色，绿色，蓝色，alpha)。 IE尚不支持它，但是我们可以使用支持透明性的渐变滤镜。 在这种情况下，我们不需要实际的渐变，因此我们将开始和结束颜色设置为相同的颜色。 还有背景：透明是整个事情在IE中工作所必需的：
.rgba {
background-color: transparent;
background-color: rgba(200,200,200,0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
}
The result is pleasantly cross-browser:
结果是令人愉快的跨浏览器：
RGBA判决 (RGBA verdict)
- Full support: Firefox, Safari, Opera, Chrome, IE全面支持：Firefox，Safari，Opera，Chrome，IE
旋转影像 (Rotating images)
It happens that sometimes you use the same image only flipped. For example open/close thingies, menus and such. How about reusing the same image and rotating it with CSS?
碰巧有时候您只使用翻转的同一张图片。 例如打开/关闭thingties，菜单等。 如何重用相同的图像并使用CSS旋转它？
.arrow {background: url(arrow.png) no-repeat; display: block; float: left; width: 33px; height: 33px;}
.right{ /* this is the original image*/ }
.left {
-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg); -o-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";}
.up {
-moz-transform: rotate(270deg);-webkit-transform: rotate(270deg); -o-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";}
.down {
-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg); -o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
}
Here's the result. Single image:
这是结果。 单张图片：
Result:
结果：
the HTML:
HTML：
<span class="arrow right"></span>
<span class="arrow left"></span>
<span class="arrow up"></span>
<span class="arrow down"></span>
You may notice that the CSS could be quite verbose for saving such small images. It's highly recommended you add the rotation code to a class and use the class name when necessary instead of repeating the same long declaration for every use case or image. Then pray to the gods of compression that this thing gzips well 😉
您可能会注意到CSS对于保存如此小的图像可能非常冗长。 强烈建议您将旋转代码添加到类中，并在必要时使用类名称，而不是对每个用例或图像重复相同的长声明。 然后向压缩之神祈祷，这东西能很好地压缩😉
判决 (Verdict)
- Full support: Firefox, IE, Safari, Opera, Chrome全面支持：Firefox，IE，Safari，Opera，Chrome
具有相同背景图片的多个UI元素 (Multiple UI elements with the same background image)
The last few tricks have something in common - they each use one background image. The background images are very small - usually around 100 bytes. The tiny image has some transparency to it and is placed as a background-image which sits on top of a background-color. Because of the transparency, the background color shines through, but differently depending on the transparency level of the image above it.
最后几个技巧有一些共同点-它们每个都使用一个背景图像。 背景图片非常小-通常约为100个字节。 微小图像具有一定的透明度，并作为背景图像放置在背景颜色的顶部。 由于具有透明度，因此背景色会发光，但是取决于其上方图像的透明度级别。
The result is - different UI elements with different colors (and even different hover colors) which can be part of CMS or part of user's skinning and they all reuse the same tiny background. So what can we do this way? A lot of interesting background effects, but here's a few.
结果是-具有不同颜色(甚至不同悬停颜色)的不同UI元素可以是CMS的一部分，也可以是用户皮肤的一部分，并且它们都重复使用相同的微小背景。 那么我们可以怎么做呢？ 很多有趣的背景效果，但这里有一些。
光泽按钮 (Glossy buttons)
Here's the end result:
这是最终结果：
All these buttons share the same background image. The image is 1x1000 and repeated horizontally. The 1000 is just to be safe, very safe, because 50, 100 or 1000 doesn't affect the file size which just a mere 100 bytes. The upper half of the image is a little less transparent. The lower half is 100% transparent. When placed on top of the solid color the whole thing looks shiny and glossy. And you can change the color any way you like.
所有这些按钮共享相同的背景图像。 图像为1x1000，水平重复。 1000只是为了安全起见，非常安全，因为50、100或1000不会影响仅100个字节的文件大小。 图像的上半部分不太透明。 下半部分是100％透明的。 当放置在纯色之上时，整个外观看起来会很光泽。 您可以根据自己的喜好更改颜色。
The HTML:
HTML：
<p class="button">button1<p>
<p class="button button2">button2<p>
<p class="button button3">button3<p>
<p class="button button4">button4<p>
<p class="button button5">button5<p>
<p class="button button6">button6<p>
And the CSS can't be simpler:
CSS不能再简单了：
.button {
background-image:url(http://tools.w3clubs.com/mask/mask.php?x=1000&type=h);
background-position: center;
}
.button:hover {background-color: #F29222;}
.button2 {background-color: #A41D1C;}
.button3 {background-color: #0F6406;}
.button4 {background-color: #333f79;}
.button5 {background-color: black;}
.button6 {background-color: orange; color: black;}
Actually in the test page I have inlined the image with data URI to save the whole HTTP request for such a teeny image.
实际上，在测试页中，我已在图像中插入了数据URI，以保存整个HTTP请求，以获取如此小的图像。
As you can see in the URL of the background, I've done a little script to generate some background images: http://tools.w3clubs.com/mask/mask.php?x=1000&type=h The image generator's source code is right here.
如您在背景的URL中看到的，我已经完成了一些脚本来生成一些背景图像： http://tools.w3clubs.com/mask/mask.php?x=1000&type=h : http://tools.w3clubs.com/mask/mask.php?x=1000&type=h图像生成器的源代码就在这里。
条纹 (Stripes)
Same technique - but used to generate striped background:
相同的技术-但用于生成条纹背景：
It's basically the same code, only using a different call to the image generator to give us a different background image.
基本上是相同的代码，只是对图像生成器使用了不同的调用，从而为我们提供了不同的背景图像。
HTML:
HTML：
<div class="module stripe earth glow">
<div class="bd">
<p>striped background</p>
</div>
</div>
<div class="module stripe tech glow">
<div class="hd phony stripe"><h3>stripity-stripes</h3></div>
<div class="bd">
<p>striped background with the same background image</p>
</div>
</div>
CSS:
CSS：
.stripe {background-image: url(http://tools.w3clubs.com/mask/mask.php?type=stripe);}
.earth {background-color: olive;}
.tech {background-color: #bbb;}
.phony {background-color: #0F6406;}
Again, this image can be a data URI so we save the single HTTP request.
同样，此图像可以是数据URI，因此我们保存单个HTTP请求。
还有另一个渐变 (And another gradient)
So if you don't like the previously discussed way to do gradients, here's another one. The same trick with the solid color background and a semi-transparent image on top.
因此，如果您不喜欢前面讨论的渐变方法，这是另一种方法。 纯色背景和顶部的半透明图像具有相同的技巧。
Result:
结果：
The background images as generated by the service are: // lighter at the top http://tools.w3clubs.com/mask/mask.php?type=gradient // darker at the top http://tools.w3clubs.com/mask/mask.php?type=gradient&flip=1
由服务生成的背景图像是： // lighter at the top http://tools.w3clubs.com/mask/mask.php?type=gradient // darker at the top http://tools.w3clubs.com/mask/mask.php?type=gradient&flip=1
Again, you can see the test page here and the source for the image generation is here.
For yet another example of this technique check my post on this (abandoned) blog phonydev.com. There I take an image and a mask image generated by the same script and overlay to achieve an iPhone-like glossy button.
有关此技术的另一个示例，请查看我在这个(废弃的)博客phonydev.com上的帖子。 在那里，我拍摄了由同一脚本生成的图像和遮罩图像，并进行了叠加，以实现类似iPhone的光泽按钮。
谢谢！ (Thanks!)
Kind of long post, but I hope you're excited about removing a bunch of images from your future designs. If I've omitted some details, please let me know in the comments.
有点长的帖子，但我希望您为从将来的设计中删除一堆图像而感到兴奋。 如果我省略了一些细节，请在评论中让我知道。
Tell your friends about this post on Facebook and Twitter
在Facebook和Twitter上告诉您的朋友有关此帖子的信息
翻译自: https://www.phpied.com/css-performance-ui-with-fewer-images/
纯css ui
扫一扫
168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
