25个高级CSS技巧教程

能用CSS实现的效果，就尽量不要使用JS。但如果使用CSS需要很繁琐的代码，那用CSS也不见得是好事儿。这里是25个高级CSS技巧，有助于你提高你的CSS水平，让你对CSS的掌握更上一个台阶。这些技巧并不一定每个都实用，但重要的是去学习了解到这个CSS方法。

1. CSS文字渐变和背景渐变

使用纯CSS实现的背景渐变

使用CSS和背景图片结合的C渐变

CSS渐变文本特效

纯CSS 文本特效

2. Z-Index 图像重叠

Understading Z-Index

CSS Z-index

3. CSS 边框创意

Create a Scalable Star using using CSS border

Border Slants

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

Dashboard

5. 纯 CSS 创建 2D/3D 按钮

3D Rollover Button using CSS

How to make sexy buttons with CSS

CSS rollover buttons

6. 使用CSS实现的文本凹凸和阴影特效

view plaincopy to clipboardprint?

Text Embossing

CSS Text Drop Shadows

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

7. 使用CSS实现的图标文本链接

Add icon to the hyperlink.

Iconize Textlinks with CSS

8. CSS 卷曲引用特效

Curly Quotes with Pure CSS

Swooshy Curly Quotes Without Images

9. 使用CSS透明实现的各种特效

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. 模糊的背景效果

how to create a blurry background using CSS

11. CSS 错觉特效

Examples of and How to Create the CSS Parallax Effect

A parallax illusion with CSS: The Horse in Motion

12. 纯CSS实现的Lightbox灯箱特效

technique

13.纯CSS的手风琴特效

create Accordion using CSS

14. 使用CSS实现Grunge风格文本

tutorial

15. 让块级元素实现hover效果

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

CSS element hover effect.

16. 使用CSS实现的抖动特效

dither effect using

17. CSS创建的Dock菜单

Horizontal Menus That Grow on You

18. CSS 悬浮交换特效

CSS swap hover effect

19. 使用CSS实现的Polaroid特效

Polaroid-izing photos with CSS and one Image.

20. CSS 杂志效果

Create a Magazine Type layout Using CSS

21. CSS “悬浮盒”菜单

cool CSS Menu

22.CSS 标签切换

Create a Tabbed content.

23.利用背景图像固定属性实现的CSS Magic特效

shows a trick that reveals a magic

24. CSS 信息提示

Show a message when hovering over the links.

25. 纯 CSS 预加载效果

Add a “loading” icon to your larger images

via booto

来源于 25个高级CSS技巧教程 | 帕兰映像