Blurry Background Effect

CSS Guru Chris Coyier explains how to create a blurry background using CSS
CSS Parallax Effect

Examples of and How to Create the CSS Parallax Effect
A parallax illusion with CSS: The Horse in Motion
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.
CSS-Only Accordion Effect

This post explains how to create Accordion using CSS
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
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
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
A Cool CSS Effect Dashboard

Create a Dashboard like effect using CSS.
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
Create a Block Hover /Element Hover Effect

Learn how to create a block hover effect for a list of links
CSS element hover effect.
Simple Dither Effect using CSS

Dezinerfolio shows how to create a dither effect using CSS .
Create a liDock Menu
Horizontal Menus That Grow on You
CSS Hover Swap Effect
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.
CSS Magazine Style Layout

Create a Magazine Type layout Using CSS
CSS Hoverbox Menu

A really cool CSS Menu using Images and CSS
CSS TABS CSS Only DOM TABS

Using CSS only Create a Tabbed content. No jquery or Javascript at all.
CSS Magic with Fixed Background-attachment
Ask the CSS Guy shows a trick that reveals a magic as you scroll.
CSS tooltips

Show a message when hovering over the links.
Pure CSS Preloader
Add a loading icon to your larger images
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
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
Iconize Text links/Hyperlink with CSS
![]()
Add icon to the hyperlink.
Iconize Textlinks with CSS
CSS Curly Quotes

Curly Quotes with Pure CSS
Swooshy Curly Quotes Without Images





















Brett Widmann
These are really useful techniques. Thank you for sharing!
Johnson Mckinnie
Hello, Nice article! This is my first time i visit here. I discovered so numerous fascinating stuff in your blog.