hidden

Smashing Magazine

53 CSS-Techniques You Couldn’t Live Without

Advertisement

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.

1. CSS Based Navigation

Css-techniques0000 in 53 CSS-Techniques You Couldnt Live Without

2. Navigation Matrix Reloaded

Css-techniques0001 in 53 CSS-Techniques You Couldnt Live Without

3. CSS Tabs

Css-techniques0002 in 53 CSS-Techniques You Couldnt Live Without

4. CSS For Bar Graphs

Css-techniques0003 in 53 CSS-Techniques You Couldnt Live Without

5. Collapsing Tables: An Example

Css-techniques0004 in 53 CSS-Techniques You Couldnt Live Without

6. Adam’s Radio & Checkbox Customisation Method

Css-techniques0005 in 53 CSS-Techniques You Couldnt Live Without

7. CSS Image Replacement

Css-techniques0006 in 53 CSS-Techniques You Couldnt Live Without

8. CSS Shadows (CSS Shadows Roundup)

Css-techniques0007 in 53 CSS-Techniques You Couldnt Live Without

9. CSS Rounded Corners Roundup (Nifty Corners)

Css-techniques0008 in 53 CSS-Techniques You Couldnt Live Without

10. Drop Cap – Capital Letters with CSS

Css-techniques0009 in 53 CSS-Techniques You Couldnt Live Without

11. Define Image Opacity with CSS

Css-techniques0010 in 53 CSS-Techniques You Couldnt Live Without

12. How to Create a Block Hover Effect for a List of Links

Css-techniques0011 in 53 CSS-Techniques You Couldnt Live Without

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

Css-techniques0012 in 53 CSS-Techniques You Couldnt Live Without

14.CSS Diagrams

Css-techniques0013 in 53 CSS-Techniques You Couldnt Live Without

15. CSS Curves

Css-techniques0014 in 53 CSS-Techniques You Couldnt Live Without

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.

Css-techniques0015 in 53 CSS-Techniques You Couldnt Live Without

17. CSS Image Map

Css-techniques0016 in 53 CSS-Techniques You Couldnt Live Without

18. CSS Image Pop-Up

Css-techniques0017 in 53 CSS-Techniques You Couldnt Live Without

19. CSS Image Preloader


Css-techniques0018 in 53 CSS-Techniques You Couldnt Live Without

20. CSS Image Replacement for Buttons

Css-techniques0019 in 53 CSS-Techniques You Couldnt Live Without

21. Link Thumbnail

Css-techniques0020 in 53 CSS-Techniques You Couldnt Live Without

22. CSS Map Pop

Css-techniques0021 in 53 CSS-Techniques You Couldnt Live Without

23. PHP-based CSS Style Switcher

Css-techniques0022 in 53 CSS-Techniques You Couldnt Live Without

24. CSS Unordered List Calender (CSS Styled Calender)

Css-techniques0023 in 53 CSS-Techniques You Couldnt Live Without

25. CSS-Based Forms: Techniques

Css-techniques0024 in 53 CSS-Techniques You Couldnt Live Without

26. CSS-Based Tables: Techniques

Css-techniques0025 in 53 CSS-Techniques You Couldnt Live Without

27. Printing Web-Documents and CSS

Css-techniques0027 in 53 CSS-Techniques You Couldnt Live Without

28. Improved Links-Display for Print-Layouts with CSS

Css-techniques0026 in 53 CSS-Techniques You Couldnt Live Without

29. CSS-Submit Buttons
Css-techniques0028 in 53 CSS-Techniques You Couldnt Live Without

30. CSS Teaser Box

Css-techniques0029 in 53 CSS-Techniques You Couldnt Live Without

31. CSS Tricks for Custom Bullets

Css-techniques0030 in 53 CSS-Techniques You Couldnt Live Without

32. Ticked Off Links Reloaded

Css-techniques0031 in 53 CSS-Techniques You Couldnt Live Without

33. CSS Zooming

Css-techniques0032 in 53 CSS-Techniques You Couldnt Live Without

34. Creating a Star Rater using CSS

Css-techniques0033 in 53 CSS-Techniques You Couldnt Live Without

35. The ways to style visited Links

Css-techniques0034 in 53 CSS-Techniques You Couldnt Live Without

