Discover the “Cool” of CSS: 25 Advanced CSS Techniques
Digg 17 
Stumble This
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 ?
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.
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.
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.
6. Text Embossing/Shadow Technique With CSS
Using this technique you can create iPhone like embossed Text
1. text-shadow: 0px 1px 0px #e5e5ee;
7. Iconize Text links/Hyperlink with CSS
8. CSS Curly Quotes
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
16. Simple Dither Effect using CSS
- Dezinerfolio shows how to create a dither effect using CSS .
17. Create a liDock Menu
18. CSS Hover Swap 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
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
25. Pure CSS Preloader
If you enjoyed this post, get free updates by email or RSS.
Tagged: css advanced technique, CSS effect, simple css menu
nice list of css techniques alot of them area really interesting thanks.
thanks for sharing with us such wonderful techniques
Azim´s last blog : Robbing Peter to pay Paul
awesome. thank you.
N-Designs´s last blog : Manny Pacquiao vs Cotto Livefeeds
You and I have been reading and enjoying a lot of the same blog posts, I see! Thanks for adding my post to this great collection.
Simply amazing…never thought all of these were possible with CSS ?? How about browser compatibilty , especially with our old friend IE 6
the best there is…
Good stuff..
Great techniques – thanks!
Great stuff, thanks for the css tips.
Loving Blurry Background Effect so simple but very effective.
Thanks for the knowledge.
Rory Martin’s last blog post..Careers in Web Design – Recruitment
@Cukrzyca i pompa inslinowa: Thanks. Sorry about that. Link is fixed
Great post, and thanks alot for the link to my CSS Parallax article!
Ralph’s last blog post..ForTheLose.org’s Giveaway Extravaganza!
Cool list… Lots ‘o goodies on there.
Vernon’s last blog post..Reading CSV File With CodeIgniter
Hi,
Last tutorial: 25. Pure CSS Preloader is without link, fix it please
Best regards
Rafal
Cukrzyca i pompa inslinowa’s last blog post..Pompa insulinowa będzie finansowana przez NFZ
Great list of resources, thanks for the round up. Definitely bookmarking this list.
@Renato P. dos Santos: @theGweilo-com: Thanks . hope this technique will be helpful
Really cool! Very helpful. I’ll start using some of these features right now. Thank you very much.
Renato P. dos Santos’s last blog post..Siftables – O lego do século 21?
Great stuff! Thanks, it will useful for my site
theGweilo-com’s last blog post..Wide range of Art from Asia
@Violet: Emboss effect is basically done by using text shadow. so the background color has to be right.
Very interesting. Many of these I can’t see using on a day to day basis, but some of them can definitely be used often and for business websites (css tool tip is nice).
It’s just a bummer that the embossing won’t work on anything but Safari. ;_;
Interesting, but I would never use #12 (Create a Lightbox Effect using only CSS) for several reasons.
Firstly, it’s not a pure-CSS technique, as it relies upon (and fails miserably without) JavaScript.
Secondly, even as a JS technique, it’s crap. Here’s Why
Hope this helps.
-stk
PS – Coincidentally, I’ve also authored a pure-CSS tool-tip technique, which your readers may find useful.
pretty nice list, huh, gonna inspire and learn from here after a while
Dainis Graveris’s last blog post..22 Professional WordPress Themes And Resources:Less Is More