Discover the “Cool” of CSS: 25 Advanced CSS Techniques

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 than 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

CSS Gradient Generator

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

How about Gradient Text ?

CSS Gradient Text

2. Image Overlay Using Z-Index

z-index image overlay

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 Border Creatively

CSS Border

CSS Star

4. A Cool CSS Effect – Dashboard

CSS OSX Dashboard

5. Creating 2D/3D buttons using CSS

css_button css_button2

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

CSS text emboss

[sourcecode language="css"] 1. text-shadow: 0px 1px 0px #e5e5ee; [/sourcecode]

7. Iconize Text links/Hyperlink with CSS


CSS icon Text

8. CSS Curly Quotes

CSS Quotes

9. Using CSS Opacity for Various Cool Effects

CSS Opacity Menu

CSS Watermark

10. Blurry Background Effect

CSS Blurry Background Effect

11. CSS Parallax Effect

CSS Parallax

12. Create a Lightbox effect only with CSS

CSS Lightbox

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

13. CSS-Only Accordion Effect

css accordian

14. Add grunge Effect to Text Using Simple CSS

CSS Grunge

  • 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

CSS Block Hover

16. Simple Dither Effect using CSS

CSS Dither

17. Create a  liDock Menu

CSS Dock Menu

18. CSS Hover Swap Effect

CSS Hover Swap

19. Polaroid effect using CSS

CSS Polaroid

20. CSS Magazine Style Layout

CSS magazine layout

21. CSS Hoverbox Menu

Hoverbox

22. CSS TABS – CSS Only “DOM TABS”

CSS only tabs

23. CSS Magic with Fixed Background-attachment

css magic

24. CSS tooltips

CSS Tooltips

25. Pure CSS Preloader

CSS Loader


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • Matthew

    I like this alot. Especially the CSS tooltips.

  • jamjam

    super cool! XD no need to add images to the site.

    • test

      Nice!

  • http://www.springerwebsitedesign.co.uk Mike

    Thanks for sharing these great effects I will definatly be using some of these in my next designs.

  • Kawsar Ali

    @Violet: Emboss effect is basically done by using text shadow. so the background color has to be right.

  • http://www.aunkor.com/ Violet

    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. ;_;