教你使用純CSS設計HTML5新LOGO

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

當今時代發展非常快,尤其是互聯網,早在幾年前爆出的HTML5現已被應用廣泛,那么是不是公司、網站LOGO都能用HTML5實現呢?今天logofree君就教你使用純CSS設計HTML5LOGO


一、號外號外


其實也不是什么號外了,HTML官方logo早在幾年前就華麗麗滴誕生了。您可以到官方logo頁面其觀摩。

它是如此的閃耀,以至于我不得不用手擋住眼前的強光,它的朝氣,它的魄力迎面襲來,讓人窒息。

HTML5新LOGO

上圖為截圖,截圖也是圖。下圖為其128卡哇伊袖珍版圖片:

HTML5128卡哇伊袖珍版LOGO

下圖為256蓬勃朝氣青少年版的:

256蓬勃朝氣青少年版HTML5標志

下圖為標準256*256 背景索引透明陽剛少年版:

HTML5256*256 背景索引透明陽剛少年版LOGO

HTML5出了此款logo,意義重大。我覺得這標志著HTML5已經發展到了一個新的臺階,其發展與進步一不可阻擋,透出了HTML5的野心與霸氣。

此logo長得有點360安全衛士logo的味道:

360安全衛士LOGO

難道暗含防御之一,抵御flash或是其他雜碎技術的侵襲。誰知道呢?反正與本文主題無關,愿者自答了。


二、使用純粹的CSS設計實現此logo


你不得不佩服某些人,總是喜歡樂此不疲地嘗試新技術,做些新玩意。比如說Eric,這回,就在HTML5 logo出來不久,其就用比周冬雨還有純潔的CSS惟妙惟肖地刻畫了HTML的新logo。

就實現而言,使用了不少的CSS3的東東,參考abc360少兒英語標志,主要用來實現旋轉效果。然后,元素很瘋狂地使用絕對元素定位。然后,一點一點,就成了。因為使用了CSS3,所以,在IE瀏覽器下,此logo嚴重毀容,見下圖(截自IE7瀏覽器):

IE7中的純CSS3 HTML5標志

所以,您需要移步現代瀏覽器查看效果,如果要按照效果給各個瀏覽器排名的話應該是:Chrome ≈ Safari > FireFox > Opera

此logo效果使用CSS3的內容大致就是這些:


-webkit-transform: skewX(-5deg);

-moz-transform: skewX(-5deg);

-o-transform: skewX(-5deg);

-ms-transform: skewX(-5deg);

transform: skewX(-5deg);

-webkit-transform-origin: 100% 0;

-moz-transform-origin: 100% 0;

-o-transform-origin: 100% 0;

-ms-transform-origin: 100% 0;

transform-origin: 100% 0;


其中-ms-前綴,我常戲稱的“貓屎”前綴,是針對IE9瀏覽器的。畢竟國外瀏覽器比咋們要領先不少,我到現在還沒有拉過IE9的小手呢!

本文就是個簡單的展示,頗多的CSS代碼量以及漫天飛雪的絕對定位使得此效果基本上在實際項目中沒有什么應用的前景,所以,懶得多說,還是留點時間讓你動手去試吧。當然現在這時代已不需要用CSS去實現設計這樣的LOGO,當今有更高級的技術,那就是SVG,用SVG生成的LOGO是矢量源文件,體積小,清晰,應用更廣泛,公司LOGO設計都用SVG格式了。有些人可能會說,我不會寫代碼啊,怎么用SVG設計LOGO呢?放心,當今有現成的LOGO在線設計生成器如logofree,分分鐘就幫你生成SVG格式的LOGO,非常方便,話不多說,去試試吧。

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