我是FE,也是Fe

前端来源于不断的点滴积累。我一直在努力。

统计

留言簿(15)

阅读排行榜

评论排行榜

使用css3画"静音"icon

先看看画出来的效果:

注意没有使用图片,而是在支持css3的浏览器(Firefox 3.5+, Chrome 5, and Opera 10.6)中的纯css画出来的icon效果截图,而且html代码也非常简单。

仔细观察静音的这个icon,由4部分构成,一个圆圈,一个斜线,一个正方形,一个三角形。

圆圈可以使用css3里面的圆角实现。
斜线可以是一个元素的边框,然后经过转45度得到。
正方形就不用说了。
三角形可以使用边框来实现。

如果给每个元素一个标签,可想html结构是比较复杂,幸好可以使用:before :after伪元素来实现。

代码:
<style type="text/css">

.mute
{font: 50px/1.4 "Microsoft YaHei";position:relative;z-index:1;overflow:hidden; padding-left:50px;}
.mute a
{text-decoration:none; color:#444; font-weight:bold;}

/*将4个元素的坐标原点成容器的左中*/
.mute:before, .mute:after, .mute a:before, .mute a:after 
{
    content
: "";
    position
: absolute;
    top
: 50%;
    left
: 0;
}

/*.mute前面的伪元素实现圆圈*/
.mute:before
{
    width
: 40px;
    height
: 40px;
    border
: 1px solid #C55500;
    margin-top
: -19px;
    -webkit-border-radius
: 40px;/*圆角半径为元素宽度,这样,每一个圆角成为1/4圆*/
    -moz-border-radius
: 40px;
    border-radius
: 40px;
}

/*.mute后面的伪元素实现斜线,边框旋转45度得到*/
.mute:after 
{
    width
: 40px;
    border-top
: 1px solid #C55500;
    -webkit-transform
: rotate(-45deg);
    -moz-transform
: rotate(-45deg);
    -o-transform
: rotate(-45deg);
    transform
: rotate(-45deg);
}

/*a的前面伪元素实现三角形*/
.mute a:before 
{
    left
: -3px;
    border
: 17px solid transparent;
    border-right-color
: #C55500;
    margin-top
: -16px;
    background
: transparent;
}
/*a后面的伪元素画一个正方形放在合适的位置*/
.mute a:after 
{
    height
: 16px;
    left
: 8px;
    margin-top
: -8px;
    width
: 16px;
    background-color
:#C55500;
}

</style>
<!-- html就这么简单 -->
<span class="mute"><href="###">Mute</a></span>

使用css3实现的icon的最大优点在于可以自由的改变icon的颜色,而不是做很多图片,icon更像是用画笔画出来的,可控性强,易于修改和扩展。

参考资料:

更多的css icon3 demo: http://nicolasgallagher.com/pure-css-gui-icons/demo
原作者博文:http://nicolasgallagher.com/pure-css-gui-icons/
更多使用伪元素实现的特效:http://www.haipi8.com/css/347
css border的妙用:http://www.classyuan.com/?p=252








posted on 2011-09-14 00:19 衡锋 阅读(2102) 评论(2)  编辑  收藏 所属分类: Web开发

评论

# re: 使用css3画"静音"icon 2011-09-14 08:54 tb

高手   回复  更多评论   

# re: 使用css3画"静音"icon 2011-09-17 13:14 晴天

用CSS3缺点也很明显,兼容性!  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: