30 Exceptional CSS Techniques and Examples

Apr 25 2008 by Jacob Gube | 83 Comments

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.

MikeCherim.com - 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.

Snook.ca -  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.

83 Comments

Ben

April 25th, 2008

great list! thanks!

Jess

April 25th, 2008

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

April 25th, 2008

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

Guy R Cook

April 25th, 2008

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

Elijah

April 25th, 2008

Thanks for the post, I could use some of these

Michael

April 25th, 2008

Thanks. Great list. Bookmarked it.

//Michael.

Tom Steenhuysen

April 25th, 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.

Ray

April 25th, 2008

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

BeyondRandom

April 25th, 2008

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

Chad

April 25th, 2008

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

April 25th, 2008

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

tgpo

April 25th, 2008

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

Opps.

Real Estate Blogs : REBlogGirl

April 25th, 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

April 26th, 2008

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

Adobe

April 26th, 2008

great list..

James

April 26th, 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.

liam

April 26th, 2008

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

Jacob Gube

April 26th, 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 2.0.0.14 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!

Best,
Jacob

Marco

April 26th, 2008

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

Keep on bloggin,,,

Abbas

April 26th, 2008

Very useful Indeed will use some of them in future.

5tein

April 26th, 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 (http://tinyurl.com/4pj7h8). 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

April 26th, 2008

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

amy

April 26th, 2008

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

April 27th, 2008

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

Raam Dev

April 27th, 2008

Excellent list! Thanks!

GreenT

April 27th, 2008

This is what I looking for.cool!

Mental Mindfield

April 28th, 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

April 28th, 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

April 29th, 2008

wow……. very neat

thanks for the list.

Ben Griffiths

May 1st, 2008

Thanks, thats a great list!

Daniel Anderson

May 1st, 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.

Cheers

alexandra

May 4th, 2008

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

Maarten

May 9th, 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 9th, 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 9th, 2008

Nice list! A must try!

mohan

May 10th, 2008

nice article yar iam learning css …thank u

Welcome to Paradise

May 12th, 2008

Nice compilation of CSS techniques. really cool.

pramendra

May 15th, 2008

great links and info

petnos

May 30th, 2008

these are great. thanks for all.

Praveen Nair

June 5th, 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.

cheers
nair

Masim man

June 10th, 2008

I found something here that I have never seen before.

Thanks for sharing…

dc

June 12th, 2008

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

Madhav Tripathi

June 16th, 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

June 16th, 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 ;)

Cheers

temizlik şirketleri

June 21st, 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

June 29th, 2008

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

css map

August 12th, 2008

CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

muckoda

August 25th, 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

October 13th, 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: http://www.webdesignerwall.com/demo/advanced-css-menu/.

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!

Dizi

October 19th, 2008

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

jon

November 3rd, 2008

please add this new css gallery site

http://www.csshook.com

Kathi

February 10th, 2009

Massive thanks!

white_zol

February 18th, 2009

wow this is nice.. keep it up dude

Josh Tam

February 24th, 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!

Stu

March 16th, 2009

Thanks for this, some inspiring ideas.

kapush

March 18th, 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

March 24th, 2009

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

Thanx

Thanx -a -lot

rodi

September 20th, 2009

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

best regards
aloha
rodi

Robert

October 4th, 2009

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

Mars

October 14th, 2009

Very useful CSS examples. thinks!

Atasozleri

January 2nd, 2010

Thank you, wonderful examples. You are perfect.

nikhil

January 12th, 2010

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

Wilfo

March 19th, 2010

NIce collection , i really like alot.

Thanks for sharing them.

ByteofK

March 30th, 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

April 9th, 2010

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

iddaa

May 26th, 2010

I found something here that I have never seen before.

Thanks for sharing…

iddaa

May 27th, 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

June 7th, 2010

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

oto ilan

June 8th, 2010

thanks for share. i will shared face

fireRoxy

June 16th, 2010

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

gagan

December 18th, 2010

Thanks for the useful information

Mel

January 9th, 2011

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

rozi

January 24th, 2011

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

Turanian

February 4th, 2011

Great thanks for this brilliant CSS examples…:)

Good works

Don

March 7th, 2011

Many Thanks!!! Cool CSS examples.

Ashish

March 29th, 2011

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

Sandeshaya

April 2nd, 2011

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

Shae

April 13th, 2011

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

Hell Bent CSS/!!

April 15th, 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

Ryan

September 27th, 2011

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

maestro

October 8th, 2012

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

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences.

Mobify