我的家園

一、號(hào)外號(hào)外

號(hào)外號(hào)外，HTML官方logo華麗麗滴誕生了。您可以起官方logo頁(yè)面（點(diǎn)擊這里）其觀摩。

它是如此的閃耀，以至于我不得不用手擋住眼前的強(qiáng)光，它的朝氣，它的魄力迎面襲來(lái)，讓人窒息。

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

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

下圖為標(biāo)準(zhǔn)256*256 背景索引透明陽(yáng)剛少年版：

HTML5出了此款logo，意義重大。我覺(jué)得這標(biāo)志著HTML5已經(jīng)發(fā)展到了一個(gè)新的臺(tái)階，其發(fā)展與進(jìn)步一不可阻擋，透出了HTML5的野心與霸氣。

此logo長(zhǎng)得有點(diǎn)360安全衛(wèi)士logo的味道：

難道暗含防御之一，抵御flash或是其他雜碎技術(shù)的侵襲。誰(shuí)知道呢？反正與本文主題無(wú)關(guān)，愿者自答了。

二、使用純粹的CSS實(shí)現(xiàn)此logo

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

想看效果？您可以狠狠地點(diǎn)擊這里：用CSS實(shí)現(xiàn)HTML5的新logo demo

就實(shí)現(xiàn)而言，使用了不少的CSS3的東東，主要用來(lái)實(shí)現(xiàn)旋轉(zhuǎn)效果。然后，元素很瘋狂地使用絕對(duì)元素定位。然后，一點(diǎn)一點(diǎn)，就成了。因?yàn)槭褂昧薈SS3，所以，在IE瀏覽器下，此logo嚴(yán)重毀容，見(jiàn)下圖（截自IE7瀏覽器）：

所以，您需要移步現(xiàn)代瀏覽器查看效果，如果要按照效果給各個(gè)瀏覽器排名的話應(yīng)該是：Chrome ≈ Safari > FireFox > Opera

此logo效果使用CSS3的內(nèi)容大致就是這些：

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

的說(shuō)。其中-ms-前綴，我常戲稱的“貓屎”前綴，是針對(duì)IE9瀏覽器的。畢竟國(guó)外瀏覽器比咋們要領(lǐng)先不少，我到現(xiàn)在還沒(méi)有拉過(guò)IE9的小手呢！

本文就是個(gè)簡(jiǎn)單的展示，頗多的CSS代碼量以及漫天飛雪的絕對(duì)定位使得此效果基本上在實(shí)際項(xiàng)目中沒(méi)有什么應(yīng)用的前景，所以，懶得多說(shuō)，還是留點(diǎn)時(shí)間看日劇《ady 最后的犯罪畫(huà)像》吧，大愛(ài)北川景子。所以，就這些。

參涉頁(yè)面：
http://www.w3.org/html/logo/
CSS3 in HTML5? HTML5 in CSS3!
HTML5 and the New W3C-Endorsed Logo