精選30個優秀的CSS技術和執行個體

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在網上閑逛的時候，發現了一篇關於介紹css的文章，雖然是翻譯的，但寫的挺好，

今天，我們為大家收集精選了30個使用純CSS完成的強大實踐的優秀CSS技術和執行個體，您將在這裡發現很多與眾不同的技術，比如:圖片集、陰影製作效果、可擴充按鈕、菜單等…這些執行個體都是使用純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導覽功能表。

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聲明來實現文本的漸層效果。