Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.  I prefer to use CSS, rather then JavaScript or Jquey, if the same functionality can achieved by CSS because it is most likely that some people might turn off JavaScript in their pages but not CSS. While some web designer might disagree because of CSS’s lack of ability to make the web pages more dynamic I still think CSS is the way to go.

1. CSS Gradient Text and Background

Would not it be much better if you can use gradient background without using any image? It would make your page load faster.

• CSS Gradients using pure CSS
• Background gradients and CSS

How about Gradient Text ?

• CSS Gradient Text Effect
• Pure CSS Text Gradient

2.Image Overlay Using Z-Index

The z-index property sets the stack order of an element. Using z-index  you can put one image or text on top of each other.

• Understading  Z-Index
• CSS Z-index

3. Using the CSS Boder Creatively 

 

• CSS Box Border test : This utility enables the sampling of Cascading Style Sheet (CSS) border styles, and creates the corresponding CSS code for implementation.
• Border-image CSS3 only.
• CSS Side Border Image Using CSS.

• Create a Scalable Star using using CSS border
• Border Slants

4. A Cool CSS Effect – Dashboard

• Create a Dashboard like effect using CSS.

5. Creating 2D/3D buttons using CSS

Create some cool looking buttons using CSS only.

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

6. Text Embossing/Shadow Technique With CSS

Using this technique you can create iPhone like embossed Text

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

• Text Embossing
• CSS Text Drop Shadows

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

• CSS Guru Chris Coyier explains 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

• Here is another useful  technique that is using CSS and a little Javascript to create the lightbox effect.

13.CSS-Only Accordion Effect

• This post explains how to create Accordion using CSS
  

14. Add grunge Effect to Text Using Simple CSS

• In this short tutorial you will see how to add grunge effect to your text using just CSS and one image.

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

• Dezinerfolio shows how to create a dither effect using CSS .

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

• Do you like Polaroid pictures? Well using this technique you can make the pictures on website look like Polaroid.
• Polaroid-izing photos with CSS and one Image.

20. CSS Magazine Style Layout

• Create a Magazine Type layout Using CSS

21. CSS Hoverbox Menu

• A really cool CSS Menu using Images and CSS

22.CSS TABS – CSS Only “DOM TABS”

• Using CSS only Create a Tabbed content. No jquery or Javascript at all.

23.CSS Magic with Fixed Background-attachment

• Ask the CSS Guy shows a trick that reveals a magic as you scroll.

24.CSS tooltips

• Show a message when hovering over the links.

25. Pure CSS Preloader

• Add a “loading” icon to your larger images