36. PDF, ZIP, DOC Links Labeling

Css-techniques0035 in 53 CSS-Techniques You Couldnt Live Without

37. Displaying Percentages with CSS


Css-techniques0036 in 53 CSS-Techniques You Couldnt Live Without

38. Image Floats without the Text Wrap

Css-techniques0037 in 53 CSS-Techniques You Couldnt Live Without

39. Let visitors decide, whether or not will they open link in a new window

Css-techniques0038 in 53 CSS-Techniques You Couldnt Live Without

40. Simple accessible external links

Css-techniques0039 in 53 CSS-Techniques You Couldnt Live Without

41. Zebra Table with JavaScript and CSS

Css-techniques0040 in 53 CSS-Techniques You Couldnt Live Without

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

Css-techniques0041 in 53 CSS-Techniques You Couldnt Live Without

43. Unobtrusive Sidenotes

Css-techniques0042 in 53 CSS-Techniques You Couldnt Live Without

44. Image Caption with CSS (Styled Images with Caption)

Css-techniques0043 in 53 CSS-Techniques You Couldnt Live Without

45. Dynamic Piechart with CSS

Css-techniques0044 in 53 CSS-Techniques You Couldnt Live Without

46. Format Footnotes with CSS

Css-techniques0045 in 53 CSS-Techniques You Couldnt Live Without

47. Hierarchical Sitemap with CSS

Css-techniques0046 in 53 CSS-Techniques You Couldnt Live Without

48. Snook’s Resizable Underlines

Css-techniques0047 in 53 CSS-Techniques You Couldnt Live Without

49. Switchy McLayout: An Adaptive Layout Technique

Css-techniques0048 in 53 CSS-Techniques You Couldnt Live Without

50. StyleMap: CSS+HTML Visual Sitemap

Css-techniques0049 in 53 CSS-Techniques You Couldnt Live Without

51. Custom Reading Width

Css-techniques0050 in 53 CSS-Techniques You Couldnt Live Without

52. CSS Alert Message

Css-techniques0051 in 53 CSS-Techniques You Couldnt Live Without

53. CSS Production Notes

Css-techniques0052 in 53 CSS-Techniques You Couldnt Live Without

Vitaly Friedman, editor-in-chief of Smashing Magazine, an online magazine dedicated to designers and developers.

39

Tags: ,

Advertising
  1. 251
    Sarah
    May 8th, 2008 9:36 am

    I am about to embark on a CSS learning curve of excellence thanks to this list!

  2. 252
    bilard
    May 20th, 2008 11:05 am

    Great and excellent article it’s realy helpful. Thanks again.

  3. 253
    sara
    May 22nd, 2008 1:56 pm

    Tons of resources here. Thanks!!

  4. 254
    Roland Schupp
    May 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.

  5. 255
    sachin khobragade
    May 30th, 2008 3:51 am

    it’s really a great stuff !

  6. 256
    Pattern Crochet
    June 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

  7. 257
    Jaspal Singh
    June 9th, 2008 1:54 am

    wow ! … i think i will have to brush up my skills … thnx

  8. 258
    ildvr
    June 14th, 2008 4:01 am

    very useful tricks! Thank you! but in CSS I prefer to use as little pics as design can.

  9. 259
    moovendan
    June 17th, 2008 1:18 am

    cool techniques . Keep up the good work.

  10. 260
    Vera
    July 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!!

  11. 261
    Dimitar
    July 10th, 2008 11:55 am

    Good TEchniques!

  12. 262
    Ivan
    July 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.

  13. 263
    Tilemahos Manolatos
    July 23rd, 2008 6:37 am

    excellent collection!

  14. 264
    rajesh
    July 29th, 2008 3:24 am

    I Will use this in my website.

  15. 265
    wangtao
    August 1st, 2008 6:32 am

    great source!

  16. 266
    Mulli Bahr
    August 18th, 2008 1:11 am

    Great work! the 300+ responses says it all!

    I will be back for more….

    Thank you.

  17. 267
    RegEx
    August 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.

  18. 268
    oaken
    September 8th, 2008 3:30 pm

    Great list… i’ll bookmark your site… thanks

  19. 269
    Hero
    September 9th, 2008 6:52 pm

    it ‘s powerfull!
    Thank you so much!

  20. 270
    Diablo
    September 16th, 2008 3:26 pm

    thank you so much 2!aa

  21. 271
    wtf
    September 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.

  22. 272
    Üzeyir özkol
    October 4th, 2008 5:37 am

    Thank You

  23. 273
    Rahul
    October 6th, 2008 11:09 pm

    really is tremendous work in css i was so excitted to learn css really
    really really really thanks…

  24. 274
    stefan
    October 7th, 2008 11:56 am

    :O

    mega list :)

    juz wiem co bede siekal przez kilka dni :D

  25. 275
    mrRo
    October 8th, 2008 1:18 am

    Thanks so much

  26. 276
    Mauro Castaldi
    October 13th, 2008 4:46 am

    Wonderful !

  27. 277
    Anthony Mark
    October 22nd, 2008 4:18 am

    Wow what a fantastic inventory, you’ll be saving me a shed load of time, much appreciated!

  28. 278
    yubs
    October 29th, 2008 11:21 pm

    wow !!
    great !!
    thank U !!
    gogo~book mark~
    ——–in korean
    와우 !!
    멋져요!!
    고마워요!!
    북마크 고고씽~

  29. 279
    siva
    November 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……

  30. 280
    rohit mehra
    November 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!!!!!

  31. 281
    Ralf Merz
    November 7th, 2008 2:57 am

    Great list! Very interesting things.

    Thank you very much for this great work!!!

  32. 282
    Max
    November 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! :)

  33. 283
    Chary
    November 18th, 2008 10:25 pm

    Gr8 work indeed..
    Cool CSS tricks & Nice techniques…. right here!!!

    అదిరింది గురూ!
    (in telugu)

  34. 284
    Anuradha Joshi
    November 20th, 2008 5:09 am

    its great work……………
    can i have a code of this?????
    its really excellent…….. great!!!!!!!!!!!

  35. 285
    teknoloji
    December 4th, 2008 11:21 pm

    really very helpful tutorial

  36. 286
    kavitha
    December 9th, 2008 12:05 am

    Its very great work.
    can i have a code of this samples?????

  37. 287
    Steve
    December 11th, 2008 6:28 pm

    great collection, thanks…

  38. 288
    francis.augustin
    December 14th, 2008 11:12 pm

    nice

  39. 289
    Daan Walraven
    December 16th, 2008 9:19 am

    I’m the #1000 comment!

  40. 290
    Bibi
    December 18th, 2008 8:06 pm

    really fantastic….and usefull…thanks for this

  41. 291
    ali
    December 26th, 2008 2:33 am

    YOU ! ARE ! AWSOME ! THANKS !

  42. 292
    Jaikumar
    December 29th, 2008 2:44 am

    This very wonderful tutorial.

  43. 293
    plecho
    December 30th, 2008 5:25 am

    impressive.

  44. 294
    Amber Weinberg
    January 2nd, 2009 7:27 pm

    Awesome list! I didn’t even know you could do some of this stuff with CSS!

  45. 295
    Mr. Jones
    January 3rd, 2009 7:35 am

    Finally a useful article with useful information!! Thanks :-)

  46. 296
    eAi-nEt
    January 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

  47. 297
    Ofer
    January 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.

  48. 298
    Daisy
    January 18th, 2009 2:41 am

    Fantastic!

  49. 299
    Javaid
    January 18th, 2009 9:41 pm

    Really great.Thanks a lot. We needed them so much.

  50. 300
    CSD
    February 2nd, 2009 11:29 am

    Thank you!! Great list to keep as a reference.

  51. 301
    saurabh
    February 3rd, 2009 8:09 am

    great lists ! got some new tricks even .. thanks for sharing …

  52. 302
    sourav sen
    February 4th, 2009 12:32 am

    Excellent list..

  53. 303
    strony internetowe wrocław
    March 4th, 2009 8:26 am

    Great list to keep as a reference.

  54. 304
    Me
    April 6th, 2009 12:33 am

    Still a great list! Where’s the “even more CSS techniques” :)

  55. 305
    Manuel
    April 13th, 2009 3:17 am

    no.1000

    very nice and useful list. thx

  56. 306
    strony internetowe
    April 21st, 2009 7:50 am

    nice tutorial :)

  57. 307
    Gemedj89
    April 25th, 2009 6:28 am

    Great !! Thanks !

  58. 308
    paztel
    April 29th, 2009 9:26 am

    gracias ^^
    thanks

  59. 309
    moovi
    June 17th, 2009 4:03 am

    Great Article …….. Thanks a lot

  60. 310
    Armig Esfahani
    June 27th, 2009 10:12 pm

    thank you! this is exactly what i needed!

  61. 311
    NotAlame
    July 11th, 2009 3:42 am

    lot of thanks for these usefull informations!!!

  62. 312
    ardyonline
    July 20th, 2009 4:36 pm

    love this! nice compilation… really helpful… thanks so much… :)

  63. 313
    Balian
    July 22nd, 2009 12:09 am

    That’s cool!

  64. 314
    Brad Sherrill
    August 8th, 2009 10:27 am

    Great compilation of CSS Tecnhiques

  65. 315
    satish Borkar
    August 24th, 2009 4:52 am

    really nice techniques
    thanks

  66. 316
    Ana Astobieta
    August 28th, 2009 6:55 am

    Great list, very helpful, thanks a lot!

  67. 317
    moinuddin
    September 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

  68. 318
    Petr Komárek
    September 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…

  69. 319
    juders
    September 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.

  70. 320
    Xtence
    October 29th, 2009 8:03 am

    Nice list, looks like the one i’m using :-) good post

  71. 321
    Jon
    November 1st, 2009 7:48 am

    Great list! Lots of useful info here.

  72. 322
    barry eagan
    November 8th, 2009 4:31 am

    I likes to farts while traveling 40 mph.

  73. 323
    Andrey Viana
    November 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

  74. 324
    j
    November 18th, 2009 11:06 pm

    tanx for techniques…these are very useful to me…:D

  75. 325
    web assassin
    November 18th, 2009 11:07 pm

    tanx for techniques…these are very useful to me…:D

  76. 326
    Jeevanath
    December 23rd, 2009 11:33 pm

    Great list. tons of thanks

  77. 327
    this is more like a joke
    December 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.

  78. 328
    Sonfishdesign
    January 9th, 2010 8:19 pm

    This is a great list. Can you add “sticky footer” to this list?

  79. 329
    Jose Anibal
    January 25th, 2010 10:57 am

    Wow, thas very wonderful, i trying to learn css, that example, will help me.

  80. 330
    Milind
    February 2nd, 2010 6:54 am

    What can I say about this great work !!! … superb … absolutely superb

  81. 331
    AlMubdi
    February 11th, 2010 2:42 am

    This are great techniques . Keep up the good work. & thanks for sharing

  82. 332
    Markus
    February 17th, 2010 6:13 am

    Thanks!!!!!!!!!

  83. 333
    Madhukar
    February 20th, 2010 8:50 pm

    Nice links very useful for designers. please inform to me any new updates are added.

  84. 334
    Atestate
    February 22nd, 2010 4:03 am

    I will use some of this tips on my site atestatinfo.ro

  85. 335
    balaji
    March 22nd, 2010 11:50 pm

    Nice collection.
    Useful for designers.

  86. 336
    üzeyr özkol
    March 30th, 2010 10:15 pm

    Hi!
    number 37 subject “Displaying Percentages with CSS” I could not understand it :(

  87. 337
    sam
    April 2nd, 2010 3:08 am

    wow.. amazing, thanks a lot

  88. 338
    mohammad
    May 5th, 2010 10:46 pm

    very very very very veryyyyyyyyyyyyyyyyy thanks

  89. 339
    Farghana
    May 11th, 2010 5:34 am

    Simply amazing and awesome!

  90. 340
    rakesh adnal
    May 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.

  91. 341
    samat
    June 15th, 2010 12:59 am

    nice…………..

  92. 342
    mantrla srinivas yadhav
    July 2nd, 2010 2:58 am

    hi technical guides yours new tips and new creative designs are very good and excellent css optimizing tips.

  93. 343
    Reghu
    July 13th, 2010 8:16 am

    good one… great

  94. 344
    sekar
    July 14th, 2010 5:27 am

    useful resource. I bookmarked it

  95. 345
    ivan
    July 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!



Advertisement Advertise with us!
Add this widget to your site!
Visit job board Post your job