图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互、引导以及网页装饰等充当的角色作用举足轻重。由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Http请求,影响网页的性能。因此,在实际中,我们可能见到以下一些常见的解决方案:

  • 将多个图标按照一定排列顺序合并在一个图片里(即sprite图),再通过CSS设置元素的background-position来为元素设置背景从而展示图标
  • 将单个图标元素转成base64格式,并在CSS声明背景
  • 使用SVG来绘制图标
  • 使用字体图标
  • 使用CSS来绘制图标
  • ...

以上方式都可以很好的实现功能,各有各的优缺点。在移动端的某些情况下,我个人比较偏好使用CSS来实现一些简单的小图标,原因有以下几点:

  • 适应性和定制性强,如可以随意改变颜色,大小
  • 占用空间小
  • 在移动端兼容性高
  • 可以不断使自己熟悉CSS3的各个属性并得以应用

而由于CSS3的普及和在各大浏览器的不断增强支持,使CSS具有更大的可能性和能力去绘制更多样化,更复杂的图标。当然,也有不少人反对web图标使用CSS绘制的,在这里不加以讨论。如果你也反对,不妨以当乐趣的心态去看待。

本文将单独讲解如何用CSS绘制一些图标。而由于用CSS实现图标绘制,偶尔意味着你需要用更复杂的html结构去支持图标的绘制,所以本文讲解的将是单标签CSS图标。这样可以实现类似仅用img标签或者单个标签应用字体库实现图标绘制的效果。讲解如何绘制之前,先给大家看看前阵子得闲绘制的若干个单标签CSS图标。


你需要掌握的CSS属性

绘制图标,单从绘制来讲,无非就是画点、线、面。然后将多个点线面组合得到图标。因此,你至少应该掌握以下CSS属性的应用

  • 盒子模型
  • border属性的应用(很重要,可以参考)
  • position的各个属性值的应用
  • transform变形
  • outline,box-shadow(常见于多边框绘制)
  • CSS渐变(常用于图标中透明过渡)
  • 类和伪元素的应用
  • transitionanimation(如果要绘制动态图标,本文仅讲解静态图标)

需要掌握的主要为以上内容,有些特殊的处理可能还需要其他一些CSS属性的应用。

几个说明

  • 由于大部分情况下图标的大小按照所处环境上下文的字体大小来决定,所以本文所有例子的大小单位大部分使用em,按照当前字号来设定大小
  • 有些border属性没有指明border-color,如border-top: .4em solid,是因为border-color默认继承了字体颜色
  • 所有图标仅作为例子展示,实现方法多样,不代表最佳实践
  • CSS图标不适合在实践中大量使用,你可以以当作乐趣和练习CSS属性应用的心态去看待本文

基本元素的绘制

border属性绘制元素

border除了作为简单的绘制边框以外,还可以绘制三角形,梯形,星形等任意的多边形,以下为绘制的两个三角形和梯形,更多的应用可以参考
《border属性的多方位应用和实现自适应三角形》这篇文章,里面全面详细的介绍了用border绘制各种多边形。

  1. <div class="triangle1"></div>
  2. <div class="triangle2"></div>
  3. <div class="trapezoid"></div>
  1. .triangle1 {/*锐角三角形*/
  2. width: 0;
  3. height: 0;
  4. border-top:50px solid transparent;
  5. border-bottom:100px solid #249ff1;
  6. border-left: 30px solid transparent;
  7. border-right: 100px solid transparent;
  8. }
  9. .triangle2 {/*直角三角形*/
  10. width: 0;
  11. height: 0;
  12. border-top: 80px solid transparent;
  13. border-bottom: 80px solid #ff5b01;
  14. border-left: 50px solid #ff5b01;
  15. border-right:50px solid transparent;
  16. }
  17. .trapezoid {/*梯形*/
  18. width:0;
  19. height:0;
  20. border-top:none;
  21. border-right:80px solid transparent;
  22. border-bottom:60px solid #13dbed;
  23. border-left: 80px solid #13dbed;
  24. }

border-radius绘制元素

