Google Reader

84个纯CSS GUI图标

by yuanyi

at 2011-07-12 20:44:02

original http://heikezhi.com/2011/07/12/pure-css-gui-icons/

Nicolas Gallagher使用纯CSS及HTML制作了84个实验性质的GUI图标，这些图标只是他尝试通过创造性的方法解决问题的习作，目前还不建议在产品环境使用它们。

你可以在这里看到所有图标的DEMO，目前支持Firefox 3.5+，Safari 5+，Chrome 5+以及Opera 10.6+。

这些图表使用了html的ul和li标签：

<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>

没个图标都使用独立的样式，以展开（expand）图标为例：

.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 Reset的历史（二）	CSS Reset的历史(一）	我们的最佳实践正在害死我们	“生意人”的挑战
无觅