教你使用CSS3設計Opera瀏覽器LOGO

發布時間:2018/09/27 09:39 編輯:logofree標志在線制作

在我們上一期的LOGO設計教程中,我們分享了《教你使用純CSS設計HTML5新LOGO》,之后一發不可收拾,沒想到用CSS還能做標志設計,那么今天我們繼續,logofree君教你使用CSS3設計Opera瀏覽器LOGO


一、CSS3 Opera標志終效果圖enjoy~~


以下效果截圖截自Firefox3.6瀏覽器:

CSS3 Opera標志終效果圖

上圖為CSS3實現的效果圖,如果您有興趣可以與正宗的Opera瀏覽器的logo圖做比對。


您可能是個細心的人,可以看出其中不少差異,但是我確實是沒有看出多少不同來,我只能嘆服CSS的驚人潛力。


二、LOGO效果的實現


一般這類CSS3實現的效果無非那幾個CSS屬性,要么圓角(border-radius),要么漸變(gradient),要么就是盒陰影(box-shadow)。本文的實現也不例外,由于這幾個屬性我之前有過專門的介紹,所以這里不具體敘述,僅提供一些鏈接。


CSS3屬性就像是photoshop中的圖層樣式,僅僅掌握一些圖層樣式效果不一定能夠實現精湛的UI效果,例如,我們還需要知道圖層原理。本文的實例可以說就是圖層與圖層樣式結合的產物,也就是使用photoshop繪圖的過程(說Illustrator的使用更貼切,因為繪出的圖形都是矢量的)。而這里,圖層樣式就是CSS3屬性,圖層就是absolute絕對定位。


換句話說,本文的Opera logo效果,是CSS3+絕對定位實現的。

本實例logo由8個div層絕對定位合成的。現在我們一個一個展示出來(以下截圖均截自Firefox3.6瀏覽器):

①淡陰影


淡陰影

圓角+無距離的盒陰影實現。參見如下代碼:

-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代碼是:


-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)效果》其中對不同的瀏覽器如何應用漸變效果做了相當詳細的介紹,您有興趣可以去看看。


④高亮


高亮圖層就是比邊緣圖層尺寸略小的漸變跨度更大更淡的漸變層。高亮層的覆蓋使得背景的深色漸變只透出一點較深的邊緣。如下圖所示:

高亮

相關的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的效果的主要顏色就是此圖層的顏色,故稱之為填充層。該圖層覆蓋在高亮層上的效果如下圖:

填充

也是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;


⑦內填充


進一步填充,效果見下圖:

內填充

圓角以及漸變相關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屬性未展示。


三、其他的瀏覽器兄弟


二部分所有的效果截圖均來自Firefox3.6瀏覽器,如果您不想麻煩,把demo頁面在一個一個瀏覽器下看效果,您也可以直接看下圖,展示了目前各個瀏覽器下的對此CSS3實現的Opera瀏覽器的logo的支持程度:

CSS3實現的Opera瀏覽器logo兼容性

對于早已讓我讓我無言以對的IE6/IE7/IE8瀏覽器,我就不說什么了。貌似IE9會支持圓角屬性,雖然微軟把IE9說得天花亂墜,但是我是不抱什么大的期待的~~


四、關于一些前端的技術趨勢


從最近國外各大前端技術網站的內容來看,HTML5,CSS3,與SVG必定是趨勢與主流,已經呈現勢不可擋,繁榮昌盛之勢。(關于SVG,可以閱讀這篇文章《解讀公司LOGO為何要用SVG格式》 。拓展問題:51talk英語怎么樣)就國內死水般的現狀而言,感覺又要落后人家好幾年了。此現狀不僅在前端,在交互、在設計都是如此。雖然,交互與設計我不夠專業,但是從騰訊團隊博客所嚼的些有關交互與設計方面的理論都是國外數年前的研究成果來看,滯后于國外是當前中國互聯網行業的普遍現狀(從互聯網產品的內容與盲目借鑒也可見一斑)。


前端領域可以大有作為。多關注HTML5,CSS3,與SVG吧,對于未來的你必定會有受益的。但是,前提是,對于當前的XHTML與CSS2你需要足夠的理解。這是一條艱苦的路程,任重而道遠啊!


隨著這些前端技術的不斷發展,網站元素如網站LOGO、banner等可以縮小到更小的體積,加快網站的加載速度等,我們拭目以待吧。

推薦閱讀
Advert:[left_fixed_adv]
3d太湖钓叟三字诀