精選30個優秀的CSS技術和實例

8 十一月

1. Hoverbox圖片集

一個純淨的基於CSS的圖片集,鼠標懸停縮略圖就會顯示放大效果。

CSS-實例

 

2. 高級CSS菜單

一款很有創意且複雜的CSS導航方案。

CSS-實例

3. 滑動影集

手風琴效果的影集,懸停便可拉伸圖片。

CSS-實例

4. Lightbox幻燈片

題為” Supercharge your image borders “的文章中的一部分展示瞭如何使用CSS樣式讓圖片變得更有意思。

CSS-實例

5. 圖片的陰影效果

在A List Apart上的一個關於圖片效果Demo的討論文章” CSS Drop shadows “.

CSS-實例

6. 跨瀏覽器多頁式影集

懸停標籤改變分類,懸停縮略圖顯示放大圖。

CSS-實例

7. CSS照片放大

使用簡單的圖片和background-position屬性來進行調解。

CSS-實例

8. CSS gallery layout—smells like a table

模仿表格佈局,但使用的是列表。圖集是流式寬度。

CSS-實例

9. Sticky Footer

僅使用了很少XHTML的靜態頁腳。

CSS-實例

10. whatever: hover

模仿Windows開始菜單的CSS導航菜單。

CSS-實例

11. 純CSS手風琴效果

使用div和:hover偽類的手風琴效果,這個效果可以垂直顯示也可以水平顯示。

CSS-實例

12. 使用PNG和背景色的可擴展按鈕

CSS-實例

13. Pushbutton Links

鏈接在不使用圖片的情況下看起來​​像個按鈕。

CSS-實例

14. 含固定Header的可捲動表格

表格的標題被固定的優秀長表格。

CSS-實例

15. CSS內容遮蓋

當你懸停在圖片上時,div容器會顯示更多文字。

CSS-實例

16. CSS樣式表格版本2

一個使用背景圖片且非常漂亮,被語義化標記的表格。

CSS-實例

17. PNG遮蓋

另一種為圖片添加圓角的方法。(圓角、邊框、陰影)

CSS-實例

18. 利用CSS為超鏈接添加提示

關於為不同類型的鏈接添加圖標的簡單教程。

CSS-實例

19. 簡單的CSS圓角邊框

僅適用了一張圖片和很少的幾行代碼及標記。

CSS-實例

20. Sitemap Celebration

使用嵌套列表的樹形導航,很適合網站地圖頁面。

CSS-實例

21. 簡單的跨瀏覽器幻燈片

不使用JavaScript實現透明度技巧(但是以不符合XHTML驗證為代價)

CSS-實例

22. 圓角2

流式跨度和高度的圓角div。

CSS-實例

23. 使用背景圖片百分比來創建圖表

條線圖使用列表<li>。

CSS-實例

24. CSS柱狀圖:實例

3款柱狀圖實例:使用div和列表標籤的”基本CSS柱狀圖”、”複雜CSS柱狀圖”、”垂直CSS柱狀圖”。

CSS-實例

25. 動態翻轉簡單頭

箭頭會平滑的跟隨鼠標移動,沒有使用一丁點JavaScript和gif動畫。

CSS-實例

26. 基於CSS的表單模板

CSS-實例

27. CSS圖片文本結合技巧

使用了空白div來讓文本能圍繞背景圖中的圖像顯示。

CSS-實例

28. 使用CSS實現淡入效果的圖片

這個實例使用透明度設置和簡單的圖片逐漸在文字上方淡入圖片。

CSS-實例

29. 純CSS彈出效果

一個在IE5(Mac)上也能正常工作的彈出技巧。

CSS-實例

30. 使用CSS實現文本漸變效果

使用背景圖片遮蓋,和一個空的span標籤,還有position: absolute聲明來實現文本的漸變效果。

CSS-實例

==================================================

原載: 彬Go
本文鏈接: http://blog.bingo929.com/30-css-tec-examples.html

 

 

 

 

 

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: