DIV CSS 佈局教程網

一、號外號外

號外號外，Html官方logo華麗麗滴誕生了。您可以起官方logo頁面（點擊這裡）其觀摩。

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

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

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

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

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

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

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

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

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

想看效果？您可以狠狠地點擊這裡：用CSS實現Html5的新logo demo

就實現而言，使用了不少的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代碼量以及漫天飛雪的絕對定位使得此效果基本上在實際項目中沒有什麼應用的前景，所以，懶得多說，還是留點時間看日劇《ady 最後的犯罪畫像》吧，大愛北川景子。所以，就這些。