拾人牙慧 – CSS3实现Opera浏览器的logo

标签: css相关 3d border-radius box-shadow css3 | 发表时间:2010-08-07 22:22 | 作者:张 鑫旭 Wolf
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=1012

原作者:David DeSandro
原文地址:http://desandro.com/articles/opera-logo-css/
翻译/编辑:张鑫旭

一、终效果图enjoy~~

以下效果截图截自Firefox3.6浏览器:
CSS3 Opera logo Firefox3.6下效果图 张鑫旭-鑫空间-鑫生活

上图为CSS3实现的效果图,如果您有兴趣可以与正宗的Opera浏览器的logo图做比对,查看logo原图请狠狠地点击这里:Opera浏览器logo原图

您可能是个细心的人,可以看出其中不少差异,但是我确实是没有看出多少不同来,我只能叹服CSS的惊人潜力。

demo与下载
您可以狠狠地点击这里:CSS3实现Opera浏览器logo demo

源文件下载请狠狠地点击这里:css3-opera-logo.zip(右键-[目标|链接]另存为)

二、效果的实现

一般这类CSS3实现的效果无非那几个CSS属性,要么圆角(border-radius),要么渐变(gradient),要么就是盒阴影(box-shadow)。本文的实现也不例外,由于这几个属性我之前有过专门的介绍,所以这里不具体叙述,仅提供一些链接。

CSS3属性就像是photoshop中的图层样式,仅仅掌握一些图层样式效果不一定能够实现精湛的UI效果,例如,我们还需要知道图层原理。本文的实例可以说就是图层与图层样式结合的产物,也就是使用photoshop绘图的过程(说Illustrator的使用更贴切,因为绘出的图形都是矢量的)。而这里,图层样式就是CSS3属性,图层就是absolute绝对定位。

换句话说,本文的Opera logo效果,是CSS3+绝对定位实现的。

本实例logo由8个div层绝对定位合成的。现在我们一个一个展示出来(以下截图均截自Firefox3.6浏览器):

淡阴影
Opera logo淡阴影 张鑫旭-鑫空间-鑫生活

圆角+无距离的盒阴影实现。参见如下代码:

-moz-border-radius: 152px/25px;
-webkit-border-radius: 152px 25px;
border-radius: 152px/25px;
-moz-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
-webkit-box-shadow: 0 100px 30px hsla(0,0%,0%,.2);
box-shadow: 0 100px 30px hsla(0,0%,0%,.2);

上述代码有两点值得一提:
一是圆角的缩写。此值的表示方式与background-position类似,只是Mozilla使用斜线,而webkit使用空格。border-radius可以说是用得最广的CSS3属性,没有之一。关于border-radius的基本用法,以及一些相关文章可以狠狠地点击这里:border-radius使用参考
二是颜色的HSLA表示,HSLA也是CSS3中的属性,使用色调,饱和度,亮度以及透明度来表示颜色。查看HSLA基本属性,您可以狠狠地点击这里:HSLA使用参考。按照作者的说法,使用这种色调形式表示颜色,而不是RGBA是,是由于HSLA更方便对颜色进行微调。

关于box-shadow盒阴影的相关内容,您可以狠狠地点击这里:box-shadow使用参考指南,里面有不少相关文章的集合,如下截图所示:
CSS3 盒阴影参考内容截图 张鑫旭-鑫空间-鑫生活

深色阴影
在上面的颜色的较淡的阴影上再覆盖一个更深一点的阴影,结果如下:
添加深色阴影 张鑫旭-鑫空间-鑫生活

此处的相应的CSS3代码是:

-moz-border-radius: 110px/35px;
-webkit-border-radius: 110px 35px;
border-radius: 110px/35px;
-moz-box-shadow: 0 100px 15px hsla(0,0%,0%,.6);
-webkit-box-shadow: 0 100px 15px hsla(0,0%,0%,.6);
box-shadow: 0 100px 15px hsla(0,0%,0%,.6);

外框边缘
边缘边框效果截图 张鑫旭-鑫空间-鑫生活

相应的CSS3代码如下:

