堆叠按钮

相信大家业已了解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代码变得很是精简,也更加符合语义化的原则,只是兼容性差了点。

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus