Smashing Magazine - we smash you with the information that will make your life easier. really.

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 Bar Graphs (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

Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (12 votes, average: 4.67 out of 5)
Loading ... Loading ...

Tags: ,

Advertising
  1. 251
    praveen
    May 7th, 2008 10:00 pm

    ohh….wonderfull………….

    Reply
  2. 252
    Sarah
    May 8th, 2008 9:36 am

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

    Reply
  3. 253
    bilard
    May 20th, 2008 11:05 am

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

    Reply
  4. 254
    sara
    May 22nd, 2008 1:56 pm

    Tons of resources here. Thanks!!

    Reply
  5. 255
    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.

    Reply
  6. 256
    sachin khobragade
    May 30th, 2008 3:51 am

    it’s really a great stuff !

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

    Reply
  8. 258
    Jaspal Singh
    June 9th, 2008 1:54 am

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

    Reply
  9. 259
    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.

    Reply
  10. 260
    moovendan
    June 17th, 2008 1:18 am

    cool techniques . Keep up the good work.

    Reply
  11. 261
    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!!

    Reply
  12. 262
    Dimitar
    July 10th, 2008 11:55 am

    Good TEchniques!

    Reply
  13. 263
    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.

    Reply
  14. 264
    Tilemahos Manolatos
    July 23rd, 2008 6:37 am

    excellent collection!

    Reply
  15. 265
    rajesh
    July 29th, 2008 3:24 am

    I Will use this in my website.

    Reply
  16. 266
    wangtao
    August 1st, 2008 6:32 am

    great source!

    Reply
  17. 267
    Mulli Bahr
    August 18th, 2008 1:11 am

    Great work! the 300+ responses says it all!

    I will be back for more….

    Thank you.

    Reply
  18. 268
    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.

    Reply
  19. 269
    oaken
    September 8th, 2008 3:30 pm

    Great list… i’ll bookmark your site… thanks

    Reply
  20. 270
    Hero
    September 9th, 2008 6:52 pm

    it ’s powerfull!
    Thank you so much!

    Reply
  21. 271
    Diablo
    September 16th, 2008 3:26 pm

    thank you so much 2!aa

    Reply
  22. 272
    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.

    Reply
  23. 273
    Üzeyir özkol
    October 4th, 2008 5:37 am

    Thank You

    Reply
  24. 274
    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…

    Reply
  25. 275
    stefan
    October 7th, 2008 11:56 am

    :O

    mega list :)

    juz wiem co bede siekal przez kilka dni :D

    Reply
  26. 276
    mrRo
    October 8th, 2008 1:18 am

    Thanks so much

    Reply
  27. 277
    Mauro Castaldi
    October 13th, 2008 4:46 am

    Wonderful !

    Reply
  28. 278
    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!

    Reply
  29. 279
    yubs
    October 29th, 2008 11:21 pm

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

    Reply
  30. 280
    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……

    Reply
  31. 281
    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!!!!!

    Reply
  32. 282
    Ralf Merz
    November 7th, 2008 2:57 am

    Great list! Very interesting things.

    Thank you very much for this great work!!!

    Reply
  33. 283
    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! :)

    Reply
  34. 284
    Chary
    November 18th, 2008 10:25 pm

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

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

    Reply
  35. 285
    Anuradha Joshi
    November 20th, 2008 5:09 am

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

    Reply
  36. 286
    teknoloji
    December 4th, 2008 11:21 pm

    really very helpful tutorial

    Reply
  37. 287
    kavitha
    December 9th, 2008 12:05 am

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

    Reply
  38. 288
    Steve
    December 11th, 2008 6:28 pm

    great collection, thanks…

    Reply
  39. 289
    francis.augustin
    December 14th, 2008 11:12 pm

    nice

    Reply
  40. 290
    Daan Walraven
    December 16th, 2008 9:19 am

    I’m the #1000 comment!

    Reply
  41. 291
    Bibi
    December 18th, 2008 8:06 pm

    really fantastic….and usefull…thanks for this

    Reply
  42. 292
    ali
    December 26th, 2008 2:33 am

    YOU ! ARE ! AWSOME ! THANKS !

    Reply
  43. 293
    Jaikumar
    December 29th, 2008 2:44 am

    This very wonderful tutorial.

    Reply
  44. 294
    plecho
    December 30th, 2008 5:25 am

    impressive.

    Reply
  45. 295
    Amber Weinberg
    January 2nd, 2009 7:27 pm

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

    Reply
  46. 296
    Mr. Jones
    January 3rd, 2009 7:35 am

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

    Reply
  47. 297
    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

    Reply
  48. 298
    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.

    Reply
  49. 299
    Daisy
    January 18th, 2009 2:41 am

    Fantastic!

    Reply
  50. 300
    Javaid
    January 18th, 2009 9:41 pm

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

    Reply
  51. 301
    CSD
    February 2nd, 2009 11:29 am

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

    Reply
  52. 302
    saurabh
    February 3rd, 2009 8:09 am

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

    Reply
  53. 303
    sourav sen
    February 4th, 2009 12:32 am

    Excellent list..

    Reply
  54. 304
    strony internetowe wrocław
    March 4th, 2009 8:26 am

    Great list to keep as a reference.

    Reply
  55. 305
    Me
    April 6th, 2009 12:33 am

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

    Reply
  56. 306
    Manuel
    April 13th, 2009 3:17 am

    no.1000

    very nice and useful list. thx

    Reply
  57. 307
    strony internetowe
    April 21st, 2009 7:50 am

    nice tutorial :)

    Reply
  58. 308
    Gemedj89
    April 25th, 2009 6:28 am

    Great !! Thanks !

    Reply
  59. 309
    paztel
    April 29th, 2009 9:26 am

    gracias ^^
    thanks

    Reply
  60. 310
    moovi
    June 17th, 2009 4:03 am

    Great Article …….. Thanks a lot

    Reply
  61. 311
    Armig Esfahani
    June 27th, 2009 10:12 pm

    thank you! this is exactly what i needed!

    Reply
  62. 312
    NotAlame
    July 11th, 2009 3:42 am

    lot of thanks for these usefull informations!!!

    Reply
  63. 313
    ardyonline
    July 20th, 2009 4:36 pm

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

    Reply
  64. 314
    Balian
    July 22nd, 2009 12:09 am

    That’s cool!

    Reply
  65. 315
    Brad Sherrill
    August 8th, 2009 10:27 am

    Great compilation of CSS Tecnhiques

    Reply
  66. 316
    satish Borkar
    August 24th, 2009 4:52 am

    really nice techniques
    thanks

    Reply
  67. 317
    Ana Astobieta
    August 28th, 2009 6:55 am

    Great list, very helpful, thanks a lot!

    Reply
  68. 318
    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

    Reply
  69. 319
    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…

    Reply
  70. 320
    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.

    Reply
  71. 321
    Xtence
    October 29th, 2009 8:03 am

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

    Reply
  72. 322
    Jon
    November 1st, 2009 7:48 am

    Great list! Lots of useful info here.

    Reply
  73. 323
    barry eagan
    November 8th, 2009 4:31 am

    I likes to farts while traveling 40 mph.

    Reply
  74. 324
    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:

    - 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

    Reply
  75. 325
    j
    November 18th, 2009 11:06 pm

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

    Reply
  76. 326
    web assassin
    November 18th, 2009 11:07 pm

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

    Reply
12

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



Advertisement Advertise with us!
Join in Smashing Forum
Post your job


Advertisement