Hipo日志

堆叠按钮

3/30/2013, 5:10:44 AM

Intro

相信大家业已了解CSS3 icon font的诸多优势，在之前的文章中较为详细的介绍了icon font的制作和应用，但美中不足的是制作出的按钮icon只能为单色，而且受限与icon矢量缩放的特新，在单个字体中的形状也不会太复杂，今天的译文或许可以提供一种新的思路。

英文地址：http://conor.cc/posts/icon-stacks

————–以下为译文—————————————
结合不同的icon font 字形可以创建组合式的超级icon（mega-icon）。

如果你最近才加入设计师和开发者的队伍中并在使用icon font，那么你很可能正处在蜜月期。对于我来说，在我第一次在App中使用这些甜蜜而可伸缩的字形的时候，icon font就像是上帝送来的礼物。向混乱的雪碧图，farewall中的PNG，GIF，JPG图片说再见把，我再也不会为背景图片的位置是-1384px还是-1385px而折磨自己了。

在我尝试将所有的雪碧图和图片从我的代码仓库中移除的时候，我碰壁了——多色的icon。是的，使用icon font 我只能创建平坦的，单调的而且单色的icon……但我不能就此放弃！因此我想到了堆叠icon（Icon Stacks™）。原理很简单，分离你多色矢量图的组件，把每个元素变成icon font，然后将其堆叠到一块以此来创建一个超级icon。请看实例。

我想要可伸缩的天气icon

使用经典的icon font来实施，你只能使用这样的按钮：

而使用堆叠icon则可以得到这样的按钮：

HTML代码

<i class="icon-stack">
	<i class="icon icon-upper-sun"></i>
    <i class="icon icon-cloud-w-upper icon-stack-base"></i>
</i>

CSS代码

.icon, .icon-stack { 
	font-family: 'conorcc'; 
    font-size: inherit; // So icon adapts to the size of its parent 
    position: relative; // To allow for nudging icons up and down for vertical alignment 
    display: inline-block; // So we get the crispest icons possible at all times 
    line-height: 0.9; // Without this the line-height can screw up the height of containers in FF 
    *line-height: 1; // Old IE needs a slightly different value =) 
} 
.icon-stack .icon { 
	position: absolute; // Icons within the stack are positioned one on top of the other 
    top: 0; 
    left: 0; 
} 
.icon-stack .icon-stack-base { 
	position: relative; // One of the icons needs to be identified as a base so it won't be positioned absolutely 
} 
.icon-cloud-w-upper { 
	color: #AFD2EB; 
} 
.icon-upper-sun { 
	color: #e7be00; 
}

这样我们便改进了单色按钮，如果我们再加上点渐变纵深将会更好。

.backgroundcliptext .icon-cloud-w-upper { 
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0.95)), color-stop(50%, rgba(250, 250, 250, 0.95)), color-stop(100%, #CCC)); 
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC); 
    background: -moz-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC); 
    background: -o-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC); 
    background: linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC); 
    -webkit-background-clip: text; 
    -moz-background-clip: text; 
    background-clip: text; 
    color: transparent; 
}

最后我们就得到了一个跟为完善的天气icon集。

译者注：由于wordpress编辑器蛮多元素不支持，具体的实例可以访问英文原文地址或者地址二。

————–2013.7.8———

http://forecastfont.iconvau.lt/上也提供类似的效果，只是使用了before，after伪元素，这样HTML代码变得很是精简，也更加符合语义化的原则，只是兼容性差了点。

堆叠按钮

toc

Intro