用CSS3和HTML5五步打造便簽效果

在本教程中，你會學(xué)到如何把HTML的列表項(xiàng)（li元素）轉(zhuǎn)換成下圖的“便簽墻”。該效果分5步實(shí)現(xiàn)。內(nèi)核為webkit的Safari和Chrome瀏覽器以及Firefox和Opera中支持該效果，其它瀏覽器不能實(shí)現(xiàn)傾斜和動畫效果（譯者在IE9中進(jìn)行了親測，無法實(shí)現(xiàn)）。

演示 下載

第一步：HTML和基本的方形

我們先從最簡單的，能在所有瀏覽器上正常顯示的便簽做起。 因?yàn)槲覀円�使用HTML5來實(shí)現(xiàn)效果，便簽的HTML內(nèi)容的最外一層是不排序列表，其中包含多個(gè)列表項(xiàng)，每個(gè)列表項(xiàng)中又包含其它元素鏈接：

注意：每個(gè)便簽的內(nèi)容都包括在鏈接元素當(dāng)中（即），同時(shí)通過鍵盤可對其進(jìn)行操作。如果想要對列表項(xiàng)實(shí)現(xiàn)效果，我們需要設(shè)置atabindex屬性，Google字體API找到名為“Reenie Beanie”的字體實(shí)現(xiàn)字體替換。使用API最簡單的辦法就是玩玩Google字體預(yù)覽器：

CSS代碼很簡單就把便簽背景色變成黃色：

重新設(shè)置列表項(xiàng)在瀏覽器中通常顯示的外邊距（margin）和內(nèi)邊距（padding），并去掉它的樣式（list-style:none）（譯者注：即去掉li元素前的圓點(diǎn)，方框等樣式）。

然后設(shè)置UL元素的內(nèi)邊距并隱藏它的溢出屬性overflow，這樣做可以保證稍后為列表項(xiàng)進(jìn)行浮動排列（float）時(shí)，他們不會超出列表，文檔中的下列元素會自動清除浮動。

我們把黃色的矩形整體作為鏈接，并為其設(shè)計(jì)樣式，所有的列表項(xiàng)（即代碼中的li元素）向左浮動（float:left）。最終就是一系列的黃色方框排列成下圖的效果：

這個(gè)排列效果（其實(shí)是float元素的浮動）在包括IE6的所有的瀏覽器中都生效。

第二步：投影效果和草書風(fēng)格字體

現(xiàn)在，為了讓便簽突出顯示，需要給它增添投影效果，然后，使用草書風(fēng)格的字體替換掉之前的內(nèi)容。我們通過

通過該方法，我們得到了一行簡單的HTML代碼，然后將其放到頁面中去。所有瀏覽器都支持這種網(wǎng)絡(luò)替換字體的方式。

然后設(shè)置便簽的內(nèi)邊距（padding），為便簽的文字段落換上最新的字體。注意：為了便于閱讀，Reenie Beanie字體盡量要設(shè)置大一點(diǎn)。

為了讓便簽在頁面中突出顯示，需要為它添加投影，這時(shí)我們要用到框投影（box-shadow）。為了該樣式正確顯示，我們必須為每一個(gè)想要顯示該效果的瀏覽器添加一行代碼（見下面代碼所示）。

好在每一個(gè)瀏覽器所需要的狂投影效果不變，語法也就不變：偏移量，陰影擴(kuò)展量，顏色值。深灰色的不透明度值設(shè)為70%。添加新字體之后的便簽效果如下圖：

第三步：傾斜便簽

聲明：這一步中將要實(shí)現(xiàn)的傾斜效果和下一步的放大效果在Zurb的文章已經(jīng)做過解釋，但是這兩個(gè)效果并不是在所有瀏覽器中都生效，因?yàn)樵趯懩俏恼聲r(shí)，他們并沒有過時(shí)。所以非常感謝他們分享這些技巧。

為了實(shí)現(xiàn)傾斜效果，你需要用到CSS3中的transform當(dāng)中的旋轉(zhuǎn)屬性（transform:rotate），在該屬性前面添加支持該效果的瀏覽器前綴：

所有框都向左傾斜6度（即：rotate（-6deg））。接下來，通過CSS3對中的nth-child屬性對便簽進(jìn)行隨機(jī)傾斜。

 

每2個(gè)框（即當(dāng)前框的數(shù)目為2的倍數(shù)時(shí)）向右傾斜4度，距離頂部的偏移量為5像素（top:5px）。每3個(gè)框（即當(dāng)前框的數(shù)目為3的倍數(shù)時(shí)）向左偏移3度，每5個(gè)框（即當(dāng)前框的數(shù)目為5的倍數(shù)時(shí)）向右傾斜5度，距離底部的偏移量為10像素�？偟膩砜�，便簽的隨機(jī)傾斜效果如下：

第四步：鼠標(biāo)懸停時(shí)，便簽放大

為了讓便簽引人注目，我們使用了加強(qiáng)了的投影效果，并用CSS3為便簽添加了過渡效果。另外，我們需要為每一個(gè)瀏覽器定義過渡效果的scale值：

為確保放大的便簽覆蓋其它的，我們增大了z-index的值（增加到了5）。因?yàn)槲覀優(yōu)樗鼞?yīng)用了：hover和：focus兩個(gè)偽類，也就意味著當(dāng)鼠標(biāo)懸停，或使用鍵盤的tab鍵時(shí)，便簽會產(chǎn)生放大的突出效果：

 第五步：添加平滑過渡效果及顏色

最后一步是做一些小變化，讓放大效果更平滑，更吸引人。我們使用CSS3中的過渡模型（transition）在不同的瀏覽器里實(shí)現(xiàn)這一效果：

從本質(zhì)上講，如果這些元素發(fā)生改變（譯者注：當(dāng)鼠標(biāo)滑過時(shí)），不要馬上切換到我們所定義效果，經(jīng)過0.25秒或1秒的過渡時(shí)間，這樣看起來才自然。另外，我們?yōu)檫@些框進(jìn)行混色添加，每兩個(gè)便簽（ul li:nth-child（even））填充綠色，每三個(gè)便簽（ul li:nth-child（3n））填充淡藍(lán)色：

為了看到不同瀏覽器中所實(shí)現(xiàn)的效果，你最好將最后一個(gè)展示demo放在其它瀏覽器中試一下。

總結(jié)

我們的便簽效果終于完成了，在沒借助任何圖片和JavaScript，我們實(shí)現(xiàn)了便簽的傾斜和平滑動畫效果。不過該效果只支持FireFox，Opera，Safari和Chrome瀏覽器，而老式瀏覽器是不支持傾斜和動畫效果的。在nth-child選擇器和CSS的變形效果，過渡效果幫助下，我們不用腳本同樣達(dá)到了自己想要的效果。此外，Google的網(wǎng)絡(luò)字體API對于自定義字體的使用很簡單。hover和focus兩個(gè)偽類的使用意味著用戶通過鍵盤操作也能看到效果。