30 Exceptional CSS Techniques and Examples

In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more – all using only CSS and HTML.

Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation.

1. Hoverbox Image Gallery

A pure css-based gallery; hovering over an image enlarges it.

Hoverbox Image Gallery

2. Advanced CSS Menu

A creative and complex navigation scheme.

Advanced CSS Menu

3. Sliding Photograph Galleries

An accordion effect; hovering over an image expands it.

Stu Nicholls: CSSplay- Sliding Photograph Galleries

4. Lightbox Slides

Part of an article entitled "Supercharge your image borders" showcasing how you can use CSS styles to make images look more interesting.

Bite Size Standards - Supercharge your image borders

5. Drop shadow on an image

Aan image effect demo and discussion based on a A List Apart article entitled, "CSS Drop shadows".

Drop shadow on an image

6. Cross Browser Multi-Page Photograph Gallery

Hovering over the tabs changes the category, while hovering over an image enlarges it.

Stu Nicholls: CSSplay - Cross Browser Multi Page Photograph Gallery

7. CSS Photo Zoom

Uses a single image and adjustment of the background-position attribute.

SimpleBits - CSS Photo Zoom

8. CSS gallery layout—smells like a table

Mimics a table layout, but uses lists. The gallery is also fluid width.

Dnevnik eklektika - CSS gallery layout—smells like a table

9. Sticky Footer

A static footer with very little XHTML required.

Sticky Footer

10. whatever: hover

A navigation menu that mimics Window’s Start menu.

Peterned - whatever: hover

11. CSS-Only Accordion Effect

An accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.

The CSS-Only Accordion Effect - CSSnewbie

12. Scalable CSS Buttons Using PNG and Background Colors

A technique that addresses vertical scaling, the use of many images, and lack of a hover effect.

Scalable CSS Buttons Using PNG and Background Colors - David’s kitchen

13. Pushbutton Links

links that are styled to look like buttons without using images. - Pushbutton Links

14. Scrollable Table with Fixed Header

The table’s captions stay put which is excellent for long tables.

Scrollable Table with Fixed Header

15. Content Overlay with CSS

When you hover over the image, the container div is shown with more text. -  Content Overlay with CSS

16. A CSS styled table version 2

A beautifully styled, table with semantic mark-up – uses a background image.

A CSS styled table version 2

17. PNG Overlay

Another way to add flare to images (rounds the corners and adds a border and drop shadow).

PNG Overlay

18. Showing Hyperlink Cues with CSS

Simple tutorial on adding icons to different types of links.

Ask the CSS Guy - Showing Hyperlink Cues with CSS

19. Simple Rounded Corner CSS Boxes

Uses only one image and very few lines of code and mark-up.

MODx Content Management System - Simple Rounded Corner CSS Boxes

20. Sitemap Celebration

Tree-like navigation using nested lists, great for sitemap pages.

Zab Design - Sitemap Celebration

21. Easy cross-browser transparency

Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).

Bite Size Standards - Easy cross-browser transparency


22. Curved corners 2

Fluid width and height divs with rounded corners.

HTML Dog - Curved corners 2

23. Creating a graph using percentage background images

List items <li> styled into bar graphs.

Creating a Graph using Percentage Background

24. CSS Bar Graphs: Examples

3 bar graph examples – "Basic CSS Bar Graph", "Complex CSS Bar Graph", and "Vertical CSS Bar Graph" using div’s and definition list tags.

CSS Bar Graphs: Example

25. Animated Rollover Arrow

The arrow follows along the entire width of the navigation bar smoothly, without the use of JavaScript or animated gif’s.

Animated Rollover Arrow

26. A CSS-based Form Template

Showcases an accessible web form.

Nidahas - Forms markup and CSS - Revisite

27. CSS Image Text Wrap

Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.

CSS Image Text Wrap

28. Before your very eyes – a fade-in image

A demo using opacity and a single image that gradually fades in to cover the text.

CSS Play - Before your very eyes - a fade-in image

29. Pure CSS Pop-ups

A pop-up technique that works even in IE 5 Mac.

