使用CSS3设计Opera浏览器LOGO教程

2019-09-10 郑州网站建设  

在我们上一期的LOGO设计教程中,我们分享了《教你使用纯CSS设计HTML5新LOGO》,之后一发不可收拾,没想到用CSS还做日志o设计,那么今天我们继续,标志free君教你使用CSS3设计Opera浏览器LOGO

一、CSS3 Opera日志o终效果图enjoy~~

以下效果截图截自Firefox3.6浏览器:

使用CSS3设计Opera浏览器LOGO教程

上图为CSS3实现的效果图,如果您有兴趣可以与正宗的Opera浏览器的标志图做比对。

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

二、LOGO效果的实现

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

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

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

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

①淡阴影

使用CSS3设计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属性,没有之一。

二是色彩的HSLA表示,HSLA也是CSS3中的属性,使用色调,饱和度,亮度以及透明度来表示色彩。按照作者的说法,使用这种色调形式表示色彩,而不是RGBA是,是由于HSLA更方便对色彩进行微调。

②深色阴影

在上面的色彩的较淡的阴影上再覆盖一个更深一点的阴影,结果如下:

使用CSS3设计Opera浏览器LOGO教程

此处的相应的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设计Opera浏览器LOGO教程

相应的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)效果》其中对不同的浏览器怎么应用渐变效果做了相当详细的介绍,您有兴趣可以去看看。

④高亮

高亮图层就是比边缘图层尺寸略小的渐变跨度更大更淡的渐变层。高亮层的覆盖使得背景的深色渐变只透出一点较深的边缘。如下图所示:

使用CSS3设计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;

⑤填充


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1599.html转载请标明出处,谢谢合作!
标签:
  • 我们
  • logo
  • CSS3OperaLOG
  • 一期