border-radius主要用于绘制圆点、圆形、椭圆、圆角矩形等形状,以下为简单绘制的两个图形。


  1. <div class="circle"></div>
  2. <div class="ellipse"><div>
  1. .circle,.ellipse {
  2. width: 100px;
  3. height: 100px;
  4. background: #249ff1;
  5. border-radius: 50%;
  6. }
  7. .ellipse {
  8. width: 150px;
  9. background: #ff9e01;
  10. }

border-radius属性实际上可以设置最多8个值,通过改变8个值可以得到许多意想不到的图像,如图(该图来源于这里



更多关于border-radius属性的特点和应用请参考张鑫旭大神写的《秋月何时了,CSS3 border-radius知多少?》

box-shadow绘制元素

对于box-shadow,其完整的声明为box-shadow: h-shadow v-shadow blur spread color inset,各个值表示的意义分别为:水平方向的偏移,垂直方向的偏移,模糊的距离(羽化值),阴影的扩展大小(不设置或为0时阴影大小与主体的大小一致),阴影的颜色和是否使用内阴影。实际应用时可以接收3-6个值,对应分别如下:

  • 3个值: h-shadow v-shadow color
  • 4个值: h-shadow v-shadow blur color
  • 5个值: h-shadow v-shadow blur spread color
  • 6个值: h-shadow v-shadow blur spread color inset

同时,border-shadow接受由多个以上各种值组成的以逗号分隔的值,通过这一特性,我们可以实现如多重边框的等效果。以下我们用该属性来实现一个单标签且不借助伪元素的添加图标代表目标的的图标。(为方便观察,这里将添加符号的实现部分用红色代替)

  1. <div class="plus"></div>
  2. <div class="target"></div>
  1. .plus {
  2. width: 30px;
  3. height: 30px;
  4. margin-left: 50px;/*由于box-shadow不占空间,常常需要添加margin来校正位置*/
  5. background: #000;
  6. box-shadow: 0 -30px 0 red,
  7. 0 30px 0 red,
  8. -30px 0 0 red,
  9. 30px 0 0 red;
  10. }
  11. .target {
  12. width: 30px;
  13. height: 30px;
  14. background: red;
  15. border-radius: 50%;
  16. margin-left: 50px;
  17. box-shadow: 0 0 0 10px #fff,
  18. 0 0 0 20px red,
  19. 0 0 0 30px #fff,
  20. 0 0 0 40px red;
  21. }

结果如下:


以上,添加符号采用多个由四个值组成的以逗号分隔的值来设置加号的四个角达到效果,目标图标则通过多次设置阴影大小大于主体大小的值叠加成了多个圆环来实现。

由于box-shadow不占据空间,实际应用中常常需要设置margin来矫正图标的位置,这和outline属性一致,两个属性最大的不同是outline形成的区域不会因为border-radius而形成圆角。

使用CSS渐变来绘制图标

CSS3的渐变属性十分强大,理论上通过渐变可以绘制出任何的图形,渐变的特性和使用足足可以写一篇长文,以下为一个例子

  1. <div class="gradient"></div>
  1. .gradient {
  2. position: relative;
  3. width: 300px;
  4. height: 300px;
  5. border-radius: 50%;
  6. background-color: silver;
  7. background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
  8. linear-gradient(155deg, #d00 23px, transparent 23px),
  9. linear-gradient(335deg, #b00 23px, transparent 23px),
  10. linear-gradient(155deg, #d00 23px, transparent 23px);
  11. background-size: 58px 58px;
  12. background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
  13. }

以上将得到如下结果


关于线性渐变属性的用法,可以参考这里

更多牛逼的例子可以观摩《CSS SECRETS》作者绘制的渐变背景点击这里

小试牛刀

有了以上的基础之后,我们就可以一步步打造一个属于自己的单标签CSS图标库。文章最前面提到了下面这些图标


现在抽取其中几个尝试绘制实现一下。

  • 杯子

首先我们对杯子进行拆分,很容易想到将杯子拆分为杯身和杯柄两个部分。拆分之后,应该用两个圆角矩形来实现,至于杯子的轮廓(图中黑色部分),我们可以选择用边框border来实现,border的颜色按实际填充即可(本文未指定时默认为跟随当前字体的颜色)。由于是单标签实现,因此,我们还要借助一个伪元素(杯柄)来实现这个图标。于是就有了以下的样式:

  1. .cup {
  2. display: inline-block;
  3. width: .9em;
  4. height: .4em;
  5. border: .25em solid;
  6. border-bottom: 1.1em solid;
  7. border-radius: 0 0 .25em .25em;
  8. }
  9. cup:before {
  10. position: absolute;
  11. right: -.6em;
  12. top: 0;
  13. width: .3em;
  14. height: .8em;
  15. border: .25em solid;
  16. border-left: none;
  17. border-radius: 0 .25em .25em 0;
  18. content: '';
  19. }

以上便实现了一个杯子的图标,通过调整边框颜色(默认为与当前字体颜色相同)和宽度即可实现不同大小的图标。

  • 心形

仔细观察这个心形,它实际上应该可以近似看做是由以下两个形状按照一定的角度旋转和平移组成。


因此我们可以用两个元素来绘制这两个部分,通过设置背景色和border-radius,然后按照一定的角度旋转并平移则可得到。为了方便定位,这里我们用两个伪元素来绘制这两个部分。为了方便观察,我们先设置如下样式

  1. .heart{
  2. display: inline-block;
  3. margin-top: 1.5em;
  4. width:50px;
  5. height: 50px;
  6. background: green;
  7. }
  8. .heart:before,.heart:after {
  9. position: absolute;
  10. width: 1em;
  11. height: 1.6em;
  12. background: #000;
  13. border-radius: 50% 50% 0 0;
  14. content: '';
  15. bottom: 0;
  16. }
  17. .heart:before {
  18. -webkit-transform: rotate(45deg);
  19. -webkit-transform-origin: 100% 100%;
  20. right: 0;
  21. background: red;
  22. opacity: .5;
  23. z-index: 5;
  24. }
  25. .:after {
  26. -webkit-transform: rotate(-45deg);
  27. -webkit-transform-origin: 0 100%;
  28. left: 0;
  29. opacity: .8;
  30. }

可以看到,此时两个元素将因为.heart元素的宽度而撑开了一段距离,实际上应该是A点和B点重合于一点。因此,如果我们把.heart的宽高都设为0,则得到如下结果:


到这里为止,已经完成了一个心形的绘制,但是仔细看,左右两侧会有一个边角突出,这是因为旋转的角度不够导致。可以通过调大角度或者设置一个较大的圆角(适应性更高)来修复此问题。这里将旋转的角度调整为48deg。修改颜色和透明度后即得到如下结果:


  • 相机

至于这个相机,由于前面已经介绍了如何用border-radius绘制一个代表目标的图标,问题就变得很简单了。整个相机分为三个部分,通过定位即可实现。以下直接贴实现代码。

  1. .camera {
  2. display: inline-block;
  3. border-style: solid;
  4. border-width: .65em .9em;
  5. border-radius: .1em;
  6. }
  7. .camera:before {
  8. position: absolute;
  9. top: -.3em;
  10. left: -.3em;
  11. width: .4em;
  12. height: .4em;
  13. border-radius: 50%;
  14. border: .1em solid #FFF;
  15. box-shadow: 0 0 0 .08em,0 0 0 .16em #fff;
  16. content: '';
  17. }
  18. .camera:after {
  19. position: absolute;
  20. top: -.5em;
  21. left: .5em;
  22. width: .2em;
  23. border-top: .125em solid #FFF;
  24. content: '';
  25. }
  • 月亮

月亮这个图标乍一看似乎挺难实现,但如果掌握了border-radius属性的应用,其实是相当的容易,以下为完整的CSS样式:

  1. .moon {
  2. display:inline-block;
  3. height: 1.5em;
  4. width: 1.5em;
  5. box-shadow: inset -.4em 0 0;
  6. border-radius: 2em;
  7. transform: rotate(20deg);
  8. }

其核心是将阴影的模式设置为inset通过调整参数,可以得到不同的月亮形状,如下图:


总结

用CSS绘制图标其实其核心就是将拆分后的多个元素经过旋转和平移得到。归根结底还是要掌握CSS相关属性的应用。一般由以下几个步骤:

  • 分析图标,拆分为小元素
  • 绘制小元素
  • 定位(平移和旋转等)
  • 设置在父级元素的定位(如用margin定位)

如果不限制于单个标签实现,那么可以绘制更多复杂的图标。以下为个人在绘制图标时的一点小体会:

  • 图标的颜色可以使用border属性去绘制
  • border-color大部分情况下可以不设置,默认跟随图标当前所在文本的字体颜色
  • 图标的大小单位可以使用em,即相对于当前所在文本的字体大小进行计算,这应该符合与大部分场合,适应性也高,复用性强。(以上例子中均仅需要调整父级的字体大小即可以放大或缩小图标)

相关阅读

CSS魔法之重拾CSS乐趣(上)

CSS魔法之重拾CSS乐趣(下)

CSS3 Patterns Gallery

一步步打造自己的纯CSS单标签图标库的更多相关文章

  1. 纯css实现网络图标

    <html> <head> <title>css图标</title> <meta charset="utf-8"> &l ...

  2. 纯CSS 实现关闭图标 icon

    本文介绍关闭 icon 的实现.具体如下 1.html部分 <span id="close"></span> 2.css部分 #close { displa ...

  3. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

  4. 纯CSS制作网页图标

    三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top ...

  5. 一个标签的72变,打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  6. 纯CSS打造银色MacBook Air(完整版)

    上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...

  7. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  8. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  9. Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float,实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写,小写转大写,数字保留,其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform

    Expression构建DataTable to Entity 映射委托   1 namespace Echofool.Utility.Common { 2 using System; 3 using ...

随机推荐

  1. 迅为iTOP-4418开发板编译Ubuntu

    Ubuntu 系统比较特殊,源码就是它的镜像.Ubuntu 系统通过解压的方式进行烧写,我们也可以通过配置解压出来的 Ubuntu 系统源码文件夹,来配置 Ubuntu 系统.然后通过打包压缩的方式来 ...

  2. sql表变量,临时表

    @test是表变量,存在于内存中:#是临时表,存在于tempdb数据库空间.

  3. Ajax - XMLHTTP实例

    url:http://localhost/index.htm <html> <head> <title>Ajax</title> <script ...

  4. arduino驱动oled

    OLED一款小巧的显示屏,感觉可以做出很可爱的东西. 这次实验的这款是128X64的OLED屏幕 , 芯片是SSD1306,请确认自家模块芯片型号,不然对不上号啊 使用IIC的方法,简单实验显示示例程 ...

  5. Angular开发者指南(二)概念概述

    template(模板):带有附加标记的模板HTML directives(指令):使用自定义属性和元素扩展HTML model(模型):用户在视图中显示的数据,并与用户进行交互 scope(作用域) ...

  6. F5 BIG-IP之二 LTM实验一

  7. AngularJS中格式化日期为指定格式字符串

    var date = $filter('date')(new Date(),'MM/dd/yyyy');

  8. gin源码剖析

    介绍 Gin 是一个 Golang 写的 web 框架,具有高性能的优点,基于 httprouter,它提供了类似martini但更好性能(路由性能约快40倍)的API服务.官方地址:https:// ...

  9. IO流文件拷贝

    目录 IO流文件拷贝 前言 字节流(使用FileInputStream和FileOutputStream读取每一个字节...) 字节流(使用FileInputStream和FileOutputStre ...

  10. 深入 Java 调试体系: 第 1 部分,JPDA 体系概览

    JPDA 概述 所有的程序员都会遇到 bug,对于运行态的错误,我们往往需要一些方法来观察和测试运行态中的环境.在 Java 程序中,最简单的,您是否尝试过使用 System.out.println( ...