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