30. CSS Gradient Text Effect

Uses background image overlays, and empty span tag, and position: absolute to create a gradient effect on text.

This was published on Apr 25, 2008


great list! thanks!

some of these techniques are just silly and impractical for example the CSS Image Text Wrap requires an extreme amount of empty div, bad bad practice imho.

hitesh sahni Apr 25 2008

You have placed all the useful references in one handy article.
Thanks. I have bookmarked it for future reference.

Guy R Cook Apr 25 2008

Thanks for taking the time to build this list, I’ll share this link with other developers.

Elijah Apr 25 2008

Thanks for the post, I could use some of these

Michael Apr 25 2008

Thanks. Great list. Bookmarked it.


Tom Steenhuysen Apr 25 2008

A good list of valuable tips and tricks. The important thing is to not fall victim of doing some things, just because you can, but instead apply these techniques appropriately where they add to the design or functionality of a web design.

I haven’t seen many of these before. Thanks!

BeyondRandom Apr 25 2008

AMAZING LIST! I’m going to need some of these for my new projects!! thanks alot!

I agree with Jess to a point. I think the idea here is to share ideas and possibilities. If web developers never considered these types of techniques, we’d still be in a world wide web full of sites with gray backgrounds :)

Sam Mooney Apr 25 2008

Great list. Thanks for doing the research. And for sharing.

The image for “Scalable CSS Buttons Using PNG and Background Colors” shows the red button with two top left corners.


Real Estate Blogs : REBlogGirl Apr 25 2008

Excellent post. I use many of these but found a few gems in here I have never tried or seen. Thanks for the list and I will certainly refer to it often!

afrodream 'n' beaded sandals Apr 26 2008

i’m learning css. i loved your tutorial and i’m always happy to learn new tricks on css

Adobe Apr 26 2008

great list..

James Apr 26 2008

Some of these are useful. Others perhaps less so.

I mean:

Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).

What’s the real point in that? So few people have JS turned off you might as well use it if the alternative is invalid xhtml.

Fantastic collection, thanks for this, it’s great for future reference.

Jacob Gube Apr 26 2008

Hello everyone,

Thank you for the comments! I’d like to address some of them:

@Jess: This post does not mean to advocate poor practice and non-compliant XHTML, but to inspire you to modify these techniques towards your own practices. A lot of these are “experiments” in CSS.

With the text wrap example, it can be modified to use any HTML objects such unordered/order lists (with display:block; property) with the images sliced up inside them or using image replacement to hide the text and then setting the sliced images as backgrounds. Depending on your application of the technique, this method can be semantic as well.

I do appreciate your comment, and I do encourage discussions in the comment section, and your concerns are truly valid and it’s important that your comment is read by less experienced CSS developers. Thanks Jess!

@Tom Steenhuysen: Perfectly stated. A lot of these techniques are innovative, like the text wrap example, I added it even though I knew it used empty div’s, because not only was it a technique I’ve never thought of before now — but also because I know it can be adapted/evolved into semantic, web-standards valid code.

@tgpo: I scaled the buttons up to a size that very few people would do, and it did break as shown in the screen shot. I took the screen shot using Firefox if anyone’s curious. It seems to be a problem with longer text.

@Chad: Exactly my intention! To inspire, not to provide “copy-and-paste” solutions, and to show that CSS-based solutions are limited only to your imagination.

@James: Great point. I just wanted to show that you can achieve a non-JS based solution to IE’s troubles with PNG’s.

Additionally, I’d like to publicly announce that Six Revisions will be moving web hosts again, to provide less downtime. My current web host performs well under normal load but performs poorly under short-term traffic spikes. Hopefully, this is the last move I will have to do, as I think I’ve found the ultimate solution.

I’d also like to hint on another Six Revisions make-over (Six Revisions v3.0), so stay tuned for further developments!

Thank you all for your participation!


Marco Apr 26 2008

Great round-up! Stumbled here & featured on my website.

Keep on bloggin,,,

Abbas Apr 26 2008

