Smashing Magazine - we smash you with the information that will make your life easier. really.
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
4. CSS Bar Graphs (CSS For Bar Graphs)
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
19. CSS Image Preloader

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
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
Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.
- 326 Comments
- 251
- 252
May 8th, 2008 9:36 amI am about to embark on a CSS learning curve of excellence thanks to this list!
- 253
May 20th, 2008 11:05 amGreat and excellent article it’s realy helpful. Thanks again.
- 254
May 22nd, 2008 1:56 pmTons of resources here. Thanks!!
- 255
May 28th, 2008 11:25 pmThx a lot for another great resource. I am again surprised how much benefit a webdesigner can get out ouf your magazine.
- 256
May 30th, 2008 3:51 amit’s really a great stuff !
- 257
June 3rd, 2008 12:48 amThanks for very interesting article. I really enjoyed reading all of your articles. Keep up the good work. See You
- 258
June 9th, 2008 1:54 amwow ! … i think i will have to brush up my skills … thnx
- 259
June 14th, 2008 4:01 amvery useful tricks! Thank you! but in CSS I prefer to use as little pics as design can.
- 260
June 17th, 2008 1:18 amcool techniques . Keep up the good work.
- 261
July 2nd, 2008 11:32 pmThis list is orgasmic. Bookmarking in every single social bookmarking service I have an account with. I cannot afford to lose this!!
- 262
July 10th, 2008 11:55 amGood TEchniques!
- 263
July 18th, 2008 10:04 amGreat 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.
- 264
July 23rd, 2008 6:37 amexcellent collection!
- 265
July 29th, 2008 3:24 amI Will use this in my website.
- 266
August 1st, 2008 6:32 amgreat source!
- 267
August 18th, 2008 1:11 amGreat work! the 300+ responses says it all!
I will be back for more….
Thank you.
- 268
August 18th, 2008 10:29 pmYou 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.
- 269
September 8th, 2008 3:30 pmGreat list… i’ll bookmark your site… thanks
- 270
September 9th, 2008 6:52 pmit ’s powerfull!
Thank you so much! - 271
September 16th, 2008 3:26 pmthank you so much 2!aa
- 272
September 25th, 2008 12:39 pmConsidering 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.
- 273
October 4th, 2008 5:37 amThank You
- 274
October 6th, 2008 11:09 pmreally is tremendous work in css i was so excitted to learn css really
really really really thanks… - 275
October 7th, 2008 11:56 am:O
mega list :)
juz wiem co bede siekal przez kilka dni :D
- 276
October 8th, 2008 1:18 amThanks so much
- 277
October 13th, 2008 4:46 amWonderful !
- 278
October 22nd, 2008 4:18 amWow what a fantastic inventory, you’ll be saving me a shed load of time, much appreciated!
- 279
October 29th, 2008 11:21 pmwow !!
great !!
thank U !!
gogo~book mark~
——–in korean
와우 !!
멋져요!!
고마워요!!
북마크 고고씽~ - 280
November 1st, 2008 9:26 amreally 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……
- 281
November 5th, 2008 12:43 amExcellent 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!!!!! - 282
November 7th, 2008 2:57 amGreat list! Very interesting things.
Thank you very much for this great work!!!
- 283
November 7th, 2008 7:47 amExcellent list, very helpful for me. Many CSS techniques were unknown for me and will surely help me on some future projects! :)
- 284
November 18th, 2008 10:25 pmGr8 work indeed..
Cool CSS tricks & Nice techniques…. right here!!!అదిరింది గురూ!
(in telugu) - 285
November 20th, 2008 5:09 amits great work……………
can i have a code of this?????
its really excellent…….. great!!!!!!!!!!! - 286
December 4th, 2008 11:21 pmreally very helpful tutorial
- 287
December 9th, 2008 12:05 amIts very great work.
can i have a code of this samples????? - 288
December 11th, 2008 6:28 pmgreat collection, thanks…
- 289
December 14th, 2008 11:12 pmnice
- 290
December 16th, 2008 9:19 amI’m the #1000 comment!
- 291
December 18th, 2008 8:06 pmreally fantastic….and usefull…thanks for this
- 292
December 26th, 2008 2:33 amYOU ! ARE ! AWSOME ! THANKS !
- 293
December 29th, 2008 2:44 amThis very wonderful tutorial.
- 294
December 30th, 2008 5:25 amimpressive.
- 295
January 2nd, 2009 7:27 pmAwesome list! I didn’t even know you could do some of this stuff with CSS!
- 296
January 3rd, 2009 7:35 amFinally a useful article with useful information!! Thanks :-)
- 297
January 12th, 2009 3:50 amThat’s wat i’m talking about , Smashing , Just one word
Awesome
Thanks , we need alot of this cool posts - 298
January 12th, 2009 4:11 amFinally, 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. - 299
January 18th, 2009 2:41 amFantastic!
- 300
January 18th, 2009 9:41 pmReally great.Thanks a lot. We needed them so much.
- 301
February 2nd, 2009 11:29 amThank you!! Great list to keep as a reference.
- 302
February 3rd, 2009 8:09 amgreat lists ! got some new tricks even .. thanks for sharing …
- 303
February 4th, 2009 12:32 amExcellent list..
- 304
March 4th, 2009 8:26 amGreat list to keep as a reference.
- 305
April 6th, 2009 12:33 amStill a great list! Where’s the “even more CSS techniques” :)
- 306
April 13th, 2009 3:17 amno.1000
very nice and useful list. thx
- 307
April 21st, 2009 7:50 amnice tutorial :)
- 308
April 25th, 2009 6:28 amGreat !! Thanks !
- 309
April 29th, 2009 9:26 amgracias ^^
thanks - 310
June 17th, 2009 4:03 amGreat Article …….. Thanks a lot
- 311
June 27th, 2009 10:12 pmthank you! this is exactly what i needed!
- 312
July 11th, 2009 3:42 amlot of thanks for these usefull informations!!!
- 313
July 20th, 2009 4:36 pmlove this! nice compilation… really helpful… thanks so much… :)
- 314
July 22nd, 2009 12:09 amThat’s cool!
- 315
August 8th, 2009 10:27 amGreat compilation of CSS Tecnhiques
- 316
August 24th, 2009 4:52 amreally nice techniques
thanks - 317
August 28th, 2009 6:55 amGreat list, very helpful, thanks a lot!
- 318
September 14th, 2009 1:58 amit’s just great collection of CSS , Wonderfull i was not knowing many of thsi tecniques can u provides sources for all
Moinuddin
KSA - 319
September 22nd, 2009 5:59 amThe 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…
- 320
September 24th, 2009 3:38 pmThe link to number 37 is: http://www.barenakedapp.com/the-design/displaying-percentages. Check it out and leave your thanks on the thread.
- 321
October 29th, 2009 8:03 amNice list, looks like the one i’m using :-) good post
- 322
November 1st, 2009 7:48 amGreat list! Lots of useful info here.
- 323
November 8th, 2009 4:31 amI likes to farts while traveling 40 mph.
- 324
November 17th, 2009 9:09 amHi, 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:- 4. CSS Bar Graphs: http://www.khmerang.com/index.php?p=118
- 12. How to Create a Block Hover… Correct link is: http://www.smileycat.com/miaow/archives/000230.php
- 14. CSS Diagrams: http://www.surfare.net/~toolman/temp/diagram.html
- 29. CSS-Submit Buttons: http://www.ukthoughts.co.uk/journal/css-submit-buttons - 325
November 18th, 2009 11:06 pmtanx for techniques…these are very useful to me…:D
- 326
November 18th, 2009 11:07 pmtanx for techniques…these are very useful to me…:D
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
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!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- Landing Page Optimization Silver Bullets - http://bit.ly/4GXMHe (via @KISSmetrics)
- 24 Clever Website Designs That Combine jQuery and Illustration - http://bit.ly/61BMDI
- 5 Misuses of Social Media That Could Kill Your Freelance Business - http://bit.ly/5deItH
- CSS Techniques I Wish I Knew When I Started Designing Websites - http://bit.ly/4VPgay
- My Website Design Was Stolen! Now What? - http://bit.ly/5yP6F6
- @Jimbo77 yay! And how are your impressions? :) What do you think of the book? :)



















































(12 votes, average: 4.67 out of 5)
ohh….wonderfull………….