Menu Search
Jump to the content X X
Smashing Conf New York

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 New York, dedicated to smart front-end techniques and design patterns.

50 New Useful CSS Techniques, Tools and Tutorials


Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual presentation of the content. However, there are still some attributes that are not so well-known; also, CSS3 offers us new possibilities and tools that need to be understood, learned and then applied in the right context to the right effect.

In this round-up we present fresh useful articles about less-known CSS 2.1 and CSS3 properties as well as an overview of recently published CSS techniques, tools and tips for designers and web-developers. Please stay tuned: next week we will present the second part of this article, featuring fresh CSS3 techniques, tools and resources.

Learn About Obscure CSS Properties Link

The Little Known font-size-adjust Property1
Ever wanted to use fallback fonts on your CSS with different aspect ratios without them looking huge (or tiny)? The sparkling new CSS3 font-size-adjust property could do just that.

  Demystifying CSS At-Rules  2

Demystifying CSS At-Rules 3
CSS at-rules (or @rules) are so-named because they utilize the ‘@’-character. They aren’t used as often as other CSS elements, and so it may be easy to overlook their function. If you’ve ever been confused about CSS at-rules, here’s a quick guide.

  Demystifying CSS At-Rules  4

The CSS white-space Property Explained5
CSS has a pretty useful property called white-space that often goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.

  Demystifying CSS At-Rules  6

How nth-child Works 7
nth-child is one of those rather unfortunate CSS attributes that is caught between nearly full cross-browser compatibility, except for completely zero support in IE, even IE 8. By Chris Coyier.

How nth-child Works 8

The CSS3 :target Pseudo-class And CSS Animations9
There are so many underused techniques that we could be applying to our designs as an enhancement layer. Let’s take a brief look into the :target pseudo-class and a very simple CSS animation.

 The CSS3 :target Pseudo-class And CSS Animations10

The space combinator 11
Combinators are an overlooked part of CSS development. Most juniors don’t even know they are making use of them, others are unaware of their full potential and let’s face it, even most professionals don’t really know about the ins and outs of css combinators. It’s all connected to that little piece of nothingness in between class names, so let’s start by taking a good look at the space (descendant) combinator.

The space combinator 12

Cross-Browser Inline-Block 13
Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. An article explaining what inline-block is, how it works and what it is good for.

Cross-Browser Inline-Block 14

The Skinny on CSS Attribute Selectors 15
Single element has three attributes: ID, class, and rel. To select the element in CSS, you could use and ID selector (#first-title) or a class selector (.magical). But did you know you can select it based on that rel attribute as well? That is what is known as an attribute selector.

The Skinny on CSS Attribute Selectors 16

The Mysterious Pseudo Class in CSS17
Pseudo classes let you control the CSS of stuff in different forms, states and places easily and efficiently, without taking up too much room. CSS3 is going to introduce many new pseudo classes, and they’re going to make our lives a lot easier (if you take browser compatibility out of the equation). They help both aesthetics and usability, and can make things that were once hard easier than ever before.

The Mysterious Pseudo Class in CSS18

CSS Opacity: A Comprehensive Reference19
This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers. One thing that should be noted about CSS opacity is that, although it’s been in use for a number of years now, it has never been, and is currently not a standard property. It’s a non-standard technique that is supposed to be part of the CSS3 specification.

CSS Opacity: A Comprehensive Reference20

Visual Walkthrough of @font-face CSS Code21
In step-by-step visual format, this article will show you what the code is doing and how to use it with your own custom fonts.

CSS Opacity: A Comprehensive Reference22

Taming Advanced CSS Selectors 23
The best way to avoid plagues spreading in your markup and keep it clean and semantic, is by using more complex CSS selectors, ones that can target specific elements without the need of a class or an id, and by doing that keep our code and our stylesheets flexible.

A Look at Some of the New Selectors Introduced in CSS3
Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course, CSS3 isn’t supported at all by any IE browsers including IE8; but all latest versions of Safari, Firefox and Opera support most, if not all of them.

Useful CSS Techniques Link

Deal-breaker problems with CSS3 multi-columns24
“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.”

 Deal-breaker problems with CSS3 multi-columns25

Correcting Orphans with Overflow
“The overflow property in CSS can be used in various ways and comes in handy when correcting bugs. Below are some tutorials that demonstrate how to clear up some common issues using the overflow property.”

No orphans

CSS Sprites without Using Background Images
” The first approach in my mind was to do the typical CSS Sprites but this requires CSS work which my client did not know much of. I wanted to give him the access to update his affiliate banners using WordPress, and the simplest thing was to let him just upload his own images and put the URL in a custom field. No CSS tweaks involved, just what he needed.”

No orphans

Center Multiple DIVs with CSS26
At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.

  Demystifying CSS At-Rules  27

Different Stylesheets for Differently Sized Browser Windows28
Otherwise known as “resolution dependent layouts”. Single website, different CSS files for rearranging a website to take advantage of the size available. There is a W3C standard way of declaring them.

  Demystifying CSS At-Rules  29

The New Clearfix Method30
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way.

  Demystifying CSS At-Rules  31

Preload Images with CSS, JavaScript, or Ajax32
“Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to enhance the performance and usability of your site.”

How to Center an Absolutely Positioned Element Using CSS33
“Centering an absolutely positioned element is a CSS challenge that occurs now and then. The solutions seem obvious once I’ve done it, but I still find myself googling the problem every few months.”

Wrapping Long URLs and Text Content with CSS34
To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags).

  Demystifying CSS At-Rules  35

Unconventional: CSS3 Link Checking 36
An interesting solution of finding empty links on a web page. Only CSS3 in use.

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery37
Although the lack of cross-browser CSS selector support has caused a number of useful CSS selectors to go almost unnoticed, developers can still manipulate styles on their pages using some of these little-used selectors through jQuery.

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery38

“Checkmark” Your Visited Links with Pure CSS 39
The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator. The article will be targeting the a:visited pseudo class, but it also includes information on the other anchor pseudo classes.


Reorganize visited links with CSS3 flexible box model
An interesting technique that uses flexible box model (box, box-flex, box-ordinal-group), generated content (:before, :after) and :not and :first-of-type selectors to reorganize visited links on the page.

Vertical Centering 41
Vertical centering with CSS seems to be a large obsticle in the Web design world and I notice a lot of people favor <table>-based layouts when the need for vertical center arises. That’s too bad. Whilst CSS vertical center can get [very] complicated at times, I believe that learning various techniques for archiving it is beneficial and once you get a hang of it, you’ll do it just as anything else with CSS.

Robust Vertical Text Layout42
Few formatting systems today can handle vertical text layout, and most of those only lay out text in right-to-left columns. This document outlines a system that can not only handle common scripts in vertical right-to-left columns, but that can gracefully accept uncommon script combinations and left-to-right text columns. The model is described here as a CSS system, but the concepts can apply to non-CSS systems as well.

iPad Orientation CSS43
For the most part, Mobile Safari on the iPad is the same as that on the iPhone. One difference is that Webkit on the iPad honors CSS media query declarations based on orientation.

How to keep footers at the bottom of the page44
When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it’s not immediately obvious how this can be done.

Sexy CSS Buttons
CSS is getting quite powerful these days. It can even take the place of images in many ways, giving you a more flexible design and fewer files to work with. Imagine being able to make an ultra sexy button with just CSS, giving you complete control through code. Well, you can! And it’s not too difficult, really.

 Sexy CSS Buttons

CSS Image Maps: A Beginner’s Guide45
While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp. In this tutorial, we’re not only going to get you up to speed on how to create a CSS image map, but, we’re also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a “tooltip” like popup.

CSS Image Maps: A Beginner's Guide46

Make All Links Feel Subtly More Button-Like 47
On this current design of CSS-Tricks, you may have noticed how all links bump themselves down one pixel as you click them. This tutorial displays how to implement this technique.

Make All Links Feel Subtly More Button-Like 48

“I figured that it would be a good idea to show the content of a footnote as soon as you indicate that you are interested in the footnote. Namely, when you move the cursor over the footnote symbol. This allows footnotes to work on devices that don’t support mouse hovering, because you can still jump to a footnote via its link, but it removes the necessity of having to click on a footnote link for most people.”


Progressive enhancement: pure CSS speech bubbles
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

Progressive enhancement: pure CSS speech bubbles

IE CSS Bugs That’ll Get You Every Time51
A comprehensive guide for developers hunting for solutions to take care of the nasty Internet Explorer bugs.

IE CSS Bugs That'll Get You Every Time52

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs53
Only if you must: an extensive article featuring common problems, issue and solutions for dealing with Internet Explorer 6.

IE CSS Bugs That'll Get You Every Time54

Useful CSS Tools, Tips and Advice Link

CSS deployment: combine CSS files into a master file
A handy PHP script which reads a directory with css files and combines them automatically into one master stylesheet. No matter how many files you add while developing, before launch you can use a build script that merges them all so you can save HTTP requests.

CSS deployment – combine css files into a master file

CSS efficiency tip: use a single stylesheet file for multiple media55
The way most people link CSS intended for different media types, such as screen, print, or handheld, is to use multiple files. The files are then linked either through link elements with a media attribute or through @import statements with one or more media types specified.

CSS efficiency tip: use a single stylesheet file for multiple media56