Very useful Indeed will use some of them in future.

5tein Apr 26 2008

I’ve taught nearly all of the good techniques (yes, this could easily be whittled down to 15-20 “good” techniques) shown here in my UVSC Web Design course for a couple of years ( However, some of the applications of these techniques have enlightened me! Like the fixed table header. Of course! Why didn’t I think of that?

Tyler Apr 26 2008

Nice list. The sliding photograph is my personal favorite pretty nice. Dugg.

i used CSS to make some pop-up images on my myspace. i really appreciate those who work so hard at this and share their knowledge with those like me who can use the help!

if you click my name, you’ll see my myspace, if you hover over book titles or whatever- you’ll see what i did.

Gkriv Apr 27 2008

Very useful CSS examples. These techniques extend the use of good design. Keep up the good work.

Raam Dev Apr 27 2008

Excellent list! Thanks!

GreenT Apr 27 2008

This is what I looking!

Mental Mindfield Apr 28 2008

This is a great list. I am interested in using the Site Map Celebration technique. You say that clicking on the title will direct me to the document/tutorial, but instead I am directed to the demo page.

Jacob Gube Apr 28 2008

@Mental Mindfield: For that example, there isn’t a written tutorial. You’ll have to view the page source and study the embedded CSS styles.

To view the page source, in Firefox, right-click on the page and select “View Source” or press “V”.

Designer Apr 29 2008

wow……. very neat

thanks for the list.

Ben Griffiths May 01 2008

Thanks, thats a great list!

Daniel Anderson May 01 2008

Fantastic Resource, Anyone into CSS needs to take a look at these. Have bookmarked quite a few for later consumption.

Thanks for the effort in providing such a list.


alexandra May 04 2008

woww..excellent list!! Thanks a lot. :)

Maarten May 09 2008

Superb list, thanks for putting this together Jacob!

I’m trying to get the sliding photograph galleries to work, but I cant seem to get the ‘showing when no picture is hoovered background picture’ to show. Probably something really stupid, but did anyone try it yet?

Jacob Gube May 09 2008

@Maarten – Thanks for the compliment and I’m glad you tried at least one of the items listed. I tried the Sliding Photographs Galleries, and it worked fine. If you’d like, I can review your stuff to see if we can figure out what went wrong. Check out the Contact page for my contact info.

GLICH May 09 2008

Nice list! A must try!

mohan May 10 2008

nice article yar iam learning css …thank u

Welcome to Paradise May 12 2008

Nice compilation of CSS techniques. really cool.

pramendra May 15 2008

great links and info

petnos May 30 2008

these are great. thanks for all.

Praveen Nair Jun 05 2008

Hello bro,

You simply did a wonderful job. Getting all these techniques and live demo help people to think out of the box. I have bookmarked it and will recommend this site to my colleagues also.


Masim man Jun 10 2008

I found something here that I have never seen before.

Thanks for sharing…

Wow, great collection! Thanks so much! I’ve been looking for something like the static footer and accordion for a while!

Madhav Tripathi Jun 16 2008

Some people read stories, some others spread stories and some write stories and you are third at baseline who write stories, thanks for sharing your stuffs.

Bingo Jun 16 2008

I agree, great list mate! I’m trying to catch up with learning CSS and of course focusing on compliant design/markup. I agree with Tom as well. It’s tempting to want to use [all] of these techniques but they should be to complement a design. Nothing wrong with playing with each though ;)


temizlik şirketleri Jun 21 2008

I agree, great list mate! I’m trying to catch up with learning CSS and of course focusing on compliant design/markup. I agree with Tom as well. It’s tempting to want to use [all] of these techniques but they should be to complement a design. Nothing wrong with playing with each though ;)

Manikandan Jun 29 2008

Very useful things, This is really very usefull for my learning process.

css map Aug 12 2008

CSS “Cascading Style Sheets” Lessons
css list style Properties and examples —

muckoda Aug 25 2008

really amazing and inspiring too.. specailly the fade effect..

kind of work i’ve seen in this particular block is really tricky..

hatsoff to you guys..

