當今時代發展非常快，尤其是互聯網，早在幾年前爆出的HTML5現已被應用廣泛，那麼是不是公司、網站LOGO都能用HTML5實現呢？今天logofree君就

一、號外號外

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

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

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

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

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

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

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

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

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

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

就實現而言，使用了不少的CSS3的東東，主要用來實現旋轉效果。然後，元素很瘋狂地使用絕對元素定位。然後，一點一點，就成了。因為使用了CSS3，所以，在IE瀏覽器下，此logo嚴重毀容，見下圖（截自IE7瀏覽器）：

所以，您需要移步現代瀏覽器查看效果，如果要按照效果給各個瀏覽器排名的話應該是：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呢？放心，當今有現成的

閱讀更多 logofree 的文章

關鍵字: 爆出 HTML5 Flash