|
精選30個優(yōu)秀的CSS技術(shù)和實(shí)例
474個讀者 簡介 今天,我為大家收集精選了30個使用純CSS完成的強(qiáng)大實(shí)踐的優(yōu)秀CSS技術(shù)和實(shí)例,您將在這里發(fā)現(xiàn)很多與眾不同的技術(shù),比如:圖片集、陰影效果、可擴(kuò)展按鈕、菜單等…這些實(shí)例都是使用純CSS和HTML實(shí)現(xiàn)的。
今天,我為大家收集精選了30個使用純CSS完成的強(qiáng)大實(shí)踐的優(yōu)秀CSS技術(shù)和實(shí)例,您將在這里發(fā)現(xiàn)很多與眾不同的技術(shù),比如:圖片集、陰影效果、可擴(kuò)展按鈕、菜單等…這些實(shí)例都是使用純CSS和HTML實(shí)現(xiàn)的。 單擊每個實(shí)例的標(biāo)題可以被轉(zhuǎn)向到該技術(shù)實(shí)例的相關(guān)教程或說明頁面,單擊每個實(shí)例的圖片截圖可以直接跳轉(zhuǎn)到相應(yīng)實(shí)例的Demo頁面。 譯者注:您還可以參考以下CSS技巧相關(guān)教程&資源: 《精選15個國外CSS框架》
1.Hoverbox 圖片集一個純凈的基于CSS的圖片集,鼠標(biāo)懸??s略圖就會顯示放大效果。
2.高級CSS菜單一款很有創(chuàng)意且復(fù)雜的CSS導(dǎo)航方案。 3.滑動影集手風(fēng)琴效果的影集,懸停便可拉伸圖片。 4.Lightbox幻燈片題為”Supercharge your image borders“的文章中的一部分展示了如何使用CSS樣式讓圖片變得更有意思。 5.圖片的陰影效果在A List Apart上的一個關(guān)于圖片效果Demo的討論文章“CSS Drop shadows“. 6.跨瀏覽器多頁式影集懸停標(biāo)簽改變分類,懸??s略圖顯示放大圖。 7.CSS照片放大使用簡單的圖片和background-position屬性來進(jìn)行調(diào)解。 8.CSS gallery layout—smells like a table模仿表格布局,但使用的是列表。圖集是流式寬度。 9.Sticky Footer僅使用了很少XHTML的靜態(tài)頁腳。
10.whatever: hover模仿Windows開始菜單的CSS導(dǎo)航菜單。 11.純CSS手風(fēng)琴效果使用div和:hover偽類的手風(fēng)琴效果,這個效果可以垂直顯示也可以水平顯示。 12.使用PNG和背景色的可擴(kuò)展按鈕13.Pushbutton Links鏈接在不使用圖片的情況下看起來像個按鈕。 14.含固定Header的可卷動表格表格的標(biāo)題被固定的優(yōu)秀長表格。 15.CSS內(nèi)容遮蓋當(dāng)你懸停在圖片上時,div容器會顯示更多文字。 16.CSS樣式表格版本2一個使用背景圖片且非常漂亮,被語義化標(biāo)記的表格。 17.PNG遮蓋另一種為圖片添加圓角的方法。(圓角、邊框、陰影) 18.利用CSS為超鏈接添加提示關(guān)于為不同類型的鏈接添加圖標(biāo)的簡單教程。 19.簡單的CSS圓角邊框僅適用了一張圖片和很少的幾行代碼及標(biāo)記。 20.Sitemap Celebration使用嵌套列表的樹形導(dǎo)航,很適合網(wǎng)站地圖頁面。 21.簡單的跨瀏覽器幻燈片不使用JavaScript實(shí)現(xiàn)透明度技巧(但是以不符合XHTML驗(yàn)證為代價(jià)) 22.圓角2流式跨度和高度的圓角div。 23.使用背景圖片百分比來創(chuàng)建圖表條線圖使用列表<li>。 24.CSS柱狀圖:實(shí)例3款柱狀圖實(shí)例:使用div和列表標(biāo)簽的”基本CSS柱狀圖”、”復(fù)雜CSS柱狀圖”、”垂直CSS柱狀圖”。 25.動態(tài)翻轉(zhuǎn)簡單頭箭頭會平滑的跟隨鼠標(biāo)移動,沒有使用一丁點(diǎn)JavaScript和gif動畫。 26.基于CSS的表單模板27.CSS圖片文本結(jié)合技巧使用了空白div來讓文本能圍繞背景圖中的圖像顯示。 28.使用CSS實(shí)現(xiàn)淡入效果的圖片這個實(shí)例使用透明度設(shè)置和簡單的圖片逐漸在文字上方淡入圖片。 29.純CSS彈出效果一個在IE5(Mac)上也能正常工作的彈出技巧。 30.使用CSS實(shí)現(xiàn)文本漸變效果使用背景圖片遮蓋,和一個空的span標(biāo)簽,還有position: absolute聲明來實(shí)現(xiàn)文本的漸變效果。 英文原文:30 Exceptional CSS Techniques and Examples |
|
|