DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 收集國外網站的25個CSS高級教程
收集國外網站的25個CSS高級教程
編輯:CSS進階教程     

如果你對 CSS 的掌握已經到了一定的貫通程度,那麼你手中的 CSS 將會為你做很多高級的功能,甚至有時候 CSS 可以幫助解決之前靠 JS 才能解決的問題, 要知道,在 Web 開發過程中, 減少一段 JS 可是對 Web 的運行有足夠大的減壓作用的。25個 CSS 高級教程,讓你更了解 CSS。

1. 純 CSS 字體漸變和背景漸變

css_gradient

CSS Gradients using pure CSS

Background gradients and CSS

gradient_text

CSS Gradient Text Effect

Pure CSS Text Gradient

2. Z-Index 圖像重疊

z-index

Understading Z-Index

CSS Z-index

3. CSS 邊框創意

border

Create a Scalable Star using using CSS border

Border Slants

4. 超酷 CSS 效果 - 控制面板

osx

Dashboard

5. 純 CSS 創建 2D/3D 按鈕

css_button

3D Rollover Button using CSS

How to make sexy buttons with CSS

CSS rollover buttons

6. Text Embossing/Shadow Technique With CSS

CSS_emboss

view plaincopy to clipboardprint?

Text Embossing

CSS Text Drop Shadows

   1. text-shadow: 0px 1px 0px #e5e5ee;

7. Iconize Text links/Hyperlink with CSS

icon_text

Add icon to the hyperlink.

Iconize Textlinks with CSS

8. CSS Curly Quotes

qoutes

Curly Quotes with Pure CSS

Swooshy Curly Quotes Without Images

9. Using CSS Opacity for Various Cool Effects

css_opacity_menu

A CSS only fly-out menu with transparency

CSS Menu using CSS opacity property

Opacity Background Blending Effects

Transparency Menu Watermark on an image

10. Blurry Background Effect

blurry_bg

how to create a blurry background using CSS

11. CSS Parallax Effect

parallax

Examples of and How to Create the CSS Parallax Effect

A parallax illusion with CSS: The Horse in Motion

12.Create a Lightbox effect only with CSS

css_lightbox

technique

13.CSS-Only Accordion Effect

css_accordian

create Accordion using CSS

14. Add grunge Effect to Text Using Simple CSS

grunge1

tutorial

15.Create a Block Hover /Element Hover Effect

block_hover

Learn how to create a block hover effect for a list of links

CSS element hover effect.

16. Simple Dither Effect using CSS

dither

dither effect using

17. Create a liDock Menu

css_dock

Horizontal Menus That Grow on You

18. CSS Hover Swap Effect

hover_swap

CSS swap hover effect

19. Polaroid effect using CSS

polaroid-css

    Polaroid-izing photos with CSS and one Image.

     

    20. CSS 雜志

    magazine

    Create a Magazine Type layout Using CSS

    21. CSS Hoverbox Menu

    Hoverbox

    cool CSS Menu

    22.CSS 標簽切換

    css_tab

    Create a Tabbed content.

    23.CSS Magic with Fixed Background-attachment

    css_magic

    shows a trick that reveals a magic

    24. CSS 信息提示

    tool_tips

    Show a message when hovering over the links.

    25. 純 CSS 預加載效果

    css_loader

    Add a “loading” icon to your larger images

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved