Smashing Magazine
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
Vitaly Friedman, editor-in-chief of Smashing Magazine, an online magazine dedicated to designers and developers.
- 345 Comments
- 251
- 252
May 20th, 2008 11:05 amGreat and excellent article it’s realy helpful. Thanks again.
- 253May 22nd, 2008 1:56 pm
Tons of resources here. Thanks!!
- 254May 28th, 2008 11:25 pm
Thx a lot for another great resource. I am again surprised how much benefit a webdesigner can get out ouf your magazine.
- 255May 30th, 2008 3:51 am
it’s really a great stuff !
- 256June 3rd, 2008 12:48 am
Thanks for very interesting article. I really enjoyed reading all of your articles. Keep up the good work. See You
- 257June 9th, 2008 1:54 am
wow ! … i think i will have to brush up my skills … thnx
- 258June 14th, 2008 4:01 am
very useful tricks! Thank you! but in CSS I prefer to use as little pics as design can.
- 259June 17th, 2008 1:18 am
cool techniques . Keep up the good work.
- 260July 2nd, 2008 11:32 pm
This list is orgasmic. Bookmarking in every single social bookmarking service I have an account with. I cannot afford to lose this!!
- 261July 10th, 2008 11:55 am
Good TEchniques!
- 262July 18th, 2008 10:04 am
Great list, but I’d like to see some better examples of some table-based forms as well. Not everyone wants to spend 3 weeks styling a “pure” css form with multiple columns.
- 263July 23rd, 2008 6:37 am
excellent collection!
- 264July 29th, 2008 3:24 am
I Will use this in my website.
- 265August 1st, 2008 6:32 am
great source!
- 266August 18th, 2008 1:11 am
Great work! the 300+ responses says it all!
I will be back for more….
Thank you.
- 267August 18th, 2008 10:29 pm
You definitely put a lot of work into collecting a bunch of tutorials. There is a ridiculous amount of “wow” commenting here and at the risk of getting lost in the mix I really have to stress that everyone starts moving towards some web standards and check out the jQuery library.
- 268September 8th, 2008 3:30 pm
Great list… i’ll bookmark your site… thanks
- 269September 9th, 2008 6:52 pm
it ‘s powerfull!
Thank you so much! - 270September 16th, 2008 3:26 pm
thank you so much 2!aa
- 271September 25th, 2008 12:39 pm
Considering alot of these use and NEED Javascript, i wouldn’t call them CSS Techniques… CSS is just handy to manipulate via JS but these are not a OUT of the Box working tricks of pure CSS, they just plain need JS to work, but still handy to have that option.
- 272October 4th, 2008 5:37 am
Thank You
- 273October 6th, 2008 11:09 pm
really is tremendous work in css i was so excitted to learn css really
really really really thanks… - 274October 7th, 2008 11:56 am
:O
mega list :)
juz wiem co bede siekal przez kilka dni :D
- 275October 8th, 2008 1:18 am
Thanks so much
- 276October 13th, 2008 4:46 am
Wonderful !
- 277October 22nd, 2008 4:18 am
Wow what a fantastic inventory, you’ll be saving me a shed load of time, much appreciated!
- 278October 29th, 2008 11:21 pm
wow !!
great !!
thank U !!
gogo~book mark~
——–in korean
와우 !!
멋져요!!
고마워요!!
북마크 고고씽~ - 279November 1st, 2008 9:26 am
really awesome work……. a good collection of work. i have made use of lot of technique given here to create my personal page with admiring styles. thanks to all the persons behind this collection……
- 280November 5th, 2008 12:43 am
Excellent collection of CSS. Its helps me a lot in knowing more about CSS. I hope for more collections in future.
In the end, Great Job!!!!! - 281November 7th, 2008 2:57 am
Great list! Very interesting things.
Thank you very much for this great work!!!
- 282November 7th, 2008 7:47 am
Excellent list, very helpful for me. Many CSS techniques were unknown for me and will surely help me on some future projects! :)
- 283November 18th, 2008 10:25 pm
Gr8 work indeed..
Cool CSS tricks & Nice techniques…. right here!!!అదిరింది గురూ!
(in telugu) - 284November 20th, 2008 5:09 am
its great work……………
can i have a code of this?????
its really excellent…….. great!!!!!!!!!!! - 285December 4th, 2008 11:21 pm
really very helpful tutorial
- 286December 9th, 2008 12:05 am
Its very great work.
can i have a code of this samples????? - 287December 11th, 2008 6:28 pm
great collection, thanks…
- 288December 14th, 2008 11:12 pm
nice
- 289December 16th, 2008 9:19 am
I’m the #1000 comment!
- 290December 18th, 2008 8:06 pm
really fantastic….and usefull…thanks for this
- 291December 26th, 2008 2:33 am
YOU ! ARE ! AWSOME ! THANKS !
- 292December 29th, 2008 2:44 am
This very wonderful tutorial.
- 293December 30th, 2008 5:25 am
impressive.
- 294January 2nd, 2009 7:27 pm
Awesome list! I didn’t even know you could do some of this stuff with CSS!
- 295January 3rd, 2009 7:35 am
Finally a useful article with useful information!! Thanks :-)
- 296January 12th, 2009 3:50 am
That’s wat i’m talking about , Smashing , Just one word
Awesome
Thanks , we need alot of this cool posts - 297January 12th, 2009 4:11 am
Finally, someone who puts all the knowledge in one place.
i My self am a web designer for some time now (Since 1999) and i wanted to launch a page like that for CSS a long time ago, but i became lazy.
Thumbs up, really good job, just keep it posted. - 298January 18th, 2009 2:41 am
Fantastic!
- 299January 18th, 2009 9:41 pm
Really great.Thanks a lot. We needed them so much.
- 300February 2nd, 2009 11:29 am
Thank you!! Great list to keep as a reference.
- 301February 3rd, 2009 8:09 am
great lists ! got some new tricks even .. thanks for sharing …
- 302February 4th, 2009 12:32 am
Excellent list..
- 303March 4th, 2009 8:26 am
Great list to keep as a reference.
- 304April 6th, 2009 12:33 am
Still a great list! Where’s the “even more CSS techniques” :)
- 305April 13th, 2009 3:17 am
no.1000
very nice and useful list. thx
- 306April 21st, 2009 7:50 am
nice tutorial :)
- 307April 25th, 2009 6:28 am
Great !! Thanks !
- 308April 29th, 2009 9:26 am
gracias ^^
thanks - 309June 17th, 2009 4:03 am
Great Article …….. Thanks a lot
- 310June 27th, 2009 10:12 pm
thank you! this is exactly what i needed!
- 311July 11th, 2009 3:42 am
lot of thanks for these usefull informations!!!
- 312July 20th, 2009 4:36 pm
love this! nice compilation… really helpful… thanks so much… :)
- 313July 22nd, 2009 12:09 am
That’s cool!
- 314August 8th, 2009 10:27 am
Great compilation of CSS Tecnhiques
- 315August 24th, 2009 4:52 am
really nice techniques
thanks - 316August 28th, 2009 6:55 am
Great list, very helpful, thanks a lot!
- 317September 14th, 2009 1:58 am
it’s just great collection of CSS , Wonderfull i was not knowing many of thsi tecniques can u provides sources for all
Moinuddin
KSA - 318September 22nd, 2009 5:59 am
The 19th technique (CSS Image Preloader) dont work and will not work. If you repeat an antribute in CSS, it will every time take just the last one…
- 319September 24th, 2009 3:38 pm
The link to number 37 is: http://www.barenakedapp.com/the-design/displaying-percentages. Check it out and leave your thanks on the thread.
- 320October 29th, 2009 8:03 am
Nice list, looks like the one i’m using :-) good post
- 321November 1st, 2009 7:48 am
Great list! Lots of useful info here.
- 322November 8th, 2009 4:31 am
I likes to farts while traveling 40 mph.
- 323November 17th, 2009 9:09 am
Hi, nice post, very usefull!
There are some links are broken, or dont exists anymore:
I don’t look to everyone, but these are some of them:- 12. How to Create a Block Hover… Correct link is: http://www.smileycat.com/miaow/archives/000230.php
- 29. CSS-Submit Buttons: http://www.ukthoughts.co.uk/journal/css-submit-buttons - 324November 18th, 2009 11:06 pm
tanx for techniques…these are very useful to me…:D
- 325November 18th, 2009 11:07 pm
tanx for techniques…these are very useful to me…:D
- 326December 23rd, 2009 11:33 pm
Great list. tons of thanks
- 327December 24th, 2009 10:53 am
hi mate,
Great effort to put up an article. Your doing it not well at all. Some of the sample u showed, need javaxcript to run. So this should be call css and javascript techniques.
- 328January 9th, 2010 8:19 pm
This is a great list. Can you add “sticky footer” to this list?
- 329January 25th, 2010 10:57 am
Wow, thas very wonderful, i trying to learn css, that example, will help me.
- 330February 2nd, 2010 6:54 am
What can I say about this great work !!! … superb … absolutely superb
- 331February 11th, 2010 2:42 am
This are great techniques . Keep up the good work. & thanks for sharing
- 332February 17th, 2010 6:13 am
Thanks!!!!!!!!!
- 333February 20th, 2010 8:50 pm
Nice links very useful for designers. please inform to me any new updates are added.
- 334February 22nd, 2010 4:03 am
I will use some of this tips on my site atestatinfo.ro
- 335March 22nd, 2010 11:50 pm
Nice collection.
Useful for designers. - 336March 30th, 2010 10:15 pm
Hi!
number 37 subject “Displaying Percentages with CSS” I could not understand it :( - 337April 2nd, 2010 3:08 am
wow.. amazing, thanks a lot
- 338May 5th, 2010 10:46 pm
very very very very veryyyyyyyyyyyyyyyyy thanks
- 339May 11th, 2010 5:34 am
Simply amazing and awesome!
- 340May 24th, 2010 12:19 am
Thx a lot for another great resource. I am again surprised how much benefit a webdesigner can get out ouf your magazine.
- 341June 15th, 2010 12:59 am
nice…………..
- 342July 2nd, 2010 2:58 am
hi technical guides yours new tips and new creative designs are very good and excellent css optimizing tips.
- 343July 13th, 2010 8:16 am
good one… great
- 344July 14th, 2010 5:27 am
useful resource. I bookmarked it
- 345July 14th, 2010 4:23 pm
very nice collection, i add some others recently i´ve posted on my website if you want a deep study check it out, its on spanish btw
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
- 10 Useful USB Thumb Drive Tricks - http://bit.ly/bUtuYc
- @kassy4 oh good good, you know how I respect your hard work and your efforts, Kat, didn't mean to sound harsh or something.
- @kassy4 dear Kat, sorry if my e-mail was disappointing... I didn't mean to upset you or something.
- The Three Key Elements ofIrresistible Email Subject Lines - http://bit.ly/aHN3wN
- Don’t Reduce Your Audience To A Stereotype - http://bit.ly/cc3yiS
- RT @abraham: Sometimes I write a letter on paper with a pen then burn it laughing about how Google must be crying over information it wi ...
- @jongold no, it's not :-)
- @collis it sounds exciting :-) We at Smashing should do it, too ;-)
- Try the “four minutes in the morning” routine with your significant other. It’ll pay many dividends. - http://bit.ly/bndnnE
- iCandies Icon Set: 60 Free Icons For Your User Interfaces and Apps - http://bit.ly/bRNdjB (please RT)
I am about to embark on a CSS learning curve of excellence thanks to this list!