53 CSS-Techniques You Couldn’t Live Without
CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts – and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actually, it is.
Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time – of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites. Links checked: June/11 2008.
You might want to take a look at the article Powerful CSS-Techniques For Effective Coding.
3. CSS Tabs
5. Collapsing Tables: An Example
6. Adam’s Radio & Checkbox Customisation Method
8. CSS Shadows (CSS Shadows Roundup)
9. CSS Rounded Corners Roundup (Nifty Corners)
10. Drop Cap – Capital Letters with CSS
11. Define Image Opacity with CSS
12. How to Create a Block Hover Effect for a List of Links
13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS
14.CSS Diagrams
15. CSS Curves
16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.
17. CSS Image Map
18. CSS Image Pop-Up
20. CSS Image Replacement for Buttons
21. Link Thumbnail
22. CSS Map Pop
23. PHP-based CSS Style Switcher
24. CSS Unordered List Calender (CSS Styled Calender)
25. CSS-Based Forms: Techniques
26. CSS-Based Tables: Techniques
27. Printing Web-Documents and CSS
28. Improved Links-Display for Print-Layouts with CSS
29. CSS-Submit Buttons
30. CSS Teaser Box
31. CSS Tricks for Custom Bullets
33. CSS Zooming
34. Creating a Star Rater using CSS
35. The ways to style visited Links
36. PDF, ZIP, DOC Links Labeling
37. Displaying Percentages with CSS
38. Image Floats without the Text Wrap
39. Let visitors decide, whether or not will they open link in a new window
40. Simple accessible external links
41. Zebra Table with JavaScript and CSS
42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS
44. Image Caption with CSS (Styled Images with Caption)
47. Hierarchical Sitemap with CSS
48. Snook’s Resizable Underlines
49. Switchy McLayout: An Adaptive Layout Technique
50. StyleMap: CSS+HTML Visual Sitemap
J David
January 19th, 2007 10:09 amfantastic list. some of these are techniques that I didn’t know existed but should have been using all along…
sandro
January 19th, 2007 12:40 pmExcellent work! My del.icio.us account just became 10x more valuable to me! Thanks
juixe
January 19th, 2007 1:07 pmWoah, that is a great freaking list!! I now know what I’ll be reading over this weekend.
Marquis
January 19th, 2007 1:47 pmThis is a pretty neat article. I knew about most of these features, but some of the things you are able to do with CSS leave me speechless! Thanks for this article!
Felix
January 19th, 2007 2:10 pmthx for compiling this, it really helps. Lots of the techniques that I didn’t know.
Tommy
January 19th, 2007 2:43 pmGreat list. This site is definately bookmarked on my browser. I can spend hours on end just reading available posts. Very much appreciated.
Faitoo
January 19th, 2007 2:48 pmAwesome. Great Compilation.
Victor
January 19th, 2007 3:43 pmThanx a lot!
Now I know many things about CSS.
tech
January 19th, 2007 4:18 pmwonderful resource for webmasters, thank you the webmaster :)
The Doc
January 19th, 2007 4:28 pmjust great
thx!
stan
January 19th, 2007 4:29 pmnice list- thank you so much for the time invested :)
Tony Narlock
January 19th, 2007 4:41 pmThis is it, this is what people are looking for… Absolutely wonderful — Keep this page up…
Darklight
January 19th, 2007 5:10 pmgreat list, thanks for sharing!
Maurizio
January 19th, 2007 5:11 pmVery cool, and useful, list.
Thank you!
Max Perlov
January 19th, 2007 5:25 pmMay be you should add some samples from
Javascript drag&drop libraries review (http://www.ajaxpath.com/drag-and-drop/), that was also highly valued in Digg and Stumbleupon?
vic
January 19th, 2007 6:16 pmGreat!!
But “47. Hierarchical Sitemap with CSS” link doesn’t work.
Carlos Eduardo
January 19th, 2007 6:20 pmVery, very good list!
It will help us a lot, when we need some particular CSS technique.
Thank you again ;)
marc
January 19th, 2007 6:40 pmGreat collection!
Thanks alot…
Dirk Ginader
January 19th, 2007 7:22 pmTrackback:
Das Smashing Magazine listet die 53 lebenswichtigen CSS-Techniken
Gerade erschien im Smashing Magazine der Artikel 53 CSS-Techniques You Couldn’t Live Without.
Der Artikel stellt eine quasi vollständige Liste aller wichtigen CSS-Techniken der letzten 2 Jahre dar.
Jeder der sich mit CSS beschäftigt sollte meiner Meinung nach
volkan karakus
January 19th, 2007 9:01 pmGreat List! I bookmarked this page on my browser. Thanks for your works!
Sean
January 19th, 2007 9:17 pmThis is a great collection of CSS-related links. Thank you very much!
Nicholas
January 19th, 2007 10:59 pmGreat list! #25 is a broken link.
Jyot
January 19th, 2007 11:07 pmAn awesome collection. Thanks for your hard work. I may have stumbled upon some of these sites on the web but finding everything in one place is great.
Ron
January 19th, 2007 11:09 pmAmazing. Words fail me here; every web designer out there should go through this with a fine-toothed comb.
Jan
January 19th, 2007 11:31 pmI think you could also add my chameleon colors script to this list,
It allows affiliates of a site (or designers) to toggle colors between all hex colors for a given site without changing the images of code.
Ro
January 20th, 2007 12:17 amThis is a very nice list. I don’t do very much css anymore, but this is a reason to get back in their and tinker with things.
r.
Zen
January 20th, 2007 12:34 amAn excellent collection of links.
Thanks!
Jesper Rønn-Jensen
January 20th, 2007 3:41 amThanks a lot. A few new techniques to the collection :)
Valics Lehel
January 20th, 2007 7:54 amIndeed, a NICE list. I think it will be usefull in our projects.
David G. Paul
January 20th, 2007 5:56 pmvery cool
shpyo
January 21st, 2007 5:16 amIt’s soooo k3wl collection!!!!!!!
nnmd
January 21st, 2007 9:23 pmGreat stuff! Trying to realize some of these techniques on my own site.
Matthias Mauch
January 21st, 2007 9:31 pmGreat tips, but the one about the text size switcher isn’t a real css-technique. Does anybody know a sample without Javascript?
Aside from that, the CSS shadow tip is a great simple example which I will use in the next time. Thanks for this short description about CSS shadows.
Jake Rutter
January 21st, 2007 10:24 pmGreat Resources, I love seeing lists like this, Well Done!
TimM
January 22nd, 2007 1:13 amGood list – but you should point out the hidden problem with CSS… every browser does it differently! So we are back to the bad old day of loading up every version of all the latest browsers and trying it out.
Anyway – it would be good to indicate which browsers each of these tips has been tried on (e.g. IE6,7, Firefox 1.5, 2, Opera, MAc etc).
Can’t help but think in the interest of purity we took several steps backward until the industry sorts itself out again. Shame really.
Tim
Chris
January 22nd, 2007 3:33 amAwesome help!
Thanks!
asdf
January 22nd, 2007 5:22 amChrist, is your headline big enough?
Torley
January 22nd, 2007 5:45 amWhat an amazing compilation, with preview images too! Incredible. How much time did you take to do this? In any case, I hope you know it’s certainly worth it — from my eyes, anyhoo! I’ve bookmarked this for future reference. :)
chris
January 22nd, 2007 12:51 pmawesome.
totally awesome.
thats my reading material for the next few weeks sorted then. thanks for such a rich list of quality material!
Sardionerak
January 22nd, 2007 1:12 pmYou are my hero! I am not kidding. This will make my life so much easier, you have no idea! Thank you, thank you, thank you!
Komal
January 22nd, 2007 2:51 pmThis is incredible. I didnt know many of these tehcniques existed. Thanks a ton.
Ramana
January 22nd, 2007 5:38 pmFantastic collection… This is one great list of CSS Wonders… Thanks a lot!!!
Mr Teacher
January 22nd, 2007 6:18 pmReally great list and will help teaching and learning of this area tremendously. Thanks!!
Ross
January 22nd, 2007 6:29 pmGreat list! A few things that I’ve done differently in the past, but will be CSSing in the future.
Ramon Bispo
January 22nd, 2007 8:04 pmWow!! Great list!
daweed
January 22nd, 2007 8:22 pma very interesting article with a good collection of link and démo… thank a lot.
Ali
January 23rd, 2007 4:07 amGreat effects!!
I love them
can i use them in my designs?
devnull_
January 23rd, 2007 4:21 amThis blog is great. Read it every day (or atleast when some new stuff is coming up) and the content rocks!
Please provide more like this.
Cheers.
Stefan
January 23rd, 2007 5:13 amnice collection here … thanks a lot …
Alex
January 23rd, 2007 1:24 pmExcellent. Just need time to apply a few of the listed ideas and techniques to my websites.
Rack Lin
January 23rd, 2007 2:23 pmGreat and Useful!!
CSS + jQuery , it change the way that i design web.
dieter
January 23rd, 2007 8:39 pmGreat reading! Definitely worth a bookmark.
Certainly the calendar as an unordered list was new to me!
Keep up the good work.
Chin Yong
January 23rd, 2007 11:55 pmWow, this is a really great list of CSS tricks. Thanks for the collection.
Ben Strackany
January 24th, 2007 9:19 amKudos, this is really helpful! I can finally make some attractive web sites …
Mark
January 24th, 2007 1:52 pmnice list and documented, thanks for this
Eoin
January 24th, 2007 7:58 pmStumbled on this easier shadow css after reading the two listed above:
Eoin
January 24th, 2007 8:00 pmStumbled on this easier shadow css after reading the two listed above:
img … style = “border: 5px outset; border-left-width: 0px; border-top-width: 0px;
Xplora
January 24th, 2007 8:07 pmGreat reading! Thank you.
And yes, a lot of work to do here for some days.
Keep up the good work in the blog.
loige
January 25th, 2007 6:46 amGreat! I’ll always keep those suggestions in mind :)
Sven Tietje
January 25th, 2007 3:06 pmthanks for this great list!
SvT
January 25th, 2007 5:30 pmThanks!!.. ;)
antsae
January 28th, 2007 1:34 amVery good article that i have posted on my blog. Thanks for the information.
Regards
Finert
January 28th, 2007 2:42 pmit is superb
Sergman -
January 29th, 2007 12:47 amThis is the best list ever. Thank you for helping us.
usuario conocido
January 29th, 2007 9:53 pmThanks, I guess this was the last drop I needed to start building a web site I always dream about.
albertolevin.wordpress.com/
Kent Larsson
January 29th, 2007 10:56 pmSome of the links doesn’t work any more. Could you please look through them and perhaps update if you know where they went. That said. Lots of good information! Many thanks.
Perminder Singh
January 30th, 2007 4:39 pmGood to have goodies… thanks
loige
January 30th, 2007 8:25 pmThe one to style the rating stars is great! ;)
gio
January 31st, 2007 12:44 pmwow, thank you for this very informative CSS tips and tricks. Im bookmarking this site now.
Eliseo
February 2nd, 2007 6:25 pmthanks, thanks, thanks to favorite!!
BillyChow
February 5th, 2007 2:36 pmwhooa!
so cool!
Balakumar Muthu
February 6th, 2007 9:58 pmGREAT list … thanks!
omid jazini
February 7th, 2007 3:27 pmthis is very helpful! thanks
S. Gandhi
February 10th, 2007 3:55 pmExcellent Compilation. Very useful tips all on one page.
vibhash
February 11th, 2007 3:33 amExcillent share…thanks a lot for that post:)
d2s
February 11th, 2007 9:39 pmThanks much for this list. Part of the list was already known to me but it’s always nice to get list with them (and many other interesting techniques).
Shamsath
February 12th, 2007 1:04 amA very useful list!! got to know about things which i never knew before
Bram
February 12th, 2007 2:55 ama true goldmine I struck.
thanks a bunch!
Alfredo
February 13th, 2007 3:32 pmthanks for this. I am actually going to attend a CSS workshop on Feb 25 organized by Benj Arriola.
jojje
February 13th, 2007 8:55 pmFantastic list! Appreciate the effort to compile it. *Bookmarked*
simplytaps
February 14th, 2007 8:04 pmGreat work, now I have a reason to be busy this weekend.
buddy
February 17th, 2007 12:23 amthanks… this information helps beginner like me.
muztagh
February 20th, 2007 4:38 amThank you, it is so useful!
Goran
February 20th, 2007 9:07 pmThanks for all, Greetings from Serbia!
Rodrigo
February 20th, 2007 9:22 pmsimply AWESOME!!!
Congratulations!!
Rodrigo
Andriy A.
February 21st, 2007 7:05 pmAwesome! This is a great list! But I can add some drop down menus to make CSS-Techniques COMPLITE list.
bulmam
February 23rd, 2007 12:19 amI love this list and I agree with your choices !
thank you very much, I have discovered many things !
Sreedhar Vankayala
February 23rd, 2007 8:58 amHi,
I would like to download all these 53 CSS – articles either as HTML, DOC or PDF format.
If anyone has a list or how to do it, let me know and thanks in advance.
Regards,
Sreedhar Vankayala
just4look
February 28th, 2007 10:12 pmIt’s what I am looking for. It’s a marvelous art work.
Abdullah
March 1st, 2007 1:25 pmWow awesome techniques, thanks a lot for compiling such a great list.
DeadLy
March 1st, 2007 9:48 pmPerfectt css sets. Thanks
steffen
March 2nd, 2007 6:26 amgreat list – thanks!
Southafrican
March 9th, 2007 11:41 amLes’t we forget the fine work of Rich Accessible Typography for the Masses, otherwize known as sIFR http://www.mikeindustries.com/sifr/
fandango
March 9th, 2007 8:44 pmVery good tips for all developers.. thank you!
tony
March 18th, 2007 11:20 amawesome
Tommie
March 28th, 2007 3:44 amGreat list, love it!
mahdi
March 29th, 2007 3:52 pmgood job
Kenneth Mark
March 31st, 2007 4:34 pmAmazing collection, definetly a great web resource !
Robert
April 5th, 2007 2:33 amGreat job!
I’m working on a mayor project (something like flickr) and this is very helpful. Whithout this list I would be spendig a lot of time searching for great ideas to implement – now it’s very, very easy and a lot of fun!
Thank you very much :)
DocZayus
April 6th, 2007 12:13 amWOW !!!!
Just “Stumbled” here, and wow !!
this rules!
dennis
April 6th, 2007 11:05 amapt-get install 53css-techniques
Michael Bessolov
April 7th, 2007 12:02 pmJust an amazing collection!
Thank you guys!
Nikolay Kolev
April 10th, 2007 2:57 pmThanks, guys! Hopefully you will periodically update this useful list. Thanks again!
Slave
April 10th, 2007 4:13 pmWow. Just wow! :)
Rhys
April 10th, 2007 4:37 pmThis is going straight to the top of my web design bookmarks list.
Thanks!
dankos
April 10th, 2007 7:27 pmThanks, guys!
but is there any software for create automatic css?
Hiran Chatura
April 11th, 2007 1:19 pmThese css techniques very useful to me. But I couldn’t find exactly what I need. (Grid Scroll Table). If anybody can give me help that will be very very useful to me!!!
Mamoun Rahhal
April 12th, 2007 7:05 pmthank you very much, Nice job, I apreciate that
Hakon Atli Halldorsson
April 15th, 2007 1:15 amWow, awesome job mates :)
Me + You = Babies
AnissaT
April 16th, 2007 4:10 amBless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You Bless You !
This absolutely ROCKS.
buchin
April 21st, 2007 12:20 pmfound this page from stumble upon. great list
Ben
April 22nd, 2007 9:24 amAbsolutely incredible resource. Thanks for making this readily available.
Ali7
April 23rd, 2007 5:17 pmAwesome List !
Richie
May 3rd, 2007 4:56 pmAwesome post!
I have to say this post is very helpful!
Kiaora
May 6th, 2007 9:52 amThe best collection of CSS articles so far…
Many thanks to everyone who posted here their hard work for free, so that all lazy a*sses can take advantage and pretend it’s their own work.
Cheers
Lola K
May 8th, 2007 6:57 pmGreat collection. Thank you for sharing.
lorenza
May 10th, 2007 12:34 amAwesome! This is a great list
lorenza
May 10th, 2007 12:35 amThis is a great list
Christian Pfeil
May 14th, 2007 3:51 pmHi!
Great list! Thank you.
Cheers!
Christian Pfeil
Eric
May 14th, 2007 5:54 pmVery fine. Thanks for the nice tipps.
Marcelo Macedo
May 14th, 2007 10:20 pmAmazing List!
Marcelo Macedo
Brazil
Pogung177
May 19th, 2007 4:52 amvery excelent colection, I’ve implement #9 but it only work for Firefox browser
AL__
May 23rd, 2007 2:25 amLovely to see such a wonderful site. Thank you
Piratex
May 24th, 2007 4:02 amGREAT tips, great thanks !
zubin
May 25th, 2007 4:29 amgreat links….great list….all at one place….!!
Amanda
May 30th, 2007 7:52 amAwesome
this is a great learning experience its opened my eyes with Informative and very useful Resources. Thank you
login
June 5th, 2007 7:25 amSuper site darlings. Thanks awfully
sliming
June 5th, 2007 9:49 pm%-) genuinely interested by this website
Bilaal
June 6th, 2007 8:23 amCoool collection of CSS with v good info Thank You
John
June 9th, 2007 8:50 amThanks for the list, really appreciated
kirn
June 11th, 2007 1:55 amI’m working on a project and this is very helpful. Without this list I would be spendig a lot of time searching for great ideas to implement – now it’s very, very easy and a lot of fun!
Thank you very much :)
aleem
June 12th, 2007 3:12 pmI’ve been searhing for this tecniqes for a long time, at last i found it….I haven’t seen such a amazing list.
thanks for the creators…
Donny
June 14th, 2007 2:02 pmGreat!, most powerful tutorial and tips ever!.
Tiago Floriano
June 17th, 2007 11:18 amvery good! Congratulations!
graham
June 18th, 2007 8:55 pmexcellent resource, thanks!
ramesh
June 20th, 2007 3:03 pmMind blowing…..muahhhhhhhhhhh!!!
skyjuice
June 21st, 2007 2:17 pmi just notice this post T_T its ultra good.
Geoff
June 22nd, 2007 11:54 pmNow im going to have to put my prices up by 25%.
Dam you smashingmagazine!! for letting the cat outta the bag! :)
joking.
Niezły
June 25th, 2007 3:35 pmThis is fantastic! List is simply amazing and i just can’t count how many times it could be useful. THANKS!
Sharon
June 28th, 2007 12:15 amjust smashingmagazine!!!!
giochi strategia
June 28th, 2007 6:53 pmI like your website ,and like to communicate with everyone on this issue!
Veeru
July 2nd, 2007 11:57 amAwesome, nicely done –
This is just so useful to me and i owe you a big thanks.
Thankssssss
Carly
July 11th, 2007 9:48 pmWonderful list thank you checking a few out now, bookmarked for later and might give the list a plug in my blog at some point. Very helpful, Thank you.
ceviri
July 14th, 2007 2:09 amThis is going straight to the top of my web design bookmarks list.
Thank you
matsu
July 18th, 2007 8:43 pmThank you for your summary!!
I was really surprised at current CSS technics!
emlak
July 23rd, 2007 7:31 amCool list! Thanks for creating it…
maddalena
July 24th, 2007 8:26 pmFantastic post, i want use your suggestion for beauty my herboristic site.
Ha ve a nice day
Scott
July 28th, 2007 5:09 amI like the popup realtor image can this be done with frontpage?
Robsuke Daisuke
July 28th, 2007 4:02 pmI can live without these and I prefer to do so – I’m a webdesigner and for that reason I have quite a few different browsers installed for just checking how things work (even three different versions of Internet Explorer even though I run linux – I need them because IE is the most used and it gives the most problems too). I follow the KISS princible (Keep It Simple Stupid), I write clear, simple and 100% correctly validating HTML and CSS code – and yet things often get messed up, mostly with IE but other browsers sometimes have weird problems too. Not one of them follows the standard well enough to work always correctly even when using just simple styling.
I wonder if I launched all my different browsers and checked all these tricks through, how many of them would not have any problems working in all browsers? And how many of them are actually necessary for creating a really nice looking webpage? How many of them are worth of spending time with the complicated code many of them create (CSS gave use the possibility to use really nice styling simply and a way for changing the style of the whole site by editing one file – but what are people using it for? Pull down menus, tabs and other tricks that not only break up with several browsers supporting CSS but may break the usability of the whole site with browsers without CSS support)?
No, this is not clever. I understand from a hackers point of view that these are interesting and certainly have been great fun for someone to implement, but often hackers (including myself) do stuff that should be done because, and only because it’s possible, not because it would actually be usefull.
Leo
July 29th, 2007 2:35 amNice and useful article
Desen
August 1st, 2007 6:18 amAmazing collection, definetly a great web resource ! Keep up the great work!
Roberto
August 5th, 2007 3:08 pmThanks I love seeing our web service show up on Programmable Web. Ever since we decided to launch the web service publicly, I’ve been
Riz Ainuddin
August 8th, 2007 4:44 pmThanks to all the developers for sharing these css tips and tricks.
Alfret
August 10th, 2007 2:15 amThanks for the sweet collections of Css Scripts
Artur
August 12th, 2007 3:42 pmThanks for very interesting article. Can I translate your article into itali and publish at my webblog? I will back here and check your answer.Beautiful I have long been waiting to get something like this on my hands
Marc
August 12th, 2007 10:36 pmReally good hints to nice css techniques, i wish i have found them before i have designed my site…
Chriseo
August 12th, 2007 11:10 pmI’ve tried Dmitri’s xpath solution some years ago, from what I remember it was noticeable problems with perfomance
I’m curious why document.matchAll() returns a StaticNodeList instead of an array of
David
August 14th, 2007 5:48 amThanks for the post! I somehow missed this and wouldn’t have known without your post. I heard about it on boagworld.com’s podcast but I’ve been following your work since the late ’90′s.
Thanks for all your hardwork and your recent book. It’s been a great addition to my library!
neliason
August 15th, 2007 7:26 amThanks for putting together a great collection of really neat techniques.
Dugu Miko
August 16th, 2007 6:12 pmGreat list. Really love some of the points there.
Cchris
August 16th, 2007 9:36 pmAll true and to get links from valued sites in your neighborhood you need great content and link bait such as free tools, advice, etc. However having sang from this hymn book for a long time its very frustrating to see “linked in” “technornati” ‘wikipedia” etc etc showing up in the top results for many searches. What are Google doing. Now what is going to happen everybody is going to start tagging like crazy. Basically they keep devaluing links to sites and replacing them wiht the next craze instead of doign what they tell the rest of us to do which is grow your links in a truly organic way.
David Mailer
September 1st, 2007 7:10 amGreat and useful reading, i have found some new and definitely will add them to the arsenal.
P.S.
Some links does not work anymore.
Christoffer
September 5th, 2007 3:41 pmGreat, great list. I will definetely have use for it. My websites look crap :)
frank
September 7th, 2007 9:10 amvery good job,excellent resource for a lot of people
thx
Munish
September 9th, 2007 10:07 pmGreat Compilation!
Jaideep Walia
September 10th, 2007 2:58 amGreat article. A good resource for many. I have used some of the examples and they have simply enhanced the overall feel of my site.
Thank you again for this great collection
yosax
September 11th, 2007 7:46 pmExcellent tips!
tercüme
September 15th, 2007 5:33 amThanks for very interesting Article.
Dj Tiesto
September 17th, 2007 6:59 pmThank you for your summary!!
I was really surprised at current CSS technics!
NBA
September 17th, 2007 7:00 pmThank you for your summary!!
I was really surprised at current CSS technics!
Alonzo Mourning
September 18th, 2007 10:54 amkeep up the your great work.
thank you.
data
September 21st, 2007 10:36 pmThis is a great collection of CSS-related links. Thank you!
Kredi
September 22nd, 2007 1:42 amGreat tips, but the one about the text size switcher isn’t a real css-technique. Does anybody know a sample without Javascript?
Aside from that, the CSS shadow tip is a great simple example which I will use in the next time. Thanks for this short description about CSS shadows.Great tips, but the one about the text size switcher isn’t a real css-technique. Does anybody know a sample without Javascript?
Aside from that, the CSS shadow tip is a great simple example which I will use in the next time. Thanks for this short description about CSS shadows.aaaaaaa
Jason
September 22nd, 2007 4:19 amThanks so much for this list, some of these are amazing and have really helped, me thanks once again Smashing Magazine!
Zach
September 23rd, 2007 7:04 pmWhat an amazing compilation, with preview images too! Incredible.
I like that…
Murat Dikyol
September 25th, 2007 4:22 amThanks so much for this list, some of these are amazing and have really helped, me thanks once again Smashing Magazine!
Bramus!
September 26th, 2007 4:45 amIn addition to #15: there’s a tool that can automatically generate those floating divs: The Box Office ;)
splinter
September 27th, 2007 5:24 pmThis is a great collection of CSS-related links. Thank you!
Viktor
September 28th, 2007 5:11 amHey, thank you very much now im ready to pimp my own site up :P
Nonda
September 30th, 2007 12:12 amthanks good jop CSS style i thing will be new generation
Aliyev
September 30th, 2007 12:15 amIndeed, a NICE list. I think it will be usefull in our projects
khali
October 3rd, 2007 2:04 amvery very nice listing man . :) I have tried first 2 menus . really nice . THANKS .
db
October 8th, 2007 11:53 amI was searching for some beginner intro into CSS and I found this article. Thanks.
leo
October 9th, 2007 2:28 pmgot to your blog using ccs tutorial, very nice resource.
Korona
October 11th, 2007 5:16 pmCSS is important. And it is being used more and more often.
the design of the whole site and support many function does CSS unchallengeable master for developer internet pages. I regrettably not wit to use CSS and on 50%. Hope that due to you I shall be able to perfect this situation thank you
Elizabeth
October 12th, 2007 12:30 amHi. I found very useful and incredible all the information of this page but i found a problem i insert the code but when i click in the navigation bar i insert it gives me error WHY????????
alex
October 19th, 2007 2:32 amCSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts – and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. Isn’t it great? Well, actualy, it is.
Stanley
October 19th, 2007 4:32 pm@alex
I think also so! I must learn CSS now! :)
david
October 19th, 2007 7:57 pmWhat a great site with all these wonderful blog templates
radikal-rider
October 19th, 2007 8:52 pmAwesome. Thanks.
Best regards.
Perfume
October 22nd, 2007 4:11 amExcellent. Nice to have a comprehensive list in one place.
Pathfinder
October 23rd, 2007 3:14 pmThanks for stuff.I was looking at the material over a large amount of time
J.L. Graham
October 24th, 2007 10:52 amI love the block hover effect. Thanks so much for posting this.
Jess
Nicolaas van den broek
October 25th, 2007 6:24 pmI love u long time
(this is just damn fantastic)
Polin Armsley
October 30th, 2007 3:22 amWell, as I understand it, that makes the HTTP_REFERER approach pretty useless – a pirate isn’t going to send that, so the result will be the same as a firewall blocking that info. It’s really a shame, because otherwise this seemed to be the most elegant approach to this headache!
Mantra Zone
November 1st, 2007 9:09 pmI do understand what you mean, Nicolas
nezh
November 7th, 2007 11:21 pmIt will help us a lot, when we need some particular CSS technique.
Thank you
game
November 10th, 2007 12:36 amI love the block hover effect. Thanks so much for posting this.
Proflogistics
November 22nd, 2007 4:12 pmThanks to all developers who contributed to accessible and usable css-based design over the last few years.
Jeetlo
November 23rd, 2007 6:27 pmNow being a webmaster what I can say about this incredible css help. Just amazing help..!
Tom Gorge
November 24th, 2007 3:19 amThanks so much for putting up this together.
It saves so much time. The best useful tips in once place!
Sac Bakimi
November 25th, 2007 12:58 pmThanks for compiling this awesome list, some of these goodies are gonna be in my site pretty soon!
Philippines
November 29th, 2007 10:50 amGreat compilation of CSS essentials. It does helps a lot to learn the awesome things CSS can do. CSS does beautify the web. It is like icing on a cake. CSS makes website design sweet. Thank you for providing us such valueable information about CSS.
Every
December 8th, 2007 9:31 pmCSS is simple solutioon for your web, especially if you are going to hide any errors i the layout design :)
Oyvind
December 9th, 2007 10:24 amWow, fantastic post and really good for me as I am redesigning my site to a portfolio site :) thanx for the great tips!
Miami Heat
December 11th, 2007 7:42 pmNow being a webmaster what I can say about this incredible css help. Just amazing help…
Andres
December 15th, 2007 12:06 amI thought you would find this useful http://www.cssbuttons.net
mk
December 20th, 2007 4:27 amSmashing list, indeed! Also thanks for all people who added their gems!
Sim Kamsan
December 24th, 2007 12:50 pmWoow! Great Thanks Happy Merry Cristhmas Day.
Felipe Cavalcante
December 24th, 2007 9:37 pmGreat compilation! Thanks for share it!
I suggest to add “pagination” to thist list.
justfragrances
December 27th, 2007 9:09 amThese CSS articels are great, there is so much you can do with CSS other than just text size and fonts. Great article
Avery
December 28th, 2007 10:34 amI love the block hover effect. Thanks so much for posting this.
I will bookmark this page.
Avery
Kevin
December 29th, 2007 7:08 pmAwesome job, learning CSS techniques helps you keep your site looking fresh and new.
KEE
December 30th, 2007 12:29 pmI also want to download some of CSS code
Adam T.
January 4th, 2008 10:42 amGranted, it’s my own dumb fault for following a link to obvious Digg-bait, but as much as this list has a FEW good links, #26 sticks with me as the worst. Have we gone so far down the CSS rabbit hole that we’re forgetting about HTML TABLE elements? Semantic styling dictates that you use the elements that are best suited for the job, and in my opinion, a table is the best way to deliver… a table. You’re doing the Web a disservice when you go outside those lines for general concepts such as this.
Simon Jia
January 4th, 2008 7:10 pmAwesome list. This is will come in real handy. Let’s not brag about the list being not incomplete. Everyone should keep a list of some sort of their own. The point of the post is to present the techniques that are important and handy.
If you feel like there are stuff missing in the list, just share it in your comment.
Mukarram
January 17th, 2008 11:47 pmGreat Info ……
Crazy guru
January 24th, 2008 7:40 pmwoooh!! i found what i need…thanks a lot.
oda kapisi
January 27th, 2008 5:49 amIt does helps a lot to learn the awesome things CSS can do. CSS does beautify the web. It is like icing on a cake. CSS makes website design sweet. Thank you for providing us such valueable information about CSS.
mahesh
January 29th, 2008 2:58 amThank you for sharing such a nice tips!
cecco
January 30th, 2008 5:26 pmThank you, really good job!
Karthic
February 1st, 2008 1:05 amThanks for share, Great.I think think its a great work thanl
Naseer Ahmad Mughal
February 4th, 2008 7:04 amHi there,
I have seen these all and found very very helpful for my development in this direction …. (handling layout with CSS).
I simply say, WELL DONE, and many thanks
Best Regards,
naseer ahmad mughal
Kalyan
February 8th, 2008 6:24 amA good Collection dude………..
Grup Hepsi
February 9th, 2008 6:53 am. CSS does beautify the web. It is like icing on a cake
Kishore
February 11th, 2008 2:42 amAwesome collections dude. Thanks for sharing Gr8 Tips & Tricks. This is very useful for webdesigners.
Lux
February 13th, 2008 9:36 amI stumbled upon this post, and it’s great! Tx
Tyler
February 14th, 2008 8:34 amI don’t care if you guys already have 287 comments on this article – I’m going to leave one more. What an awesome article and thanks for putting all of this together in one place. Adding this to my bookmarks right now!
tercüme
February 21st, 2008 4:29 amThank you
sayamish
February 21st, 2008 8:23 pmfabulous collectiong !!! …keep it on fellow..
Bashkov
February 22nd, 2008 10:39 amThat is absolutely awesome!!! Thanks a LOT!!!
alienado
February 25th, 2008 12:55 pmThank you, you’re the best. I love this website
Web Pixy
February 27th, 2008 3:38 amThank you very much for this awesome post! All of these CSS techniques are very cool and I’m sure they will be useful for every web designer.
Dolapo Taiwo
March 4th, 2008 8:23 amI never thought css could do so much stuff. In fact from what I can see above, a lot of the behaviours in ajax can be replicated in css!
Daniels
March 4th, 2008 3:47 pmAlthough this list is now more than one year old: It’s still interesting and there are still new things to find / explore. Thank you!
Jobst von Heintze
March 5th, 2008 2:51 amGreat list – thank you!
cexut
March 5th, 2008 12:39 pmThank you so much for this list.
Very useful.
iddaa
March 7th, 2008 4:48 amReayly great blog.
Regards
Kevin
March 7th, 2008 10:00 amReally nice article on CSS tips… i am already using couple of them..!!
Jens Meiert
March 12th, 2008 3:23 amI may point to a method that helps judging these techniques [1]. Some are in fact quite good, others might be “worth reconsideration”.
[1] Great CSS Techniques
Peter T
March 13th, 2008 10:53 pmThis website is a great example of web space.
Marge
March 19th, 2008 10:46 pmThe tips are nice, especially the ones for rounded corners. Is there a tutorial that allows CSS to apply rounded corners directly to images? I’ve seen one on the Internet, but it requires Javascript and I would rather avoid that since I’m new to web design.
Master Edge
March 21st, 2008 12:45 pmThanks for such useful post!
dantel
March 21st, 2008 12:56 pmPrinting Web-Documents and CSS it’s good
SHCE
March 25th, 2008 2:56 pmVery nice :) btw very good tips i will use them.
Jorn Mineur
April 1st, 2008 3:41 amThanks, this is a very helpful reference. Allow me to disagree on the importance of some of these techniques:
4. Bar graphs are two-dimensional representations of one-dimensional data. A bar is a line with added but content-empty thickness. A table with labels and numbers is more precise and allows for easier comparison than a bar graph.
5. Collapsing tables must be avoided. Tables are not tools, they represent information. Either the data is important and you show it, or it is not important and you don’t show it.
45. Pie-charts make themselves more important than they are. Representing one-dimensional data in a two-dimensional model doesn’t make the data two-dimensional. Use a table with labels and numbers instead.
Terry
April 4th, 2008 12:17 pmLooking for suggestions on how to present a site makeover to new users. We have a well established site (300k user sessions a month) who I feel might be lost as our new design is significantly different than the current.
Autor
April 18th, 2008 4:19 amI really dont understand, why some people still dont use CSS, but tables. CSS is easier, much more powerfull and much better looking… And your post is another proof :)
John O'Robert
April 28th, 2008 2:46 amWow! Great list! Cool collection – I’m gonna grab me some CSS – Tahnkssssss!!!!!!!!!!!!!!!!!!!!
praveen
May 7th, 2008 10:00 pmohh….wonderfull………….