In our needs, we often see some small graphics, or icons, such as on the Tmall website:
We can replace these small graphics with pictures. Usually we cut these graphics into sprite charts (also called sprite charts);
The principle of sprite charts: Collect many small pictures into one large picture, and then display the picture by setting the position of the background image;
Advantages of sprites: reduce the number of server requests and reduce server pressure;
sprites are a A very good sprite making tool;
Of course there are other ways to make these small graphics, such as the font icon iconfont used by Tmall in the picture above;
Font icon, as the name suggests, is a font. Like a font, it is a vector. We also call it a vector icon. It can be enlarged or reduced without distortion;
There are many font icon libraries on the Internet. Here I will introduce the use of iconfont:
Official website: http://www.iconfont.cn/
I won’t tell you how to make it, let’s use it directly (Haha, actually the picture I drew is too ugly);
I originally planned to write about how to use it, but iconfont seems to have been upgraded again, adding symbol writing and supporting multi-color icons (this involves the knowledge of SVG ), the GIF image of the help document on the official website also explains how to apply it very well. I will write about the pitfalls I encountered when I used it for the first time:
"Download Code" button, I hope you can can be found directly. Well, I searched for a while, and by default it asked me to set the color and size. This is to get the materials. The front-end only needs code, click Undo, and then...;
I don’t know Is it a problem with my computer (1366*768) or something else? This "Download Code" button is half blocked by the toolbar at the bottom of my windows. Well, this...
Triangle, please read this article, the summary of border triangle shadow and multiple borders;
Menu (three stripes), use border to double the border The line and the solid line of the lower border can also be reversed:
The code is as follows:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .menu{ margin: 100px; width: 55px; height: 10px; border-top: 30px double #f00; border-bottom: 10px solid #f00; /*用border上边框双线和下边框实线,也可以反着来*/ } </style> </head> <body> <p class="menu"></p> </body></html>
Inner concave corner, the master's method, click here, use the css3 attribute radial gradient radial-gradient to do:
The radial gradient of the background image can be set: the center position of the circle, the size of the gradient, the shape of the gradient, and the color at the center of the circle Width, ... , color width at the end;代码如下:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} a{text-decoration: none;cursor: pointer;} li{list-style: none;} /*清除浮动*/ .clearfix:before, /*:before处理margin上下重叠*/ .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .test{ margin: 100px 0 0 100px ; } .list{ margin-left: -20px; } .content{ width: 320px; background: #7fd6f1; min-height: 200px; } .item .active{ background: #7fd6f1; color: #333; } .item{ float: left; margin-left: 30px; } .item a{ display: block; background: #ce4be2; width: 80px; height: 35px; text-align: center; line-height: 35px; color: #fff; border-radius: 10px 10px 0 0; position: relative; } .item a:after{ content: ""; display: block; position: absolute; right: -9px; /*不知大家是否发现,在边缘处其实是有1px的变化的,弧度到最后不是很自然,这里我们其实可以把位置往里1px*/ bottom: 0; width: 10px; height: 10px; background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%); background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%); background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%); background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%); /*背景图径向渐变可以设置:圆心位置,渐变的大小,渐变的形状,圆心处的颜色 宽度, ... ,结尾处的颜色宽度*/ /*圆心位置默认为center,我们这里设置圆心为元素左顶点和右顶点*/ /*渐变的大小默认为farthest-corder ,我们这里设置的farthest-side*/ /*渐变的形状默认为ellipse(椭圆),我们这里得设置成circle(圆形),但是宽高一样的椭圆不就是圆形么,so...*/ /*颜色和宽度的设置,我们在离元素宽度还有1px的时候变化,所以这里是10-1=9px;*/ } .item a:before{ content: ""; display: block; position: absolute; left: -9px; bottom: 0; width: 10px; height: 10px; background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%); background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%); background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%); background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%); } .item .active:after{ background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%); background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%); background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%); background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%); } .item .active:before{ background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%); background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%); background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%); background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%); } </style> </head> <body> <p class="test"> <ul class="list clearfix"> <li class="item"> <a href="javascript:;" >新闻</a> </li> <li class="item"> <a href="javascript:;" class="active">娱乐</a> </li> <li class="item"> <a href="javascript:;">体育</a> </li> </ul> <p class="content"></p> </p> </body></html>
还有很多css制作的经典图形,以后再整理吧;
其实,css制作的图标和图片代替的图片都很棒,根据需求吧。我更喜欢字体图标和图片的方式,效率更高,简单。
更多Detailed explanation of iconfont font icons and various css small icons相关文章请关注PHP中文网!