你需要了解的21個CSS驚人技巧

8 十一月

1. CSS跨瀏覽器幻燈片

跨瀏覽器CSS幻燈片
點擊上圖查看清晰原圖
演示瞭如何僅適用CSS打造一個跨瀏覽器的圖片畫廊

2. 基於CSS的圖片地圖

CSS-圖片地圖
這個教程演示瞭如何使用純CSS創建一個”瘋狂”的圖片地圖。

3. 純CSS無JavaScript的LightBox

純CSS無JavaScript的LightBox
點擊上圖查看清晰原圖

4. CSS圖片替換技術製作的按鈕

CSS圖片替換技術製作的按鈕
使用CSS將表單提交按鈕替換為圖片,如果禁用CSS將變回普通按鈕。

5. 用CSS實現動畫導航菜單

CSS-導航菜單-動畫

6. 用CSS創建類似樹形導航菜單

CSS-樹形導航

7. CSS漸變文字效果

CSS漸變文字效果

8. CSS目錄菜單設計

CSS-目錄菜單
點擊上圖查看清晰原圖
很容易理解的關於使用CSS border屬性或CSS背景圖屬性實現目錄菜單的教程。

9. 使用CSS負margin創建自適應佈局

CSS負margin創建自適應佈局

10. 使用CSS固定你的頁腳

CSS-固定-頁腳
點擊上圖查看清晰原圖
你也許會遇到這種情況:當你為每個頁面設置相同的頁腳後,有些頁面的主題內容量很少,使得頁腳自動向上移動,看上去的瀏覽器下面很空。這個教程將教你如何使用CSS固定頁腳在頁面底部來解決這個頭疼的問題。

11. 簡單、靈活的CSS麵包屑導航

CSS-麵包屑-導航

12. 為你的博客創建時髦的引用(Pullquotes)

pullquotes-css

13. CSS實現的柱狀圖表

CSS-圖表

14. 如何為鏈接列表創建塊級懸停效果

CSS-技巧

15. CSS多列列表

CSS多列列表

16. 用CSS Sprites技術實現日期顯示

用CSS Sprites技術實現日期顯示

17. 使用CSS美化你的日期和評論

CSS

18. 使用CSS創建圖片瀏覽器

CSS-圖片瀏覽器
點擊上圖查看清晰原圖

19. 創建CSS圖片預載

無需JavaScript,僅使用CSS背景圖屬性實現圖片的預載。

20. 從頁面底部淡出效果

CSS-淡出
點擊上圖查看清晰原圖

21. 創意且很酷的CSS邊框屬性

CSS-Border-屬性

 

 

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

原載: 彬Go ——集前端開發/網頁設計/網站可用性/用戶體驗於一體的趣味互聯網生活
本文鏈接: http://blog.bingo929.com/21-amazing-css-techniques-you -should-know.html

 

 

 

 

廣告

發表迴響

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

WordPress.com Logo

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

Twitter picture

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

Facebook照片

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

Google+ photo

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

連結到 %s

%d 位部落客按了讚: