Menu Search
Jump to the content X X
Smashing Conf San Francisco

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 San Francisco, 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. [Content Care Nov/03/2016]

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. CSS Server-Side Pre-Processor3
CSS-Technique4
    1. Advanced CSS Menu5
CSS-techniques - Advanced CSS Menu6
    1. Styling File Inputs with CSS and the DOM7

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.

CSS-Technique8
    1. A Savvy Approach to Copyright Messaging9

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.

Screenshot10
    1. Advanced CSS Menu Trick11

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.

Screenshot12
    1. CSS hover effect13
CSS-techniques - CSS hover effect | Veerle's blog14
    1. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table15
CSS-techniques - Creating a table with dynamically highlighted columns like Crazy Egg's pricing table16
    1. Rediscovering the Button Element17
CSS-techniques - Particletree » Rediscovering the Button Element18
    1. A CSS styled table version 219
CSS-techniques - A CSS styled table version 2 | Veerle's blog20
    1. CSS Step Menu21

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.

Stepmenu22

    1. Creating bulletproof graphic link buttons with CSS | 456 Berea Street23
CSS-techniques - Creating bulletproof graphic link buttons with CSS | 456 Berea Street24
    1. Better Ordered Lists (Using Simple PHP and CSS)25

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.

Screenshot26
    1. CSS Dock Menu27
CSS-techniques - CSS Dock Menu28
    1. Fade Out Bottom29

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 Bottom30
    1. How to Style an A to Z Index with CSS31
CSS-techniques - How to Style an A to Z Index with CSS | Smiley Cat Web Design32
    1. CSS List Boxes33

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 Boxes34

    1. How-to create a “Table of Contents” Navigation35

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 Contents36

    1. CSS Recipe for Success37
CSS-techniques - CSS - A Recipe for Success38
    1. Partial Opacity39
CSS-techniques - Stu Nicholls | CSSplay | Partial Opacity40
    1. CSS Double Lists41
CSS-techniques - CSS: Double Lists | Mike’s Experiments | MikeCherim.com42
    1. Perspective Text with CSS43
CSS-techniques - Mike’s Experiments: Archives Page | A Record of My Madness | Powered by the GreenBeast CMS RSS Newsmaker - -44
    1. Better Email Links: Featuring CSS Attribute Selectors45

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.

Screenshot46
    1. CSS: Menu Descriptions47

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.

Screenshot48

Further Techniques Link

    1. CSS Transparency Settings for All Browsers49
CSS-techniques - CSS Transparency Settings for All Browsers50
    1. Custom Reading Containers51

This amazing little script allows the user to resize any container.

    1. Eric Meyer’s CSS Reset52
CSS-techniques - CSS Tools: Reset CSS53
    1. PNG Overlay54

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.

    1. Turning Lists into Trees55
CSS-techniques - odyniec.net56
    1. Create Resizable Images With CSS57
CSS-techniques - Create Resizable Images With CSS | Smiley Cat Web Design58

Footnotes Link

  1. 1 /2007/01/19/53-css-techniques-you-couldnt-live-without/
  2. 2 https://www.smashingmagazine.com/2007/05/70-expert-ideas-for-better-css-coding-2/
  3. 3 http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
  4. 4 http://www.shauninman.com/archive/2007/06/27/css_server_side_pre_processor
  5. 5 http://www.webdesignerwall.com/tutorials/advanced-css-menu/
  6. 6 http://www.webdesignerwall.com/tutorials/advanced-css-menu/
  7. 7 http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
  8. 8 http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
  9. 9 http://powazek.com/posts/867
  10. 10 http://powazek.com/posts/867
  11. 11 http://www.3point7designs.com/blog/2007/12/22/advanced-css-menu-trick/
  12. 12 http://www.3point7designs.com/blog/2007/12/22/advanced-css-menu-trick/
  13. 13 http://veerle.duoh.com/blog/comments/css_hover_effect/
  14. 14 http://veerle.duoh.com/blog/comments/css_hover_effect/
  15. 15 http://www.askthecssguy.com/2007/08/creating_a_table_with_dynamica.html
  16. 16 http://www.askthecssguy.com/2007/08/creating_a_table_with_dynamica.html
  17. 17 http://particletree.com/features/rediscovering-the-button-element/
  18. 18 http://particletree.com/features/rediscovering-the-button-element/
  19. 19 http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/
  20. 20 http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/
  21. 21 http://codylindley.com/CSS/325/css-step-menu
  22. 22 http://codylindley.com/CSS/325/css-step-menu
  23. 23 http://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/
  24. 24 http://www.456bereastreet.com/archive/200705/creating_bulletproof_graphic_link_buttons_with_css/
  25. 25 http://css-tricks.com/better-ordered-lists-using-simple-php-and-css/
  26. 26 http://css-tricks.com/better-ordered-lists-using-simple-php-and-css/
  27. 27 http://www.ndesign-studio.com/blog/mac/css-dock-menu
  28. 28 http://www.ndesign-studio.com/blog/mac/css-dock-menu
  29. 29 http://css-tricks.com/examples/FadeOutBottom/
  30. 30 http://css-tricks.com/examples/FadeOutBottom/
  31. 31 http://www.smileycat.com/miaow/archives/000211.php
  32. 32 http://www.smileycat.com/miaow/archives/000211.php
  33. 33 http://mikecherim.com/gbcms_xml/news_page.php?id=24#n24
  34. 34 http://mikecherim.com/gbcms_xml/news_page.php?id=24#n24
  35. 35 http://5thirtyone.com/archives/776
  36. 36 http://5thirtyone.com/archives/776
  37. 37 http://www.search-this.com/2007/11/26/css-a-recipe-for-success/
  38. 38 http://www.search-this.com/2007/11/26/css-a-recipe-for-success/
  39. 39 http://www.cssplay.co.uk/opacity/png.html
  40. 40 http://www.cssplay.co.uk/opacity/png.html
  41. 41 http://mikecherim.com/experiments/css_double_lists.php
  42. 42 http://mikecherim.com/experiments/css_double_lists.php
  43. 43 http://mikecherim.com/gbcms_xml/news_page.php?id=30#n30
  44. 44 http://mikecherim.com/gbcms_xml/news_page.php?id=30#n30
  45. 45 http://css-tricks.com/better-email-links-featuring-css-attribute-selectors/
  46. 46 http://css-tricks.com/better-email-links-featuring-css-attribute-selectors/
  47. 47 http://mikecherim.com/experiments/css_menu_descriptions.php#
  48. 48 http://mikecherim.com/experiments/css_menu_descriptions.php
  49. 49 http://css-tricks.com/css-transparency-settings-for-all-broswers/
  50. 50 http://css-tricks.com/css-transparency-settings-for-all-broswers/
  51. 51 http://www.devlounge.net/articles/custom-reading-containers
  52. 52 http://meyerweb.com/eric/tools/css/reset/
  53. 53 http://meyerweb.com/eric/tools/css/reset/
  54. 54 http://sonspring.com/journal/png-overlay
  55. 55 http://odyniec.net/articles/turning-lists-into-trees/
  56. 56 http://odyniec.net/articles/turning-lists-into-trees/
  57. 57 http://www.smileycat.com/miaow/archives/000648.php
  58. 58 http://www.smileycat.com/miaow/archives/000648.php

