Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Powerful CSS-Techniques For Effective Coding

Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. And that’s where ready-to-use solutions developed by other designers come in handy.

One year ago we’ve published the post with 53 CSS-Techniques You Couldn’t Live Without1 where we provided references to the most useful CSS-techniques which are often used in almost every project. Over the last year we’ve been observing what’s happening with the CSS-based web-development, and we collected most useful CSS-techniques we’ve stumbled upon — for us and for our readers.

In this post we present 50 new CSS-techniques, ideas and ready-to-use solutions for effective coding. You definitely know some of them, but definitely not all of them. Some technique is missing? Let us know in the comments to this post.

Thanks to all developers who contributed to the CSS-based design2 over the last year. The community appreciates it.

CSS-Techniques Link

  1. Triadic Background Setting with CSS3
  2. The Silverback web site uses three background images to create the illusion of 3D with simple CSS. No documentation is provided, however the source code is quite intuitive. [via Wilson Miner4]

  3. CSS Server-Side Pre-Processor6
  4. CSS-Technique7
  5. Advanced CSS Menu8
  6. CSS-techniques - Advanced CSS Menu9
  7. Styling File Inputs with CSS and the DOM10
  8. File inputs (<input type=”file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

  9. A Savvy Approach to Copyright Messaging12
  10. Derek Powazek suggests adding a copyright message to a photo and use CSS to crop its view. This is supposed to accomplish the goal of adding robust copyright information without defacing your own work.

  11. Advanced CSS Menu Trick14
  12. What we want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

  13. CSS hover effect16
  14. CSS-techniques - CSS hover effect | Veerle's blog17
  15. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table18
  16. CSS-techniques - Creating a table with dynamically highlighted columns like Crazy Egg's pricing table19
  17. A Stripe of List Style Inspiration20
  18. A different type of list and navbar styling. As stripes.

    CSS List Style21
  19. Rediscovering the Button Element22
  20. CSS-techniques - Particletree » Rediscovering the Button Element23
  21. Dynamic CSS With Variables
  22. Geoffrey Grosenbach describes how you can integrate CSS variables in CSS coding — with Ruby on Rails.

    Dynamic CSS
  23. A CSS styled table version 224
  24. CSS-techniques - A CSS styled table version 2 | Veerle's blog25
  25. CSS Step Menu26
  26. A method of designing the so-called step-menus, which have some steps users have to go through in order to achieve some aim. This menu offers a varying amount of steps, dependent upon the type of user accessing the application.


  27. Creating bulletproof graphic link buttons with CSS | 456 Berea Street28
  28. CSS-techniques - Creating bulletproof graphic link buttons with CSS | 456 Berea Street29
  29. Iconize Textlinks with CSS30
  30. Links are fun, but sometimes we don’t know where they take us. With this little CSS technique a user can identify a link by its icon. The updated release of the technique.

  31. Better Ordered Lists (Using Simple PHP and CSS)32
  32. Ordered lists are boring! Sure you can apply background images and do quite a bit of sprucing up to a regular ordered list, but you just don’t get enough control over the number itself.

  33. Circular Menu with CSS34
  34. This article shows how a beautiful circular navigation menu is created. In Spanish with Source code35 and an example36.

    Circular Menu with CSS37
  35. CSS Dock Menu38
  36. CSS-techniques - CSS Dock Menu39
  37. Digg-like navigation bar using CSS
  38. This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.

  39. How to create VISTA style toolbar with CSS
  40. Reproducing Vista toolbar, with buttons and hover effect in cross-browser compatible CSS and (X)HTML.

    Vista CSS Toolbar
  41. Fade Out Bottom40
  42. This is a demonstration of the effect where the bottom of the page seems to fade out. The technique makes use of an fixed position div (bottom: 0%) with a transparent PNG image and a high z-index value.

    CSS-techniques - Fade Out Bottom41
  43. Scrollovers – A New Way of Linking
  44. Everyone is familiar with hover-effects. This CSS+JavaScript-based techniques creates the Scrolleffect – not really necessary, but it’s nice to know, how it can be done.


  45. How to Style an A to Z Index with CSS42
  46. CSS-techniques - How to Style an A to Z Index with CSS | Smiley Cat Web Design43
  47. CSS List Boxes44
  48. Using a simple unordered list this experiment aligns the boxes across the page with the end result being to showcase items like services, products, or specials. One of cool thing about this — if you turn off styles — is the extractable semantics with the headings and paragraphs used.

    List Boxes45

  49. How-to create a “Table of Contents” Navigation46
  50. In as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be integrated in your site ready for even more styling.

    Table of Contents47

  51. CSS Recipe for Success48
  52. CSS-techniques - CSS - A Recipe for Success49
  53. Partial Opacity50
  54. CSS-techniques - Stu Nicholls | CSSplay | Partial Opacity51
  55. Simple Round CSS Links (Wii Buttons)52
  56. CSS-techniques - Simple Round CSS Links ( Wii Buttons )53
  57. Drop Shadow CSS54
  58. CSS-techniques - Drop Shadow CSS55
  59. CSS Double Lists56
  60. CSS-techniques - CSS: Double Lists | Mike’s Experiments | MikeCherim.com57
  61. Perspective Text with CSS58
  62. CSS-techniques - Mike’s Experiments: Archives Page | A Record of My Madness | Powered by the GreenBeast CMS RSS Newsmaker - -59
  63. Better Email Links: Featuring CSS Attribute Selectors60
  64. Learn how to generate code for displaying the e-mail automatically once mailto is used. CSS Attribute Selectors in action which is not supported by Internet Explorer 6 and 7.

  65. CSS: Menu Descriptions62
  66. This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. And since it doesn’t rely of JavaScript, it should be useful to everyone, even disabled users.


    Further Techniques Link

  67. CSS Transparency Settings for All Browsers64
  68. CSS-techniques - CSS Transparency Settings for All Browsers65
  69. Custom Reading Containers66
  70. This amazing little script allows the user to resize any container.

  71. Eric Meyer’s CSS Reset67
  72. CSS-techniques - CSS Tools: Reset CSS68
  73. PNG Overlay69
  74. Create a transparent PNG overlay which can be used as a mask / frame around regular JPEG or GIF so users can upload photos without having to worry about using any graphics program to apply filters, plus it saves time.

  75. Turning Lists into Trees70
  76. CSS-techniques - odyniec.net71
  77. Create Resizable Images With CSS72
  78. CSS-techniques - Create Resizable Images With CSS | Smiley Cat Web Design73

Footnotes Link

  1. 1 /2007/01/19/53-css-techniques-you-couldnt-live-without/
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    I got lost in this source!

    : )

  2. 2

    Thanks for linking our article. You have some great collection of css techniques over here :)

    We have created 2 round-ups of CSS techniques that have some other great CSS Techniques that we can find handy.

  3. 3

    awesome collection, as always.


  4. 4

    Great list. Another reason for me to procrastinate at work!!

  5. 5

    I was just wondering why you keep reposting the same items in multiple articles.
    Sure, this one has many awesome new things, but many of them I’ve already seen before on your site.
    What’s going on?

  6. 6

    nice list

  7. 7

    You guys are too awesome. I mean it! If it weren’t for you, I would still be a total newbie.

    Thanks! Keep it up, please.
    Thomas, 14 years

  8. 8

    Thanks for the list – very useful – will keep me busy for a while!!!

  9. 9

    Awesome! I know what I’m doing tonight.


  10. 10

    I find all of your articles useful, but this particular article is the best I’ve seen yet. Thank you.

  11. 11

    An excelent colection! Keep up the good work! =)

  12. 12

    Great set of resources. Keep ’em coming!

  13. 13

    Holy smokin’ list o’ links! Guh! I’m rethinking various UI stuff now. Awesome collection!

  14. 14

    Am I glad that I just inserted Smashingmagazine rss into my rss application! Very handy overview.

  15. 15

    Nice list, I’m resolved to do my next big project with pngs! Smashmag kicks ass.

  16. 16

    Vitaly Friedman & Sven Lennartz

    February 21, 2008 2:21 pm

    @Lisa: “I was just wondering why you keep reposting the same items in multiple articles.”

    We appreciate your concern, Lisa. However, it’s important to us that these useful resources are available to web-developers right away, so you don’t have to search through dozens of posts which cover not only CSS, but also other things. We try to do our best to make it as easy as possible to find these resources. This is what the whole thing is all about. This article is an example for exactly that.

  17. 17

    Keep up the good work!!

  18. 18

    Very useful post for techniques and inspiration.

  19. 19

    Assault T-Shirts

    February 21, 2008 3:20 pm

    I’ve been trying to figure out for awhile how Apple did their rounded form field on their homepage and got it to show up nicely in Safari 1.x

    I got my form fields hidden by hiding the border and making it white, but Safari 1.x still shows the ugly form field… anyone seen anything on this?

  20. 20

    Reading this shows just how much there is to learn. Great list. New things to try.


↑ Back to top