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.
2. Advanced CSS Menu
A creative and complex navigation scheme.
3. Sliding Photograph Galleries
An accordion effect; hovering over an image expands it.
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.
5. Drop shadow on an image
Aan image effect demo and discussion based on a A List Apart article entitled, "CSS Drop shadows".
6. Cross Browser Multi-Page Photograph Gallery
Hovering over the tabs changes the category, while hovering over an image enlarges it.
7. CSS Photo Zoom
Uses a single image and adjustment of the background-position attribute.
8. CSS gallery layout—smells like a table
Mimics a table layout, but uses lists. The gallery is also fluid width.
9. Sticky Footer
A static footer with very little XHTML required.
10. whatever: hover
A navigation menu that mimics Window’s Start menu.
11. CSS-Only Accordion Effect
An accordion effect using div’s and :hover; the accordion effect can be vertical or horizontal.
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.
13. Pushbutton Links
links that are styled to look like buttons without using images.
14. Scrollable Table with Fixed Header
The table’s captions stay put which is excellent for long tables.
15. Content Overlay with CSS
When you hover over the image, the container div is shown with more text.
16. A CSS styled table version 2
A beautifully styled, table with semantic mark-up - uses a background image.
17. PNG Overlay
Another way to add flare to images (rounds the corners and adds a border and drop shadow).
18. Showing Hyperlink Cues with CSS
Simple tutorial on adding icons to different types of links.
19. Simple Rounded Corner CSS Boxes
Uses only one image and very few lines of code and mark-up.
20. Sitemap Celebration
Tree-like navigation using nested lists, great for sitemap pages.
21. Easy cross-browser transparency
Opacity technique without the use of JavaScript (but at the cost of using non-valid XHTML code).
22. Curved corners 2
Fluid width and height divs with rounded corners.
23. Creating a graph using percentage background images
List items <li> styled into bar graphs.
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.
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.
26. A CSS-based Form Template
Showcases an accessible web form.
27. CSS Image Text Wrap
Using empty spacer div’s, the page’s text mimics a wrapping effect around the background image.
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.
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.
65 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.
Leave a Comment