Feabionsu Oct 13 2008

For #2, Advanced CSS Menu, when you click on the image, it takes you to the tutorial, like the text link and unlike it’s supposed to show you the demo. Please change it to the actual demo link, so other readers don’t have to go searching for the demo in the tutorial! The link:

P.S. Maybe this already has been mentioned, can’t read through all those comments! :D And love, love your blog by the way, visit it every day and read all the articles!

Wow, great collection! Thanks so much! I’ve been looking for something like the static footer and accordion for a while !

please add this new css gallery site

attlas Nov 11 2008


Kathi Feb 10 2009

Massive thanks!

white_zol Feb 18 2009

wow this is nice.. keep it up dude

boğaz turları Feb 23 2009


Josh Tam Feb 24 2009

Very informative indeed. I have seen several of the mentioned techniques on another website, but then this blog explains them in more detail, with pictures. Thanks!

Thanks for this, some inspiring ideas.

kapush Mar 18 2009

I was searching for precisely these lessons to get my website revamped and running. Thanks a lot. Will post a comment to invite you and see the results once I am done :)

Kapil Waghe Mar 24 2009

I don’t hav words 2 explain how amezing this is.


Thanx -a -lot

wow this is amazing wonderful great great amazing wonderful
i bookmarked and will use and refer for new projects

best regards

Robert Oct 04 2009

Damn, I am so excited for the new HTML and CSS

Very useful CSS examples. thinks!

Atasozleri Jan 02 2010

Thank you, wonderful examples. You are perfect.

nikhil Jan 12 2010

hey its really nice collection…will be very useful for web designer.

Wilfo Mar 19 2010

NIce collection , i really like alot.

Thanks for sharing them.

ByteofK Mar 30 2010

Great article. Some great ideas. BTW, the “flare” you are looking for is “flair”. The one you used is like a torch or a flame, a signal flare.

Sharon Apr 09 2010

Thanks for the useful informationa and sharing will add it to my archives of Css design drives.

iddaa May 26 2010

I found something here that I have never seen before.

Thanks for sharing…

iddaa May 27 2010

really amazing and inspiring too.. specailly the fade effect..

kind of work i’ve seen in this particular block is really tricky..

hatsoff to you guys..

sözlük Jun 07 2010

i’m learning css. i loved your tutorial and i’m always happy to learn new tricks on css

oto ilan Jun 08 2010

thanks for share. i will shared face

fireRoxy Jun 16 2010

i like your articles. very nice css techniques. thanks for sharing.

gagan Dec 18 2010

Thanks for the useful information

I want to learn the Lightbox Slides(no 4). But the article is no longer available. Can anyone explain what is the article about?

cool brother, thanks for sharing, may god bless your life :)

Turanian Feb 04 2011

Great thanks for this brilliant CSS examples…:)

Good works

Many Thanks!!! Cool CSS examples.

Ashish Mar 29 2011

Still love some of them that I used when you wrote this. A big HUG.

Sandeshaya Apr 02 2011

Sticky Footer is excellent example, was looking everywhere thanks again.

Great post. Thanks a lot! I’m looking forward to reading and learning more from you.

Hell Bent CSS/!! Apr 15 2011

You did an okay job showing your new skills. I take my hat off to you for putting it out there on that respect. However many of these items you have posted to be used are outdated. Meaning that they should not be used to gain placement nor customers to ones site. They just bug visitor’s. I have a auto (Hover) on images. The rounded corners on images well that is a trick that no one really cares to see nor notices, along with the shadows. The shadows are more for art sites. The button tricks well use them if you want, They will drive you nut’s. Look at the top 100 site’s, they do not use these css rules at all… It was late 1990 early to mid 2000 when people started to realize that they were tricks and it was easier to have everything in front of them without having to hove or drop a link… Good Luck all!!!!!!!

Hell Bent

Great although some are just impractical to use like the css image text wrap.

maestro Oct 08 2012

cool brother. thanks for sharing, may god bless your life

This comment section is closed. Please contact us if you have important new information about this post.