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