<noscript id="piuzy"></noscript>

    <track id="piuzy"><tbody id="piuzy"></tbody></track>
  1. 用CSS3和HTML5五步打造便簽效果

    網(wǎng)頁設(shè)計(jì) / 2012-05-08 18:48:00

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

    演示 下載

    第一步:HTML和基本的方形

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

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

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

    CSS代碼很簡(jiǎn)單就把便簽背景色變成黃色:

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

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

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

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

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

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

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

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


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

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

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

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

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

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

    好在每一個(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),在該屬性前面添加支持該效果的瀏覽器前綴:

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

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

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

    每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ī)傾斜效果如下:

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

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

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

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

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

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

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

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

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

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

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

    Step 5:Coloured and smoothly zooming sticky notes

    總結(jié)

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

    訂閱號(hào)

    上饒幫

    服務(wù)號(hào)

    獵人傳媒

    欧美成人顶级AⅤ少妇,亚洲伊人成综合人影视,国产成人亚洲综合一级黄色毛片,人妻少妇不满足中文字幕 在线亚洲欧美日韩中文字幕一区 国产成人久久综合一区
    <noscript id="piuzy"></noscript>

      <track id="piuzy"><tbody id="piuzy"></tbody></track>