30 Exceptional CSS Techniques and Examples

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.

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

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

Thanks for the post, I could use some of these

Thanks. Great list. Bookmarked it.

//Michael.

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!

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 :)

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.

Opps.

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!

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

great list..

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.

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

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

Keep on bloggin,,,

Very useful Indeed will use some of them in future.

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?

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.

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

Excellent list! Thanks!

This is what I looking for.cool!

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.

@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”.

wow……. very neat

thanks for the list.

Thanks, thats a great list!

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

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

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?

@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.

Nice list! A must try!

nice article yar iam learning css …thank u

Nice compilation of CSS techniques. really cool.

great links and info

these are great. thanks for all.

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

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!

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.

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

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 ;)

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

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

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

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!

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

http://www.csshook.com

thanks

Massive thanks!

wow this is nice.. keep it up dude

Thanks

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.

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 :)

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

Thanx

Thanx -a -lot

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

best regards
aloha
rodi

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

Very useful CSS examples. thinks！

Thank you, wonderful examples. You are perfect.

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

NIce collection , i really like alot.

Thanks for sharing them.

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.

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

I found something here that I have never seen before.

Thanks for sharing…

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

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

thanks for share. i will shared face

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

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 :)

Great thanks for this brilliant CSS examples…:)

Good works

Many Thanks!!! Cool CSS examples.

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

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.

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.

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