Yosemite Safari工具栏特效

如果你使用Mac机器并且已经升级到了最新的Yosemite系统版本的话,用safari浏览网页会发现头部工具栏已经有了类似iOS中Safari工具栏的半透明毛玻璃效果了。Safari会自动根据页面的颜色来显示工具栏的毛玻璃特效,但我们也可以定制一下。

Safari默认会显示当前页面最顶部的颜色,比如,前端观察的:

yosemite-safari

@lymXX制作了一个自定义工具栏效果的demo,很赞(只是该项目名称为RainbowSafari,彩虹。。。怪怪的),你可以自定义Safari的工具栏显示的颜色为纯色或者渐变色,亦可以是图片等。

代码也很简单:

<div id="rainbowsafari"></div>  
#rainbowsafari { 
    background-color: #FFFFFF; /* Edit This */ 
    right: 0; 
    top: 0; 
    height: 100px; 
    z-index: 99999999999; 
    position: fixed; 
    content: ""; 
    display: block; 
    -webkit-transform: translateY(-99.99px); 
}

原理就不说了,不难理解。

查看demo

查看github