25个CSS教程

1. CSS Gradient Text and Background

CSS Gradients using pure CSS
Background gradients and CSS

CSS Gradient Text Effect
Pure CSS Text Gradient

2.Image Overlay Using Z-Index

Understading Z-Index
CSS Z-index

3. Using the CSS Boder Creatively

Create a Scalable Star using using CSS border
Border Slants

4. A Cool CSS Effect – Dashboard

Dashboard

5. Creating 2D/3D buttons using CSS

3D Rollover Button using CSS
How to make sexy buttons with CSS
CSS rollover buttons

6. Text Embossing/Shadow Technique With CSS

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

7. Iconize Text links/Hyperlink with CSS

Add icon to the hyperlink.
Iconize Textlinks with CSS

8. CSS Curly Quotes

Curly Quotes with Pure CSS
Swooshy Curly Quotes Without Images

9. Using CSS Opacity for Various Cool Effects

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

how to create a blurry background using CSS

11. CSS Parallax Effect

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

technique

13.CSS-Only Accordion Effect

create Accordion using CSS

14. Add grunge Effect to Text Using Simple CSS

tutorial

15.Create a Block Hover /Element Hover Effect

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

16. Simple Dither Effect using CSS

dither effect using

17. Create a liDock Menu

Horizontal Menus That Grow on You

18. CSS Hover Swap Effect

CSS swap hover effect

19. Polaroid effect using CSS

Polaroid-izing photos with CSS and one Image.

 

20. CSS Magazine Style Layout



Create a Magazine Type layout Using CSS

21. CSS Hoverbox Menu

cool CSS Menu

22.CSS TABS – CSS Only “DOM TABS”



Create a Tabbed content.

23.CSS Magic with Fixed Background-attachment



shows a trick that reveals a magic

24.CSS tooltips



Show a message when hovering over the links.

25. Pure CSS Preloader



Add a “loading” icon to your larger images

转自：http://www.booto.net/?p=2367#_

15个Mootools插件推荐
http://www.booto.net/?p=2364
10款对设计者有用的MooTools实例
http://cssrainbow.cn/tutorials/mootools/787.html
mootools 实例：
http://demos111.mootools.net/
mootools学习教程：
http://www.cnblogs.com/ziyiFly/tag/mootools/
jquery撕页效果：
http://elliottkember.com/sexy_curls.html