Efficiently Rendering CSS 57
How efficient is the CSS that we write, in terms of how quickly the browser can render it? This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Let’s cover some of the big ideas they present, and then discuss the practicalities of it all.

JSCSSP, a CSS parser in JavaScript58
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines. It’s very simple to use and manipulate, and can be used to write a CSS validator, filters or even CSS extensions for a given browser.

CSSDesk: A CSS Playground59
A playground where you put in HTML and CSS, and see a live preview (via Ajaxian60).


CSS Buttons is the Plug and Play Solution for Web Designers and Developers 62
CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual, CMS, Blogs, and similar web sites faced with dynamic content challenges.

CSS Buttons is the Plug and Play Solution for Web Designers and Developers 63

Website Colors Finder
This neat little tool extracts any color information, no matter if inline CSS, CSS files via import or link, and even if you have a master CSS file with references to other css files – mooColorFinder reads it out.

Website colors finder - ajax based mooColorfinder

CSS Inliner Tool
If you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles.

CSS Inliner Tool

HTML5/CSS3 Framework64
CSS3 is one of the coolest thing in the web designer world and has been a long time coming. With CSS3 you can save time designing and slicing fancy layouts. CSS3 has features like text/box shadow, rounded corners,and animations. These just a few of the many CSS3 features has to offer you.

 First ever html5 and css3 framework 65

CSS Buttons Generator66

Button Maker67

CSS Border Radius Generator68

CSS Border Radius69

CSS Corners Generator70

CSS Border Radius71

CSS3 Generator72
This online tool generates cross-browser CSS3 snippets that you can use right away on your website. You can also preview the code in a sandbox.

CSS Border Radius73

CSS 3, Please!74
Another generator and tester of CSS3 rules on the fly.

CSS Border Radius75

CSS Linear Gradients Generator76
This little helper generates the code for CSS3 linear gradients online. Handy.

CSS Border Radius77

CSS Border Image Generator78

CSS Border Radius79

minify 80
Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

  minify 81

Rendera makes learning HTML5 and CSS3 easy. Type in your HTML and CSS to see it rendered. Each time you press the Enter key, the live preview will update. Some examples are already provided.

HTML5 and CSS3 Web App Prototyping83
Web developers often tweak style according to the device (desktop, tablet, mobile) in use. ProtoFluid makes intial tweaking much quicker.ProtoFluid requires a freshly updated, standards compliant, modern browser.

 HTML5 and CSS3 Web App Prototyping84

HTML5 Readiness85
An interactive table featuring the support of HTML5 and CSS3 in browsers.

HTML5 Readiness86

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)87
Smashing Magazine’s cheat sheets that will help you quickly look up the right CSS 2.1-property or an obscure CSS 3 property. The style sheets contain most important properties, explanations and keywords for each property. The help sheets were created by GoSquared and released for Smashing Magazine and its readers.

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)88

Which email clients support CSS3? 89
“In this update to our existing guide to CSS support, we tested both widely implemented and experimental CSS3 properties across 24 popular desktop, web and mobile email clients. The results were mixed, but certainly surprising! If you’re planning to introduce CSS3 to email campaigns, read on: we’ve not only got a summary of which email clients display what properties, but observations and hand-picked recommendations for the style-savvy email designer.” Also check Guide to CSS support in email clients90.

Which email clients support CSS3? 91

Brosho Plugin: Design from built-in element selector and CSS editor92
With this Brosho Plugin you can design your markup in the browser. It is a jQuery Plugin designs with the help of a build-in element selector and CSS editor. The CSS code of the altered elements can be generated with just one click. This can be further used in your own stylesheet.

Brosho Plugin: Design from built-in element selector and CSS editor93

When can I use…94
Compatibility tables for features in HTML5, CSS3, SVG and other web standards.

When can I use compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies95

Primer undercoats your CSS by pulling out all of your classes and ID’s and placing them into a starter stylesheet. Paste your HTML in to get started.


CSS Infos98
A comprehensive reference table for all 243 CSS properties. Also, the page contains a full list of CSS properties supported by Safari and Firefox.

CSS Infos99

CSS font stacks100
A quick presentation on Font stacks including a basic explanation and a step-by-step example.

CSS font stacks101

CSS Reset, a simpler option 102
A quick presentation on CSS Reset including a basic explanation, an outline of some of the advantages and disadvantages, as well as a simpler reset option.

CSS Reset - a simpler option 103

Last Click Link

Webble is fun. It was written using HTML, JavaScript and CSS and does not make use of the HTML5 canvas element. The goal of Webble is to make horizontal or vertical lines of three or more tiles.


Further Resources Link