background: #800;
background: -moz-linear-gradient(-90deg, #F88, #800);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#F88), to(#800));
border-radius: 220px;
-moz-border-radius: 220px/235px;
-webkit-border-radius: 220px 235px;
border-radius: 220px/235px;

主要内容就是圆角与渐变,圆角上面已经提及,关于渐变,您可以参见下面三篇文章:“CSS渐变之CSS3 gradient在Firefox3.6下的使用 ”、“CSS gradient渐变之webkit核心浏览器下的使用 ”、“CSS实现兼容性的渐变背景(gradient)效果”其中对不同的浏览器如何应用渐变效果做了相当详细的介绍,您有兴趣可以去看看。

高亮
高亮图层就是比边缘图层尺寸略小的渐变跨度更大更淡的渐变层。高亮层的覆盖使得背景的深色渐变只透出一点较深的边缘。如下图所示:
Opera logo效果之高亮层效果 张鑫旭-鑫空间-鑫生活

相关的CSS3代码如下:

background: #d40009;
background: -moz-linear-gradient(-90deg, #FCC, #E71616 50%, #d40009);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FCC), color-stop(50%, #E71616), to(#d40009));
-moz-border-radius: 218px/233px;
-webkit-border-radius: 218px 233px;
border-radius: 218px/233px;

填充
填充图层与上面高亮层属性作用类似,用来勾勒高光边框,之所以称为填充图层,因为我们看到最后的Opera logo的效果的主要颜色就是此图层的颜色,故称之为填充层。该图层覆盖在高亮层上的效果如下图:
Opera logo填充层覆盖后效果 张鑫旭-鑫空间-鑫生活

也是CSS3渐变和CSS3的杰作~~,代码如下所示:

background: #E71616;
background: -moz-linear-gradient(-90deg, #FE878A, #E71616 50%, #800000 80%, #800000 85%, #b80304);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FE878A), to(#b80304), color-stop(50%, #E71616), color-stop(80%, #800000), color-stop(85%, #800000) );
-moz-border-radius: 218px/228px;
-webkit-border-radius: 218px 228px;
border-radius: 218px/228px;

此处的渐变颜色断点较多,所以渐变代码稍事复杂了点。如果您对渐变的代码含义不是很了解,您可以参见我前面说过的三篇关于渐变的文章。

内边缘
内边缘层继续覆盖后的效果如下:
内边缘层覆盖后的效果 张鑫旭-鑫空间-鑫生活

不变的圆角,不变的渐变,其相关参数如下所示:

background: #d20000;
background: -moz-linear-gradient(-90deg, #cc3836, #d9100f 50%, #d20000);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#cc3836), color-stop(50%, #d9100f), to(#d20000));
-moz-border-radius: 99px/170px;
-webkit-border-radius: 99px 170px;
border-radius: 99px/170px;

内填充
进一步填充,效果见下图:
进一步内填充后的Opera logo效果 张鑫旭-鑫空间-鑫生活

圆角以及渐变相关CSS3代码如下:

background: #b80000;
background: -moz-linear-gradient(-90deg, #9a0000, #b80000);
background: -webkit-gradient(linear, 0 top, 0 bottom, from(#9a0000), to(#b80000));
-moz-border-radius: 96px/170px;
-webkit-border-radius: 96px 170px;
border-radius: 96px/170px;

画龙点睛的反色
最后一个图层是画龙点睛之比,是个白色的反色的图层,无渐变,单纯的圆角加上纯白的背景,废话少说,见效果:
反白图层的效果 张鑫旭-鑫空间-鑫生活

哇哦,我不禁起立鼓掌!so nice, so perfect, so unimaginable!就几个圆角,就几个渐变图层,最后却有了如此精湛的Opera浏览器3D的logo效果。感谢CSS3,感谢作者,感谢所有的web开发人员。//zxx:糟了,我记得应该先感谢国家的……

好吧,固定的流程还是要走的,最后一段CSS3代码:

background: #FFF;
-moz-border-radius: 82px/170px;
-webkit-border-radius: 82px 170px;
border-radius: 82px/170px;

小Tip:上述所有CSS3代码仅展示了CSS3相关部分,一些宽度高度以及绝对定位的left和top CSS属性未展示。不过您可以从打包的demo页面中找到完成的CSS代码。

三、其他的浏览器兄弟

二部分所有的效果截图均来自Firefox3.6浏览器,如果您不想麻烦,把demo页面在一个一个浏览器下看效果,您也可以直接看下图,展示了目前各个浏览器下的对此CSS3实现的Opera浏览器的logo的支持程度:
各个浏览器对CSS3实现的Opera logo的支持程度 张鑫旭-鑫空间-鑫生活

对于早已让我让我无言以对的IE6/IE7/IE8浏览器,我就不说什么了。貌似IE9会支持圆角属性,虽然微软把IE9说得天花乱坠,但是我是不抱什么大的期待的~~

四、关于一些前端的技术趋势

从最近国外各大前端技术网站的内容来看,HTML5,CSS3,与SVG必定是趋势与主流,已经呈现势不可挡,繁荣昌盛之势。就国内死水般的现状而言,感觉又要落后人家好几年了。此现状不仅在前端,在交互、在设计都是如此。虽然,交互与设计我不够专业,但是从腾讯团队博客所嚼的些有关交互与设计方面的理论都是国外数年前的研究成果来看,滞后于国外是当前中国互联网行业的普遍现状(从互联网产品的内容与盲目借鉴也可见一斑)。

前端领域可以大有作为。多关注HTML5,CSS3,与SVG吧,对于未来的你必定会有受益的。但是,前提是,对于当前的XHTML与CSS2你需要足够的理解。这是一条艰苦的路程,任重而道远啊!

我今天看到首页上有人提问说为什么今日为更新文章,因为最近我在研究与学习另外一个js库,MooTools库,这是大众点评网使用的js库。最近迷上了这个,且学到了很多东西。精力有限,所以差不多一周的时间都没有写新文章了。

就说这些,我要学的还有太多太多,大家一起成长吧~~

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1012

(本篇完)

相关 [css3 opera 浏览器] 推荐:

拾人牙慧 – CSS3实现Opera浏览器的logo

- Wolf - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1012. 原作者:David DeSandro. 原文地址:http://desandro.com/articles/opera-logo-css/. 以下效果截图截自Firefox3.6浏览器:. 上图为CSS3实现的效果图,如果您有兴趣可以与正宗的Opera浏览器的logo图做比对,查看logo原图请狠狠地点击这里:Opera浏览器logo原图.

Opera中国版手机浏览器叫欧朋

- 瑾 - Engadget 中国版
Opera 也来中国摆货了,这次是取名欧朋来打手机浏览器市场,针对中国市场做了一些改进,比如说微博的一键分享,转发等,对于网址,可以预设达63个快速拨号界面,实际上就是网址快捷方式,号称的云端转码技术可以帮你省流量,不过现在中国的手机用户浏览器可是多的很,包括了UC浏览器,QQ浏览器,遨游,海豚,天天,这位来自"欧洲的朋友"会否显得更加友善,要看大家了,你现在用的手机浏览器是啥.

Opera移动浏览器用户数目突破2.29亿

- - cnBeta.COM
当前在移动设备上使用Opera浏览器的用户数目越来越多,Opera今天宣布, 自2006年Opera Mini发布以来2012年12月成为用户数目增长最多的一个月. 按照Opera所说,上个月有超过2.08亿人使用Opera Mini浏览器访问互联网. Opera Mini是这家公司的重点产品,几乎在主流平台上都能找到此应用,包括iOS、Android、BlackBerry和先前的Windows Mobile等.

五大主流浏览器 CSS3 和 HTML5 兼容性大比拼

- jessie - 博客园-梦想天空
  各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准. 就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已经接近完成,如果进展顺利,HTML5 将在 2012 年正式成为国际标准.   当然,即使标准正式制定了,现代浏览器要普及到大部分用户也是需要一个相当漫长的过程.

2012五大主流浏览器 HTML5 和 CSS3 兼容性大比拼

- - 博客园_梦想天空
  距离上一次发布《五大主流浏览器. CSS3 兼容性大比拼》转眼已过去一年,在这一年里,浏览器领域的竞争愈演愈烈. Firefox 成为新的“版本帝”但依然未能摆脱被 Chrome 超越的命运,支持更多标准的 IE10 将随着 Windows 8 在10月底正式发布,淡定的 Opera 也在上个月发布了新版本,国内的各大浏览器厂商更是掀起一轮又一轮的.

2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼

- - 博客园_梦想天空
  转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升;IE10 随着 Windows 8 在去年10月底正式发布,在 JavaScript 性能和对 HTML5 和 CSS3 的支持方面让人眼前一亮. 这篇文章给大家带来《五大主流浏览器 . CSS3 兼容性大比拼》,让我们一起来看看2013年的浏览器现状.

代码检测HTML5/CSS3新特性的浏览器支持情况

- - 极客521 | 极客521
伴随着今年10月底HTML5标准版的发布,未来使用HTML5的场景会越来越多,这是令web开发者欢欣鼓舞的事情. 然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8、9为主,windows8.1的用户已经用上了IE10/11,而考虑我国的国情,IE6、7依然存留不少.

Opera 、天音成立合资公司,将在中国推本土Android 版“欧朋浏览器”

- xinzhi - 36氪
似乎这位“全球最大的手机浏览器厂商”Opera 也开始重视日益受全球关注的中国市场了. 今天下午3:30,由Opera软件公司和天音通信成立的合资公司将推出新版的“欧朋浏览器”,开始发力中国市场. “欧朋浏览器”的大体风格和Opera 类似,但是其中做了很多中国本土的功能. 首先,点击首页的“微博资讯”和“微博娱乐”(eZine)是通过欧朋设计的智能算法抓取到的微博上的热点微博.

新版Opera浏览器(Android平台)利用云帮你省流量,最多可节约80%

- kxxoling - 36氪
Opera也开始“云”了,目标是为用户节省流量费,拯救那些整天被流量压迫的人们. 在Android平台新推出的Opera Mobile 11.5 和 Mini 6.5,通过第三方服务器的中转处理,运用云技术减少了页面的大小,最多可节约80%的流量. 新版的Opera可以清楚的列出你已经使用的流量和Opera帮你节省的流量(量化的数据似乎总是让用户觉得爽的很明显,比如360就很爱用这招).

哆啦A梦告诉你目前各家浏览器对 CSS3 的支持状况... (39 回應)

- aoao - Engadget 中国版
上面的图是某日本神人用 CSS3 画的. 四个浏览里面 Chrome 的支持度最高,不仅圆角、阴影一应俱全,甚至连眼睛都还会动 @@. Firefox 3.6 次之,除了眼睛不会动之外都和 Chrome 相当,Opera 则是少了阴影. 大家可以到这里,自已看看你现在用的浏览器画出来的效果喔. 引用来源 | 此文章网址 | 转寄此文章 | 回应.