↑ 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, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    I got lost in this source!

    : )

    1
  2. 2

    awesome collection, as always.

    tnx!

    0
  3. 3

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

    0
  4. 4

    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?

    1
  5. 5

    nice list

    -1
  6. 6

    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

    0
  7. 7

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

    0
  8. 8

    Awesome! I know what I’m doing tonight.

    Thanks

    0
  9. 9

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

    0
  10. 10

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

    0
  11. 11

    Great set of resources. Keep ’em coming!

    0
  12. 12

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

    0
  13. 13

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

    0
  14. 14

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

    0
  15. 15

    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.

    0
  16. 16

    Keep up the good work!!

    0
  17. 17

    Very useful post for techniques and inspiration.

    0
  18. 18

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

    0
  19. 19

    I love you :)

    0
  20. 20

    Amazing List. Thanks.

    0
  21. 21

    You’ve duplicated a paragraph in the introduction.
    You’ve duplicated a paragraph in the introduction.

    Handy resource, I will try to refer to this article regularly.

    0
  22. 22

    wow, I have about 40 new side-projects :)

    0
  23. 23

    “Time Sensitive CSS Switcher”
    this is the stuff i’m looking for..now if they can change the whole content
    prior to within times..that’ll be even greater :D

    thanks for compiling the list for us css geek….

    0
  24. 24

    Oh my god, so may useful techniques. Thanks for collecting!!!

    0
  25. 25

    If u keep posting articles like this i can never call myself a CSS expert ;-)

    Thanks for great list ;-)

    0
  26. 26

    Best article ever.

    0
  27. 27

    My only thought after this post was that i love you :) Thanks for that!

    0
  28. 28

    Awesome list!

    This article goes far beyond any other I’ve seen

    Keep it up!

    0
  29. 29

    bali web designer

    February 21, 2008 11:58 pm

    Excellent list as usual :) vote for dock icon from ndesign-studio, i use it on my website

    0
  30. 30

    An awesome collection of useful resources. Thank you!

    0
  31. 31

    Awesome!!

    0
  32. 32

    great! just added to my fav’s!!

    0
  33. 33

    Yet another incredibly inspiring list. Why would we expect anything less? Thanx

    0
  34. 34

    Great list.
    The title is in my opinion non appropriate. Most effects are combination of CSS AND Javascript.

    0
  35. 35

    CSS is the best!

    0
  36. 36

    what to say? SM is the best! great post. Where I’m I going to find time to explore most of the examples shown here? :)

    0
  37. 37

    wow

    0
  38. 38

    Very useful tricks. Thanks

    0
  39. 39

    the best post ever :)

    0
  40. 40

    Vincent McAulay

    February 22, 2008 5:01 am

    Superb!

    0
  41. 41

    Damn Good

    0
  42. 42

    Damjan Mozetič

    February 22, 2008 5:25 am

    This is quite a selection of techniques! And I must say, some are even new to me :)

    0
  43. 43

    Wow. So much to learn still. Great inspiration!!

    0
  44. 44

    Thanks for pointing out “Table of Contents” CSS example.

    Cheers

    0
  45. 45

    Hey thats neat..especially the Vista style CSS

    0
  46. 46

    Brilliant. Great list.

    0
  47. 47

    Awesome, very nicely done ‘smashing’

    0
  48. 48

    Venkadesan Tharshan

    February 22, 2008 6:30 am

    thanks.

    0
  49. 49

    13. Rediscovering the Button Element
    Love this tip; not many people are aware of the power that css has over buttons. Great article, thanks.

    0
  50. 50

    Nice collection, and thank you for including my article :)

    0
  51. 51

    This site is always a pleasure to look at… so much great stuff it is ridiculous. If my boss only knew how much time was spent on your site…

    0
  52. 52

    #1. Should’nt one image be enough? What is the reason for using three images?

    0
  53. 53

    Great list! One thing I wish to goodness I could find again is a CSS experiment site that used two different background images on the header so the right side was different from the left.

    The page was flexible and the right/left images were 100% of the horizontal viewport.

    Anyone know the technique I’m talking about or seen a similar site? The one I saw, just a few months ago, was for a mock beachwear/surf type company. I kick myself everyday for not bookmarking it!

    0
  54. 54

    @ donnie

    I too wondered that at first … why not just use one image? The reason is (I think) because you can tile each image separately and get a more random look. For instance the front image on a 1280×1024 screen tiles twice. The mid one tiles 1 and a little times. The back image tiles about three times. It just allows for more randomness without having to make a really large and long top image. All in all a pretty good idea.

    0
  55. 55

    @Fred Clown

    Yes I see it now. Different browser width generates different backgrounds. Did’nt see it earlier. =)

    0
  56. 56

    Oh Thank You, oh thank you. I needed this.

    CSS frustrates me to no end sometimes. I often wish I could trap and skin that damn fire fox. An inhumane leg hold trap at that. Other times I wish a hired gun would take out the entire IE development team, starting with the guy at the top. If i had my choice it would be the hit on MSN staffers before trapping that pesky fox. Definitely. Its far easier to tame the fox than it is to control that ignorant 800 pound gorilla.

    0
  57. 57

    useful content, thanks.

    0
  58. 58

    Tyler @ Building Camelot

    February 22, 2008 2:02 pm

    You guys always amaze me! This is an awesome article…thank you for taking the time to put this together.

    0
  59. 59

    I learned some neat tricks. Thanks!

    0
  60. 60

    nice article, useful links.. thanks ..

    0
  61. 61

    Great list for web developer .Thanks

    0
  62. 62

    Average Joe Helpers

    February 24, 2008 1:12 am

    This is actually something we have been looking for to further our website. We’ll have to implement some of this stuff, thanks :)

    0
  63. 63

    superb resource,love u gyies for this

    0
  64. 64

    Finally on 25th Feb 2008. I got a reason to say a Happy New Years!!! LOL Thank you Smashing Magazine!

    0
  65. 65

    David Jacques-Louis

    February 24, 2008 9:49 am

    Live it. Wow.

    0
  66. 66

    You guys rock!

    0
  67. 67

    To be honest, I expected CSS techniques in this article. Examples presented above show mostly various design techniques using CSS and Javascript. Therefore the article should have different heading… CSS techniques are for example CSS reset, hierarchical styling, using pseudoselectors, hacks and so on…

    0
  68. 68

    Great tips! Now I have to make my forms looking better… :)

    0
  69. 69

    Wow what a nice list, thanks

    0
  70. 70

    Alfonso Marcos Vidal de la O

    February 28, 2008 2:41 am

    Great article! About PNG transparency AlphaImageLoader on “” elements we´ll find the solution on 49abcnews.com code: Using conditional comments + CSS like this:

    XHTML

    CSS
    “#element {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”http://media.49abcnews.com/img/trans-white-20.png”, sizingMethod=”scale”);
    }”

    0
  71. 71

    Alfonso Marcos Vidal de la O

    February 28, 2008 2:59 am

    Great article! About PNG transparency AlphaImageLoader on div, span, tables… elements, without a .js file, we´ll find the solution on 49abcnews.com code: Using conditional comments and CSS like this:

    CSS
    #element {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”http://media.49abcnews.com/img/trans-white-20.png”, sizingMethod=”scale”);
    }

    An example applying a shadow-effect over gradient background image:

    0
  72. 72

    Alfonso Marcos Vidal de la O

    February 28, 2008 3:01 am

    Great article! About PNG transparency AlphaImageLoader on div, span, tables… elements, without a .js file, we´ll find the solution on 49abcnews.com code: Using conditional comments and CSS like this:

    CSS
    #element {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”http://media.49abcnews.com/img/trans-white-20.png”, sizingMethod=”scale”);
    }

    0
  73. 73

    I came to smashing magazine originally for CSS and lately there have been a dearth of good CSS related posts, but this one filled that void. Awesome smashing post, keep em coming!

    0
  74. 74

    Thank you for your great job. There are much great ideas to discover….

    From Germany

    Ralph

    0
  75. 75

    haha I LOVE the favicon hyperlink cues. I’ve got to implement that. Excellent list as usual!

    0
  76. 76

    Nifty tool for css coders: markup generator. Saving you the time needed to write xhtml.

    0
  77. 77

    RE: #50. resizing images with text – one word – Opera

    bring on the browsers that support vector graphics.

    0
  78. 78

    wow. that’s all i can say. thanks!

    0
  79. 79

    Dennison Uy - Graphic Designer

    March 8, 2008 8:23 am

    Awesome list. Dugg!

    0
  80. 80

    Again, I hope I may point to a method that helps judging these techniques [1]. Some are in fact quite good, others might be “worth reconsideration”.

    [1] Great CSS Techniques

    0
  81. 81

    I love Tip 19. Iconize Textlinks with CSS – It’s so simple and yet effective

    Since this is my first comment on this page I want to congratulate you guys for this fantastic resource of inspiration.
    Many thanks
    Christian

    0
  82. 82

    I Like all the Css . These are all possible in GWT. I want to Apply These All css in GWT. I dont Know GHow to Apply .Please replay me any ones Nows.

    0
  83. 83

    I want to apply these CSS in GWT is it Possible?.. Any one Know Pls Reply.

    0
  84. 84

    Great collection!

    0
  85. 85

    Simply superb !!! Such an inspiring collection of wonderful scripts and ides.. Kudos to all who worked behind this :-)

    0
  86. 86

    Nice collection, indeed! Thank you.

    0
  87. 87

    great tips really
    thx so much

    0
  88. 88

    hi:
    I want to know that how can i reduce using !important in margins for ie6.

    and

    How can i control the horizontal scrollbar of textarea of a form.

    thnkx

    0
  89. 89

    So great! thanks!

    0
  90. 90

    very informative site for me Thanks……!

    0
  91. 91

    Great collection!

    0
  92. 92

    francis.augustin

    December 14, 2008 9:58 pm

    nice

    0
  93. 93

    rudy Yulianto

    January 1, 2009 8:57 pm

    wow..amazing..it;s great…thx

    0
  94. 94

    this is an very useful tips. thanks

    0
  95. 95

    I got lost in this source!

    0
  96. 96

    Scott Thrower

    January 20, 2009 1:02 pm

    Excellent Tutorials my friends. Thank you for sharing. These are great time-saver effects! Keep up the good work!

    0
  97. 97

    Nice & greatfull resource… million of thanks

    0
  98. 98

    This is very useful to me. Thanks a lot!

    0
  99. 99

    Steve Constable

    February 14, 2009 6:52 pm

    I like css sites but more an more am getting bored with them.

    0
  100. 100

    Very helpful content fro any programmer , Web Designer and SEO.

    0
  101. 101

    great collections!

    thanks

    0
  102. 102

    great job . i hate from internet explorer 6 , i cant use PNG Transparency in my website.

    0
  103. 103

    very good, thnks so much.

    0
  104. 104

    duplicate files

    May 2, 2009 6:38 am

    very good, thnks so much.

    0
  105. 105

    Cre8ive Commando

    July 1, 2009 5:12 pm

    @Altyazı – It can be annoying to get transparent PNG images to work properly in ie6 but it is actually very easy to fix. Here is a very simple tutorial that will show you how to Fix transparent PNG images in ie6. It should only take a few minutes to set up on your website:

    0
  106. 106

    This is an awesome resource, but I feel that a bit too much of the stuff here is dependant on JavaScript to function, which is not really truth in advertisement for an article titled “Powerful CSS Techniques”.

    0
  107. 107

    its greats thks a lot..

    0
  108. 108

    another cool list from smashingmagazine

    (now i just need a clone of myself that can spend all day absorbing this endless supply of useful information)

    0
  109. 109

    it 2good

    0
  110. 110

    Shrikrishna Meena

    November 5, 2010 12:13 am

    Few of them are really awesome… Thanks for introducing them with us.

    0
  111. 111

    Dwight Zahringer

    March 25, 2011 8:12 am

    Wow, great list. Spent about 1/2 hour here. Thanks for compiling.

    0

↑ Back to top