神奇的纯CSS图标

文章目录

使用纯CSS的伪元素来创建简单的图标,这是一个比较有创意的做法,正如你在本站看到的评论数图标就是用:before和:after来制作的,下面分享一个国外的朋友制作了84个常用图标。

制作说明

该代码为实验性代码,不适应用在生产环境中,更多是作为一个练习性的作品,兼容: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+.

pure-css-gui-icons

代码思路:

主要是通过设置元素为position:relative;设置:before 和 :after为position:absolute;然后通过CSS相关的background、border、border-radius、transform:rotate()、和z-index来交叉生成,让我们不得不感叹神奇的CSS世界。来看看其中一个是怎么写的。

HTML代码:

<ul>
  <li class="power"><a href="#non">Power</a></li>
  <li class="play"><a href="#non">Play</a></li>
  <li class="stop"><a href="#non">Stop</a></li>
  <li class="pause"><a href="#non">Pause</a></li>
</ul>

CSS代码:

.expand a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  width: 5px;
  height: 0;
  border-width: 7px 7px 0;
  border-style: solid;
  border-color: transparent #c55500;
  margin-top: -4px;
  /* css3 */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.expand a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 8px;
  height: 8px;
  border-width: 3px 0 0 3px;
  border-style: solid;
  border-color: #c55500;
  margin-top: -6px;
}

.expand a:hover:before,
.expand a:focus:before,
.expand a:active:before {
  border-color: transparent #730800;
}

.expand a:hover:after,
.expand a:focus:after,
.expand a:active:after {
  border-color: #730800;
}

案例:

还有更多的纯css背景气泡、纯CSS媒体社交图标、不用图片的阴影、纯CSS边角效果

此处内容需要登录才可见
神奇的纯CSS图标

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原文链接:(http://caibaojian.com/pure-css-icons.html)
转发请注明来自前端开发博客

发表评论

请登录后发表评论: