使用CSS3制作72个webapp图标

前言

      移动网络带宽的快慢直接影响webapp应用体验效果的优差,其中加载图片是很耗流量的,所以对这一方面的性能优化是很需要的。一般对于那些小而多的图片(图标)都会采用sprite合并成一张图片来减少http的请求次数。而CSS3的出现,无疑在移动端对图标的优化有着比较大的帮助。为此,自己也琢磨使用CSS3来制作一些常用的图标。有句话这么说:能用CSS3就不用图片!

正题

      于是用了一天的时间,我制作了72个相对比较常用的图标,图标效果图整理如下:

 

360截图20150723164339986

360截图20150723164405434

360截图20150723164429498

360截图20150723164442081

 

今天就跟大家一起分享一下:

首先,每个图标的基本结构为:

<a href="#" class="btn-box">
    <span class="icon-chevron-left"></span>
</a>

其中,.btn-box是定义<a>标签的基本设置,大小为40x40,由于我这里默认将图标放在一个<a>标签里面以实现按钮效果,如果不需要<a>标签的话可以换成别的(例如div),但是.btn-box必须带上,因为里面的<span>的定位是相对于父元素的。

.btn-box的基本样式为:

.btn-box{
    display: inline-block;
    width: 40px;
    height: 40px;
    text-decoration: none;
    position: relative;
}

接下来讲一下<span>标签,该标签只需要添加一个类名就行了,该类名的选择就是上图中72个图标样式类名中的一个。每个类名实现一个图标效果,依据图标效果的实现过程会不固定地使用到:before和:after这两个伪元素来辅助实现所需的图标效果。当然,使用CSS3在某些图标的实现上还是很难达到矢量图标或者图标字体那么完美,这方面可能是我学术尚浅以致目前无法自我解决。另外,在这72个图标中,有几个图标是有白色遮罩的,分别是:

1.移动图标:此图标中间的白色小正方形是白色遮罩。

360截图20150723171325983

2.相机图标:此图标中间白色圆圈是白色遮罩。

360截图20150723171352799

3.手机图标:此图标顶部和尾部的小矩形和小圆圈是白色遮罩。

360截图20150723171400255

4.标签图标:此图标中的小圆圈是白色遮罩。

360截图20150723171413070

5.网格图标:此图标中间的白色线条是白色遮罩。

360截图20150723192112806

6.开关机图标:此图标圆圈顶部的缺口是白色遮罩。

360截图20150723192119069

7.刷新图标:此图标右边的缺口是白色遮罩。

360截图20150723192127045

PS:说明一下:所谓白色遮罩就是当无法使用CSS规则来达到某种效果时,采用伪元素作为白色遮罩以完成所需的图标效果,所以使用时需要结合实际情况修改遮罩颜色,以达到和背景色融合。当然,相机,手机和标签图标的遮罩部分不改动也不影响叶敏啊美观。除此之外,其他图标都是可以放心使用,若遇到需要根据实际情况改变图标大小的,可以自行修改,不过我在各种主流分辨率下测试过,基本上不会影响使用。

由于图标数量很多,我就选取一些图标的代码进行分享,其他的可以到我提供的github地址下载哦:

360截图20150723192241284

<a href="#" class="btn-box">
    <span class="icon-music"></span>
</a>
.icon-music{
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px 3px 0 0;
    border-top:7px solid #333;
    border-left:3px solid #333;
    border-right:3px solid #333;
    position: absolute;
    top:6px;
    left:11px;
    -webkit-transform: skewY(-15deg);
}
.icon-music:before,.icon-music:after{
    content: '';
    display: inline-block;
    width: 10px;
    height: 7px;
    background: #333;
    border-radius: 10px/7px;
    position: absolute;
    -webkit-transform: rotate(15deg);
}
.icon-music:before{
    top:14px;
    left:-10px;
}
.icon-music:after{
    top:14px;
    left:11px;
}

360截图20150723192127045

<a href="#" class="btn-box">
    <span class="icon-refresh"></span>
</a>
.icon-refresh{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border:4px solid #333;
    position:absolute;
    top:6px;
    left:6px;
}
.icon-refresh:before{
    content: '';
    display: inline-block;
    width: 6px;
    height: 10px;
    background: #fff;
    position:absolute;
    top:4px;
    right:-4px;
}
.icon-refresh:after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-left:6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    position:absolute;
    top:1px;
    left:14.5px;
    -webkit-transform: rotate(-45deg);
}

360截图20150723192338516

<a href="#" class="btn-box">
    <span class="icon-heart"></span>
</a>
.icon-heart,.icon-heart:before{
    display: inline-block;
    width: 20px;
    height: 30px;
    border-radius: 10px;
    background: #333;
    position: absolute;
    top:-10px;
    left:12.7px;
    -webkit-transform-origin: bottom right;
    -webkit-transform: rotate(-45deg);
}
.icon-heart:before{
    content: '';
    -webkit-transform-origin: bottom left;
    -webkit-transform: rotate(90deg);
    top:-18px;
    left:2px;
}
.icon-heart:after{
    content: '';
    width: 0;
    height: 0;
    border-left:10.8px solid transparent;
    border-right:10.8px solid transparent;
    border-top:12px solid #333;
    -webkit-transform: rotate(45deg);
    position: absolute;
    top:22.5px;
    left:-7.3px;
}

360截图20150723192344436

<a href="#" class="btn-box">
    <span class="icon-star"></span>
</a>
.icon-star,.icon-star:before,.icon-star:after{
    display: inline-block;
    width: 0;
    height: 0;
    border-top:20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 14px solid #333;
    -webkit-transform: rotate(18deg);
    position: absolute;
    left:13.5px;
    top:2px;
}
.icon-star:before{
    content: '';
    top:-19.2px;
    left:-14.5px;
    -webkit-transform: rotate(72deg);
}
.icon-star:after{
    content: '';
    top:-19.8px;
    left:-15.5px;
    -webkit-transform: rotate(145deg);
}

360截图20150723192352732

<a href="#" class="btn-box">
    <span class="icon-user"></span>
</a>
.icon-user{
    display: inline-block;
    width: 14px;
    height: 18px;
    background: #333;
    border-radius: 7px 7px 5px 5px;
    position: absolute;
    top:5px;
    left:13px;
}
.icon-user:before{
    content: '';
    display: inline-block;
    width: 8px;
    height: 10px;
    background: #333;
    position: absolute;top:17px;left:3px;
}
.icon-user:after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-left:20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 12px solid #333;
    border-radius: 50%;
    position: absolute;top:18px;left:-13px;
}

360截图20150723192406267

<a href="#" class="btn-box">
    <span class="icon-screenshot"></span>
</a>
.icon-screenshot{
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border:3px solid #333;
    position: absolute;
    top:8.5px;
    left:8.5px;
}
.icon-screenshot:before,.icon-screenshot:after{
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-left:15px solid #333;
    border-right:15px solid #333;
    position: absolute;
    top:6px;
    left:-9px;
}
.icon-screenshot:after{
    -webkit-transform:rotate(90deg);
}

360截图20150723192426275

<a href="#" class="btn-box">
    <span class="icon-move"></span>
</a>
.icon-move{
    display: inline-block;
    width: 26px;
    height: 26px;
    background: #333;
    position: absolute;
    top:7px;
    left:7px;
    -webkit-transform: rotate(45deg);
}
.icon-move:after,.icon-move:before{
    content: '';
    display: inline-block;
    width: 4px;
    height: 8px;
    border-left: 8px solid #fff;
    border-right: 8px solid #fff;
    position: absolute;
    top:5px;
    left:-1px;
    -webkit-transform: rotate(-45deg);
}
.icon-move:after{
    -webkit-transform: rotate(-45deg) translateY(12px);
}

OK,其他图标详见我的github之css3-icon:https://github.com/JR93/css3-icon

 

最后,转载请注明出处,谢谢!

posted @ 2015-07-23 20:07  郭锦荣  阅读(5776)  评论(8编辑  收藏