50 Useful Tools and Generators for Easy CSS Development 106
The tools have been sorted into the following categories: Grid and Layout, CSS Optimisers, CSS Menus Tools, CSS Buttons, CSS Rounded Corners, CSS Frames, CSS Sprites, CSS Tables, CSS Typography and CSS Forms.

50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)107
We are permanently looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)108

What about other round-ups? Link

Footnotes Link

  1. 1
  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
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
SmashingConf New York

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 New York, on June 14–15, 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

    Awsome! this looks realy usefull !!

  2. 2

    Great list! Interested in CSS reset frameworks? Have a look of this one

  3. 3

    Ravi Shankar

    June 10, 2010 7:14 am

    Awesome collection… Thanks!

  4. 4

    Craig Anthony

    June 10, 2010 7:39 am

    Ya… many thanks. Very robust indeed.

  5. 5

    that’s what i’m talking about !
    Thanks for the article.

  6. 6

    Don’t ever adjust fonts in a way that changes their original core shapes. If you want to impress any other designers that have been doing this a while this is considered bastardization and you will instantly lose their respect. If your fallback font isn’t the same aspect ratio find a different type and family or deal with the difference. This includes stretching fonts in one primary direction.

  7. 7

    Excellent round-up – thanks for putting the time and effort into this post!

  8. 8

    What a great, huge list! I’ll never get through all of this.

  9. 9

    nice post Vitaly

  10. 10

    “an extensive article featuring common problems, issue and solutions for dealing with Internet Explorer 6”

    What do u think – How is your magazine look in IE6?

  11. 11

    Jean-Francois Monfette

    June 10, 2010 11:55 am

    Very useful list. Going straight to my favorites. Thanks a lot !

  12. 12

    I have a tutorial on a minor update to the Cross Browser Inline Block method:

    It fixes the white-space issue introduced using Ryan Doherty’s Inline-Block method.

  13. 13

    Terrific roundup. Thanks for putting this together.

  14. 14

    Angel Grablev

    June 10, 2010 2:29 pm

    Thanks for including 52framework :) great list, bookmarked ;)

  15. 15

    Nice round up but unfortunately we’ll never get to use most of it considering IE7 doesn’t support CSS3. Think how many years till that’s gone and then remember even IE8 is lacking in areas. Damn you microsoft!!!

  16. 16

    This is an AWESOME collection, definitely addresses a lot of things I was just ‘iffy’ on, now providing much better understanding on them, thanks!

  17. 17

    If you want a great clearfix check out this article that I wrote
    Melbourne websites – best clearfix ever

  18. 18

    Top notch list! Bookmarked for future reference!

  19. 19

    Hastimal Shah

    June 10, 2010 8:15 pm

    Great List… Bookmarked
    Thanks a lot

  20. 20

    Kevin Althaus

    June 10, 2010 8:37 pm

    Damn that’s gonna be a lot of reading. Great stuff as usual, smashing!

  21. 21

    Rakesh Kumar

    June 10, 2010 9:04 pm


    These tricks are really cool and useful. Thanks for these tricks

  22. 22

    looks good

  23. 23

    thanks. good job.

  24. 24

    Sumeet Chawla

    June 11, 2010 12:02 am

    Nice resourceful collection ^_^

  25. 25

    unbelievably valuable

  26. 26

    Clinton Montague

    June 11, 2010 2:16 am

    Nice set of tips and tricks. A note about the ones about marking visited links though; over the next few years these will stop working. It turns out that :visited is a security risk so browsers will find ways to fix it or remove it. Safari 5 for example doesn’t support it at-all

  27. 27

    priceless list – thank you!
    i really like the one with killing orphans, thats getting me over and over…

  28. 28

    I am thinking of using font-size-adjust, because some cool new fonts are smaller than Arial. Though it only works in Firefox, as far as I know.

  29. 29

    Sweet list!

  30. 30

    Larry Karvis

    June 11, 2010 12:43 pm

    Your forgot

  31. 31

    Must say, an excellent coverage! Deleted a good chunk of my css bookmarks and just added this one.

    Good job!

  32. 32

    Really useful..

  33. 33

    Is the best article I have ever read here!

  34. 34

    There’s a pretty cool CSS button generator at:

  35. 35

    thanx for sharing :D

  36. 36

    gopal bhattacharjee

    June 11, 2010 11:24 pm

    good tutorials and great list…

  37. 37

    As always: Great list here @ smashingmag.

  38. 38

    Really good resources you’ve got here, very very useful, Thanks!.

  39. 39

    As a blogger I can appreciate how long it would take to create a top 50 post. Wow! Just Wow! Excellent list of CSS techniques!

  40. 40

    Vitaly Friedman rocks!

    Awesome article with many killer techniques.

    Tons of great stuff – this is an incredible post.

    Thank you =)


↑ Back to top