Menu Search
Jump to the content X X
SmashingConf London Avatar

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. our upcoming SmashingConf London, dedicated to all things web performance.

99 Powerful New CSS- and JavaScript Techniques

Since our last round-up of useful CSS techniques1, we’ve seen a lot of truly remarkable CSS geekery out there. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage.

Since the release of the previous post, we’ve been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques. Today we finally present some of these techniques. Use them right away or save them for future reference.

Further Reading on SmashingMag: Link

Please note that many techniques are not only CSS-based, but also use HTML5 and JavaScript. We are going to present useful CSS tools and responsive design techniques in separate posts. Please don’t hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping; share your insight and experience instead, and feel free to link to techniques that really helped you recently. Thanks to all of the featured designers and developers for their fantastic work!

Table of Contents Link

  1. CSS Transitions and Animations5
  2. Useful and Practical CSS Techniques6
  3. CSS Typography and Text Techniques7
  4. CSS Navigation Menus and Hover Effects8
  5. Visual Techniques With CSS9

CSS Transitions And Animations

CSS transitions and animations are often used to make the user experience a bit more smooth and interesting, especially when it comes to interactive effects on hover or on click. Designers are experimenting with technology and create sometimes crazy, sometimes practical—but often innovative techniques which you could use to make your websites just a tiny bit more engaging.

Interactive CSS3 lighting effects10
An interesting effect to create interactive lighting effects with 3-D transforms, CSS gradients and masks; the cast shadow was created using box shadows and transforms.

Interactive CSS3 Lighting Effects11

CSS3 dodecahedron12
A fancy dodecahedron experiment, created using CSS Transforms and a tiny JavaScript snippet.

CSS3 Dodecahedron13

CSS 3D Lighting Engine Photon14
Our editor Tom Giannattasio has created a JavaScript library that adds simple lighting effects to DOM elements in 3D space using the WebKitCSSMatrix object. It would be great to have an implementation for other rendering engines as well.

CSS 3D Lighting Engine Photon15

3D Thumbnail Hover Effects With CSS16
This technique produces 3D thumbnail hover effects with CSS 3D transforms. The code is quite verbose and probably could be optimized, but the effect is quite neat.

3D Thumbnail Hover Effects With CSS17

Slide In Image Boxes18
A technique for creating a “slide in” effect for boxes on hover to make them a bit more interactive.

Slide In Image Boxes19

CSS3 bitmap graphics20
The bitmap graphics is rendered with CSS: no images, no canvas, no data URIs and no extra markup. The pixels are drawn with CSS gradients, sized precisely to the pixel’s boundaries.

Pure CSS3 Bitmap Graphics21

Paperfold CSS22
A visual folding effect for hidden comments by Felix Niklas. The plugin takes a DOM element, slices it into parts and arranges them like a folded paper in 3-D space.

Paperfold CSS23

Beercamp: An Experiment With CSS 3D
A CSS 3D popup book á la Dr. Seuss. The website was a test to see how far SVG and CSS 3D transforms could be pushed. This is the article about it.

Beercamp: An Experiment With CSS 3D

Covers: A JS / CSS Experiment24
Now, that’s quite an experiment: what if we combined a music song, stylesheet and beat detector to create animated… covers? Sure, we can do it with CSS3 and JavaScript! Covers does exactly that. The result is interesting, what can you do with this approach?

Covers: A JS / CSS Experiment25

Animation on Apple’s page26
John B. Hall explains the CSS animation on Apple’s Web page for the iPhone 4S.

An explanation of the CSS animation on Apple’s iPhone 4S webpage — John B. Hall27

Experimental animations for image transitions28
A post about experimental 3-D image transitions that use CSS3 animations and jQuery. Only CSS3 transforms are used.

Experimental CSS3 Animations for Image Transitions29

Maintaining CSS style states using “infinite” transition delays30
This demo allows you to move the character around with the D-pad, and notice how it always keeps its position after you stop moving. This demo doesn’t use any JavaScript. The effect is made possible by using a virtually infinite transition delay, so that the CSS rules never return to their default state. The figure will be stuck in a transition and will move only when you hold down a button.

Maintaining CSS Style States using “Infinite” Transition Delays31

CSS 3-D clouds32
An experiment in creating 3-D-like clouds with CSS3 transforms and a bit of JavaScript.

CSS3D Clouds33

Animated popover of profile box34
A technique for an animated profile popover menu, built using CSS transitions.

Animated Profile Popover With CSS35

CSS3 scrolling effects36
A library of various scrolling effects, such as curl, wave, flip, fly, skew and helix, created with CSS3 and sometimes with JavaScript to spice up the scrolling behavior.

CSS3 Scroll Effects37

Spin those icons with CSS3
A simple technique for creating a neat effect that spins social icons with the help of a transform and transition when you hover over them. By Tom Kenny.

Scrolling the Z Axis with CSS 3D Transforms38
This article explains how to create the z-scroll effect step by step.

Useful and Practical CSS Techniques

CSS3 Family Tree39
Display organizational data or a family tree using just CSS, without Flash or JavaScript. The markup is very simple and uses just nested lists. Pseudo-elements are used to draw the connectors. It also has hover effects: hover over a parent element and the entire lineage will be stylized. Make sure to check Nicolas Gallagher’s Introduction to CSS Pseudo Element Hacks40.

CSS3 Family Tree41

iOS-style popover42
A simple technique for iOS-style custom checkboxes and a subtle hover effect. The technique is a bit buggy but a good starting point in case you need it. Also, check an excerpt from Lea Verou’s talk on customized checkboxes43 and her article on rule filtering based on specific selector(s) support44.

iOS-style Popover45

Timeline-Style Comments46
Nicolas Gallagher developed a simple and clean technique to present comments in a timeline-alike overview.

Timeline-Style Comments47

CSS Table Grid48
Here is a nice technique for aligning columns in a table, building a “table grid system” of sorts. The idea is to apply classes to col elements in a table’s colgroup; you always leave one col without a class so that it remains fluid and can “soak up” the effects of any breakages elsewhere in the table.

CSS Table Grid 49

Confirmation Feedback Buttons50
This article explains how to create buttons that take on different states depending on the user’s interaction. This type of interaction is especially useful on links such as “Purchase” and “Delete” for which it’s wise to confirm that the user indeed wants to take the specific action. It looks too much like an iTunes button, though.


A calendar in CSS3 and jQuery
A step by step tutorial on how to create a CSS3 calendar with some jQuery animation. Also, check out David Bushell’s responsive calendar demo52.

A clean calendar in CSS3 & jQuery : Finishing Touch

Outdenting properties for debug CSS
Let’s assume you are experimenting with CSS or debugging code. You add properties to figure out how things fit together. How often do you forget to remove all of them? A simple technique for this is to mark a CSS property as a temporary or debugging property by outdenting it and putting it at column 0 in the file. A small trick that can save a lot of time.

Outdenting properties for debug CSS

Show Markup in CSS Comments53
Chris Coyier discusses the idea of including the basic markup that you will be styling as a comment at the top of your CSS file.

Show Markup in CSS Comments54

Selectively displaying data55
This technique shows how to selectively display content in a table and add responsive breakpoints to create an responsive, complex multi-column table.


Remove Margins for First/Last Elements57
If you ever wanted to remove the top or left margin from the first element in a container, or the right or bottom margin from the last element in a container, you can do this by using pseudo-selectors :first-child and :last-child.

CSS Diagnostics Stylesheet58
A very useful snippet to have nearby when you are debugging your CSS or want to find mistakes in HTML.

CSS Diagnostics Stylesheet59

Radio Buttons With Two-Way Exclusivity60
Learn about the :empty pseudo-class selector and jQuery to ensure that when a radio button is clicked, the area is determined and all other radio buttons in that column are turned off, and then is turned back on when clicked on.

Radio Buttons with 2-Way Exclusivity61

Tabbed Navigation With CSS62
An elegant tabbed navigation menu with drop-down menus — no JavaScript, of course. Nothing new, but it’s a quite clean solution.

Tabbed Navigation With CSS63

Menu With Notification Badges With CSS64
A ready-to-use snippet for a navigation menu with notification badges.

Menu with Notification Badges With CSS65

Styling based on sibling count (slides)66
A fantastic overview of the possibilities for styling based on sibling count. Also, make sure to click through the rest of the slide deck — valuable and useful techniques. Make sure to watch Lea Verou’s presentation67 as well.

Styling based on sibling count (Slides)68

Stuff you can do with the “Checkbox Hack”69
Wiht the “checkbox hack,” you use a connected label and checkbox input and usually some other element that you are trying to control. Learn what you can do with it.

CSS3 Facebook Buttons70
Nicolas Gallagher presents a set of CSS buttons for Facebook with different colors and icons. You might want to check Nicolas’ CSS3 Social Sign-In buttons71 as well as Free Social CSS3 Buttons72 that we released earlier as well.

YouTube Popup Buttons73
This article explores the default state of YouTube buttons, which have a very subtle bevel but pop up on :hover and :focus states, eager to be clicked.

YouTube Popup Buttons74

Centering in the Unknown
When it comes to centering things in Web design, the more information you have about the element being centered and its parent element, the easier it is. Chris Coyier shows how to do it when you do not know anything.

Centering in the Unknown

Uncle Dave’s Ol’ Padded Box75
What if you combined background-size: cover and Thierry Koblentz’ intrinsic ratios76. The result is images and video than maintain their aspect ratio; but you can also use background-size: cover to change the aspect ratio and auto-cropping of images with just a little CSS. And the great news is that the property is supported in all modern browsers and matches media-query support exactly.

Micro Clearfix: Force Element To Self-Clear its Children77
Chris Coyier presents various technique for forcing elements to self-clear its children, including Nicolas Gallagher’s short code snippet from 2011.

Micro Clearfix: Force Element To Self-Clear its Children78

Conditional CSS79
A clever technique by Jeremy Keith to load additional content conditionally. The idea is that once a media query fires, the content on the body element is generated and can be detected by a JavaScript, prompting extra content to be loaded.

* { box-sizing: border-box } FTW80
Once you start mixing and matching various units in CSS — such as % for the container width, em for padding and px for border — then you run right into the box-model problem because the width of the container doesn’t include padding and border. We can easily solve this using box-sizing: border-box. And the best part: it is even supported in IE 8.

Multiple Attribute Values81
How to treat multiple values in attributes rather than classes.

Multiple Attribute Values82

Diagonal CSS Sprites83
If you build a sprite on a diagonal, there will be no components below or to the right of the component you are showing. This allows you to make the element using the sprite as wide or as tall as it needs to be, without worrying about exposing the next component. Also, check out David Storey’s article on CSS sprites for the moder era84.

Double Click in CSS85
Is there a way to detect whether a link is tapped or double-clicked on mobile devices? In fact, we can. However, the code requires some hardcore CSS nerdery. Also, check Pure CSS Clickable Events Without :target86 by Ryan Collins.

Replacing the -9999px hack (new image replacement)87
In the beginning was FIR (Fahrner image replacement). Scott Kellum, design director at Treesaver, has now developed this refactored code for hiding text.

Replacing the -9999px hack (new image replacement)88

Fighting the Space Between Inline Block Elements89
A series of inline-block elements formatted like you would normally format HTML will have spaces between them. But we often want the elements to butt up against each other, thus avoiding in the case of navigation) those awkward little unclickable gaps. How do you solve it? Chris Coyier has found a couple of solutions.

CSS pointer-events and a pure CSS3 animating tooltip90
The pointer-events property allows you to specifiy how the mouse interacts with the element it is touching. See what you can do with it and what to consider when using them.

Anatomy of a mobile-first responsive Web design91
An excellent article by Brad Frost about the different considerations for responsive designs. How do you start? What features would you implement and how? What about advanced optimization such as LocalStorage or AppCache? This article provide an excellent guide for getting started with future-friendly responsive designs.


SouthStreet Progressive Enhancement Workflow93
A fantastic article by Scott Jehl and Filament Group in which they present a set of tools that form the core of an advanced responsive design workflow. Definitely useful to keep in mind for your next responsive design project.

Typography And Text With CSS

Advanced CSS techniques provide us with remarkable options to style text in very different ways. Not only can we make the typography look sharper and beautiful on the Web with tools such as Lettering.js94, Kerning.js95 and FitText96; we can also play with glyphs, line breaks, font sizing, truncating text and styling lists. The typography can be adjusted and improved with just a couple of practical approaches.

Interactive Typography effects with HTML597
This techniques uses canvas and JavaScript to create ab interactive typography effect. Users can interact with the glyphs and as designer you can define forms or shapes of the word you’d like to present and how you’d like them to change on hover. Fancy!

Interactive Typography Effects with HTML598

Rocking letters with CSS3 and jQuery99
A simple animation of letters with CSS3 and jQuery.

With Rocking Letters into the New Year100

CSS 3D Typography101
What about integrating stripes into glyphs and adjust the shadow on hover? This technique uses just that, creating a nice, subtle yet engaging visual effect. You can find more interesting type experiments in CSS3type Showcase102., gallery of css text effects103, gallery of css text effects104

CSS3 animation and masking text
Chandler Van De Water had a challenge for Trent Walton after seeing the header animation in his “CSS3 in Transition” post. Noticing that he used a PNG image file with knockout transparency, he wanted to do the same CSS animation with selectable text. Trent was happy to oblige! At the moment, this works only in Safari and Chrome.

CSS3 Animations and Masking Text

CSS mask-image and text
Trent Walton uses background-clip: text and mask-image to implement a subtle gray-flecked texture effect over white text. Hover over the box to see how it degrades in unsupported browsers. Make sure to check out Lea Verou’s “Text Masking: The Standards Way105” as well.

CSS Mask-Image and Text

Fake bolding of Web fonts106
Most browsers simulate bold weights for fonts that do not actually have bold weights. For example, Helvetica Neue Light does not have a bold weight. If you used font-weight: bold with it, browsers would artificially create a bold weight. This article explains how to avoid fake bolding of Web fonts in your designs. By Divya Manian.

Fake Bolding of Web Fonts107

Tomorrow’s Web type today: Say it With a Swash108
The excellent series “Tomorrow’s Web type today” by Elliot Jay Stocks provides insights into what will be possible with Web typography soon, e.g. swashes. In fact, you can already use them today if you include a swash subset of a font to achieve the desired effect.

OpenType Swashes109

Internationalization Language CSS110
A very handy CSS nippet with language-specific quotes. Perfect for international, multilingual projects.

Internationalization Language CSS111

Experiments with background-clip: text112
With the CSS property background-clip: text, we can add a background image to a text element.

Experiments with background-clip: text113

A Call for ::nth-everything
With CSS3, we have positional pseudo-class selectors to help us select a particular element when it has no distinguishing characteristics other than where it is in the DOM in relation to its siblings.

A Call for ::nth-everything

Smooth font using the text-shadow property114
A common problem: is there a way smooth the appearance of glyphs on older machines, especially Windows XP (standard / ClearType rendering mode)? Yes, perhaps. You can give a try the text-shadow-property which adds text-shadow on the top-left and the bottom-right to smooth text.

Smooth font using CSS3 text-shadow property

Fluid Type116
Trent Walton explains his approach to fluid typography in which he asks himself how we can make sure that browser width and typographic settings such as measure or font-size and how should we handle panoramic viewports? An interesting article, especially if you use a typography-out approach in your designs.

Fluid Type117

Pragmatic, practical font sizing in CSS118
Harry Roberts shares his thoughts on how to size fonts more efficiently, writing your CSS differently in the process.

Automatic line breaks with CSS3 hyphens and word-wrap119
Roger Johansson shows how to solve a common problem: as columns of text become narrower, the risk of a single word being longer than the column’s width increases. When that happens, the text normally extends beyond the column. Luckily, CSS offers two properties to improve the situation: word-wrap and hyphens.

Molten leading (or fluid line height)120
When a responsive composition meets a viewport, there are different ways to fill space. Adjusting any one element without also adjusting the others is a recipe for uncomfortable reading, which is one reason why designers have such a difficult time with fluid Web layouts. Tim Brown started a discussion about this issue and provides a couple of techniques for opimization.

Molten leading (or, fluid line-height)121

Prevent Long URL’s From Breaking Out of Container122
Another snippet by Chris Coyier for keeping long URLs within the container. word-wrap, word-break and hyphens properties in use. Also, learn how to Prevent Superscripts and Subscripts from Affecting Line-Height123.

Viewport-sized typography124
This technique uses new CSS values for sizing elements relative to the viewport’s current size: vw, vh and vmin. This allows you to couple the size of, say, a typographic heading to the available screen space. Browser support is quite poor for now, so if you are looking for an alternative, check out FitText.js125.

Viewport Sized Typography126

Minimum paragraph widths in fluid layouts127
This article shows how to solve the problem of paragraphs that are too narrow, by implementing a minimum paragraph width. If the space left a the floating image is less than this width, then the whole paragraph moves below the image.

Styling ordered list numbers128
Roger Johansson shows how we can style ordered list numbers with the :before pseudo element, which can take a counter as a value through the content property. Also check out Chris Coyier’s post129 and Louis Lazaris’ CSS Counters: counter-increment and friends130.

Styling ordered list numbers131

Reverse ordered lists in HTML5132
The reverse attribute allows you to write a descending list of numbered items. Louis Lazaris summarizes what it does and offers a solution to get around a lack of browser support for this attribute.

Reverse Ordered Lists in HTML5133

Preserving white space with CSS3 tab size134
By default, HTML pages ignore anything more than a single space and collapses them. But there are occasions when you’ll want to preserve this space via one of several possible techniques.

Truncating text using only CSS
This code snippet can be used to shorten a line of text using nothing but CSS.

New CSS3 properties to handle text and word wrapping135
Louis Lazaris explains the possibilities and problems of text-wrap, overflow-wrap, line-break and word-break, text-overflow and hyphens. Also worth reading: Kenneth Auchenberg discusses the options for word wrapping and hyphenation136 in combination with dynamic width elements.

End Articles with Ivy Leaf137
A clever technique for adding an extra touch to the end of your articles. :last-child, :after and content in use.

We are used to classical navigation patterns such as tabbed navigation or drop-downs, but we can do a lot more to spice up our navigation menus with pleasant hover effects, often without extra images. Especially if you’d like to add a bit more polish to your portfolio, gallery or e-commerce website, these techniques can be quite useful. What about “over-the top” hover effect for your links,

Circle Navigation Effect With CSS3138
A bubble-like thumbnail preview for your navigation with CSS3.

Circle Navigation Effect with CSS3139

Create a CSS3 Image Gallery With a 3D Lightbox Animation
Tom Kenny has extended a CSS lightbox gallery by adding a few hover effects to the gallery grid itself and a 3D rotation to the lightbox content, all with CSS.

Create a CSS3 Image Gallery with a 3D Lightbox Animation – Inspect Element

3D Gallery With CSS3 and jQuery140
This article shares an experimental gallery that uses CSS 3D transforms. The idea is to create a circular gallery with an image in the center and two on the sides. Because perspective is being used, the two lateral images will appear three dimensional when rotated.

3D Gallery with CSS3 and jQuery141

Creative CSS3 animation menus142
Mary Lou presents a couple of creative navigation menu hover effects. The idea is to have a simple composition of elements, an icon, a main title and a secondary title that will be animated on hover using only CSS transitions and animations.

Creative CSS3 Animation Menus143

How to spice up your menu with CSS3144
Yes, another technique by Tympanus: this tip shows how to spice up a menu by adding a neat hover effect to it. The idea is to slide an image out to the right when the menu item is hovered over.

How to spice up your menu with CSS3145

Create a zoomable user interface146
David DeSandro reveals how to use CSS transforms to create a zoomable user interface similar to that of Beercamp 2011147. In this tutorial, you’ll also learn how to use JavaScript to hijack scrolling to manipulate the zoom.

Create a zoomable user interface with CSS3148

Flipboard Navigation149
An experimental page layout inspired by Flipboard’s interface.

Flipboard Page Layout150

Multi-direction hover151
This element shows different hover effects when hovering from different directions.

Multi-direction hover152

Experimental Hover Effects153
Original and innovative hover effects discovered via Twitter on what appears to be a Japanese code sharing website.

Share JavaScript, HTML5 and CSS154

Over-the-top hover effect155
A CSS and JavaScript technique for creating an “over-the-top” hover effect using the transform-origin transform-style properties as well as 3-D transforms.

Accordion With CSS3156
Mary Lou experiments with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, she creates an accordion that animates the content areas on opening and closing.

Accordion with CSS3157

Expanding Text Areas Made Elegant158
An expanding text area is a good choice when you don’t know how much text the user will write and you want to keep the layout compact. In this article, Neil Jenkins explains how to do this simply. Also, you might want to take a look at Textarea Auto Resize159, another technique by Louis Lazaris, using a hidden clone element.

Filter Functionality With CSS3160
Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a box or radio button. This tutorial explores those CSS3 properties by creating a experimental portfolio filter that toggles the states of items of a specific type.

Filter Functionality with CSS3161

An accessible, keyboard-friendly custom select menu162
A new approach for more accessibility by Roger Johansson. He styles only the select element.

Visual Techniques with CSS

We used to heavily on images and visual elements to create basic visual effects on the Web. With CSS3, we can not only improved the loading speed of the content, but also make our visual elements more flexible and adaptive. Let’s take a look on a couple of examples of how we can achieve that.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements
Tom Kenny shows how to create a simple “stacked” look to a group of images.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements – Inspect Element

CSS3 Unfold Map with Pins
A handy snippet for placing pins on a map. The code looks a bit verbose, so you might want to remove a couple of visual “nice-to-have” elements.

CSS3 Unfold Map with Pins

Turn Images Into Postage Stamps With CSS3 border-image163
Dudley Storey shows a simple way to create a postage stamp from a simple image with border-image.

Turn Images Into Postage Stamps With CSS3 border-image164

Slopy elements with CSS3165
Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. This tutorial shows some simple examples and ways how to create slopy, skewed elements with only CSS.

Slopy Elements with CSS3166

CSS Flip Clock
A code snippet for displaying a flip clock-alike time display using CSS.

CSS Flip Clock

CSS3 Image Styles167
When applying a CSS3 inset box-shadow or border-radius directly to an image element, the browser won’t render the CSS style perfectly. Here’s a quick tutorial on how to use jQuery to make perfect rounded corner images dynamically. And check out the second part168.

CSS3 Image Styles – Part 2169

Creating Reusable and Versatile Background Patterns170
A simple tutorial on how to create reusable background patterns with Photoshop and CSS.

Creating Reusable & Versatile Background Patterns171

Diagonal Graph Paper Gradient172
A very nice CSS technique for creating diagonal graph paper gradients using repeating-linear-gradient property in CSS.

Diagonal Graph Paper Gradient173

Tucked Corner Effect
A clean CSS technique for producing tucked corners using the pseudo-elements :after and :before as well as data URI-coded images. Also, check out Corner Ribbon Effect with CSS174.

CSS Tucked Corner Effect

Scrolling… shadows!175
An original technique by Roman Komarov to create CSS-only shadow-scrolling effect using background-attachment: local. Developed by Lea Verou, inspired by Roman Komarov.

Scrolling shadows176

Multi-colored CSS progress bars177
A quite verbose yet CSS-only solution for displaying multi-colored progress bars. It’s linear-gradient in action! Also, check out CSS3 progress bars178 that display data inside localized leaderboards for the new analytics platform at G5. They are lightweight and require no JavaScript or images.

Multi-colored CSS Progress Bars179

CSS3 breadcrumbs180
Learn how to create your own cool CSS3 breadcrumbs. Also, check the CSS Breadcrumbs Example which uses only CSS linear gradients.

CSS3 breadcrumbs181

Adobe-like Arrow Headers182
A detailed article about the technique Adobe uses to create header bars for modules on its website.

Adobe-like Arrow Headers183

Adding a Top Shadow to a website184
If you ever wanted to add a shadow along the top edge of the website, you can easily do it by styling body:before.

Adding a Top Shadow to a website185

A flexible shadow with background-size186
It’s amazing what you can achieve when you combine different techniques—even when facing a challenge such as a flexible shadow. If you had to create an adaptive shadow effect, how would you create it?


Star Ratings With Very Little CSS188
Chris Coyier shows how to code star ratings done with very little CSS code and lots of a bit of Unicode madness.

Convert Images to Black And White With CSS189
Filters allow us to visually process an image in the browser without needing to go through PhotoShop or use cycle-intensive, script-heavy methods in JavaScript or PHP. CSS3 filters are broadly supported in the most recent versions of Firefox and Chrome, and we can gain support in older versions and alternative browsers — even IE — by using a combination of techniques.


Punching Holes With CSS191
A clever and simple technique to make a block in a container appear transparent and display a background image. Also, take a look at Lea Verou’s accessible star rating widget with CSS192.

Simple Styles for Horizontal Rules193
With the help of a few contributors, Chris Coyier put together this page of simple styles for horizontal rules.

Simple Styles for Horizontal Rules194

Optimizing Graphics With CSS Masks195
In this video, Aaron Bushnell shows how CSS masks can help make the process easier on you and how to make sure you have fallbacks in place for non-Webkit browsers.

Browser-Specific CSS Hacks196
A useful, comprehensive list of browser-specific CSS hacks for targeting legacy browsers. Unfortunately, most of us will need them quite often.

Last Click Link

CSS3 Lasers!197
Shows a laser shot effect when hovering over an element.

CSS3 Lasers!198

The DOM Tree199
This DOM tree is generated via JavaScript every time you visit the page, so you’ll never see the same one twice. All of the forms are filled with holiday greetings in a variety of languages. CSS3 3D transforms are used to position and rotate, via translate3d() and rotate3d() respectively, the elements when the page loads. The infinitely looping rotation on the tree is controlled by an infinitely looping CSS3 animation. Just one word: crazy!

DOM Tree200

What’s Your Favourite Technique? Link

We’d love to know your experience with some of the featured techniques, or perhaps you’ve stumbled upon another interesting CSS technique recently? Let us know in the comments to this post!

What kind of techniques would you like to see featured on SmashingMag?201

(jvg) (al) (vf) (ml)

Footnotes Link

  1. 1 /2011/04/18/powerful-new-css-techniques-and-tools/
  2. 2
  3. 3
  4. 4
  5. 5 #transitions
  6. 6 #practical
  7. 7 #typography
  8. 8 #navigation
  9. 9 #visual
  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 /2012/05/15/zocial-button-set-72-css3-buttons/
  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
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134
  135. 135
  136. 136
  137. 137
  138. 138
  139. 139
  140. 140
  141. 141
  142. 142
  143. 143
  144. 144
  145. 145
  146. 146
  147. 147
  148. 148
  149. 149
  150. 150
  151. 151
  152. 152
  153. 153
  154. 154
  155. 155
  156. 156
  157. 157
  158. 158
  159. 159
  160. 160
  161. 161
  162. 162
  163. 163
  164. 164
  165. 165
  166. 166
  167. 167
  168. 168
  169. 169
  170. 170
  171. 171
  172. 172
  173. 173
  174. 174
  175. 175
  176. 176
  177. 177
  178. 178
  179. 179
  180. 180
  181. 181
  182. 182
  183. 183
  184. 184
  185. 185
  186. 186
  187. 187
  188. 188
  189. 189
  190. 190
  191. 191,html,css,js/
  192. 192
  193. 193
  194. 194
  195. 195
  196. 196
  197. 197
  198. 198
  199. 199
  200. 200
  201. 201

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    patrick stadler

    June 21, 2012 6:16 am

    crazy men! thanks for all those links. we are considering some 3d clouds in our project :)

  2. 2

    Fantastic list! I remember the buzz Paperfold CSS and CSS3 scrolling effects caused when they came out.

    Another CSS/JS technique which impressed me most and which you missed was:
    Real Shadow – A jQuery Plugin That Casts Photorealistic Shadows (

    Otherwise, great work, keep Smashing :-)

  3. 3

    Cameron Baney

    June 21, 2012 6:36 am

    Wow, great showcase. I can see myself using a lot of these techniques in various projects.

  4. 4

    Saurabh Shah

    June 21, 2012 7:36 am

    This is amazing post as usual… Love all these techniques. Will try them soon on upcoming projects. :)

  5. 5

    Jonathan Jeter

    June 21, 2012 7:41 am

    What a great compilation of css/javascript techniques! I will definitely be saving/sharing this one. Can’t wait for the day when modern browser acceptance is to the point that we can use most of these in the wild.

  6. 6

    Very good showcase…All the reference sites are very useful for developer. Keep posting like this..

  7. 7

    Harj Manhas

    June 21, 2012 8:16 am

    Lots of inspiration for the portfolio redesign!

  8. 8

    Fantastic. Thank you for an awesome and inspiring roundup !!

  9. 9

    Salvatore Escalante

    June 21, 2012 10:39 am

    These post have been very useful! thank you for sharing!!

  10. 10

    Honey to my eyes, u are the Masters…

  11. 11

    Incredible, this is the first article in a long while that actually had me check it out entirely!

  12. 12

    Nobody seems to be saying it so I will. Smashing Magazine, like most of what’s on the web, is becoming more and more like a landfill for the novelty-obsessed. Novelty addicts here, like everywhere else, get their fix from the spoon-fed “latest, newest, can’t-do-withouts”.

    Smashing Magazine has become the tabloid of web design novelty. Whatever you publish is soon eclipsed and eminently forgettable.

    • 13

      Yes, if most of these techniques are used “straight out of the box” yes, they’re novelty. If what a person is looking for is a copy-and-paste solution to real UI scenarios, many of these are downright silly.

      But Smashing is targeted to developers and designers, people who shouldn’t really be copying list examples verbatim. If you look at these as techniques that can be tweaked, it’s easy to see how this is a good list.

    • 15

      Luke Burford

      June 28, 2012 3:15 pm

      Although I’d ease back on the ‘tude a little , I agree with what you’re saying here.

      Web is just awash with heavily ‘sponsored’ WordPress blogs knocked up to showboat novelty, often webkit-specific, processor-heavy effects. Very little of this is ultimately usable on the kind of real-world projects most independent / small studio designers are commissioned for; where their clients’ limited budgets are better spent on good iA and solid problem solving .

      I actually think SM has returned a bit to some really thought provoking, industry wide ranging posts recently, so I’d reject the idea it’s going down a ‘tabloid’ route.

      This post in particular though, a lot seemed lifted from Codrops et al; that’s fine and deserved exposure for those sites / authors who take time to break new ground and share their findings.

      But SM can attract the cream of the crop in terms of authors so I’m more interested in thought pieces and stuff that’s really new, ‘A List Apart’ quality. SM needs to outgrow lists / roundups for me too.

      • 16

        Vitaly Friedman (editor-in-chief of Smashing Magazine)

        June 30, 2012 11:34 am

        Dear Luke,

        Thank you very much for your feedback. A couple of years ago we’ve made a very clear decision to move away from round-ups toward more though-provoking and valuable quality articles. We are following this direction in every single article on Smashing Magazine. However, I believe that having occasional round-ups (e.g. once-twice a year on recent CSS techniques) is very useful and valuable for many designers and developers in the community, and it also supports hard-working developers out there who come up with valuable techniques. If a round-up is thoroughly curated then it does have a value. This particular round-up took one week of thorough selection plus over 6 months of tagging, classification, evaluating and reviewing.

        I respectfully disagree with your statement that most of these techniques can’t be used in regular projects. Please check the list and some of the techniques again. I think many of them are extremely valuable and actually can be used in almost every single project.

        Also, the feedback from our community for these occasional round-ups has been very strong. We are not going to publish round-ups every week, but I think that they deserve their place and deliver value if they are done well. We are working hard to make sure that whenever we publish a round-up, it’s actually very valuable: not generic, not random, but well prepared and presented in the best interests of the audience. This attitude in our editorial team will not change in the future. And no, we definitely will not go the “tabloid” route.

        • 17

          I love these lists! Please, don’t take them away!

          I frequently check Smashing Magazine for lists like these, and when I find one, much of the article’s content ends up in my sites.

          Don’t listen to the trolls; Smashing Magazine has never been anything like a tabloid. It’s way up there on my list of favorite sites – next to giants like the New Yorker and smaller sites like Codrops.

        • 18

          I halfly agree with the critique. Round-Ups are okay IMO but it’s simply too much and too low-quality stuff per round-up.

          these are like 200 links and a loooooot of the techniques are redundant. transition a bit here, rotate a little there, and some animation on top. in my opinion it would be awesome if the round-up-articles had a little more preselection. often times it seems you just went through the last 2-3 months of oftenly retweeted css/js-links and done.

          warning, highly opinionated:
          on top of that, a lot of the techniques look really ugly/amateurish. it seems that css-animation is evolving into the new . the more stuff is flying around the better. with this post you encourage a lot of developers to go nuts and animate everything.

          my perception of the message of this post is: “if there’s no animation on hover, you are so 2010!”

          • 19

            I would agree with Owen, I think these list can be quite useful in order to highlight the possibilities that now exist in CSS3. I am new to web development so I find SM a great resource for getting to know what the capabilities are. However I would agree with Philip, I don’t think that these tutorials should just be taken as they are and applied for the sake of it. More as a point of inspiration.

  13. 20

    Amazing , really like this :X:X:

  14. 21

    Nice one! I really like scrolling lists with CSS 3D effects.

  15. 22

    Great collection for everyone.. keep continue posting like that :-)

  16. 23

    Woow woow woow!
    What a impressive selection! Absolutely gob smacked….
    I played with CSS3 Background-Clip Text in the past too, you can see this example

  17. 24

    Awesome collection. Thanks Smashing.

  18. 25

    Nice inspiration for geeks! :D

    I’ve also created two demos connected with CSS.
    – css animals:
    – domo in 3d:

  19. 26

    Excellent round-up/editorial – thanks for the efforts guys!

  20. 27

    Great compilations! Been trying to find one of the techniques here.
    Thanks Smash !

  21. 28

    Great collection of information, love it!
    CSS is evolving so much. I look forward to see what’s next!

    And, as always, I love 90% of the articles at Smashing Mag.


  22. 29

    Wow, what an amazing resource, thanks!

  23. 30

    Awesome. Thank you for collection of such a wonderful techniques…I can see myself using lot of techniques for future projects…Keep Smashing!

  24. 31

    Sound good!!!
    CSS3 Animations is not working in ff13

  25. 32

    Sam Wightwick

    June 25, 2012 2:38 am

    Some of these are amazing! Love the clouds generator!

  26. 33

    One of the best posts on new techniques I have seen in a long time… some truly amazing inspiration many which I have not seen in the past. I can not wait to try out some of the css and js on my upcoming projects.

  27. 34

    Impressive. Well done Smashing

  28. 35

    This is amazing stuff. Really good for inspiration.
    The stuff we can do with css nowadays is impressive! Great post!

  29. 36

    Sedat Kumcu

    June 25, 2012 1:37 pm

    Woow. They’re great list. Thanks for me.

  30. 37

    Dylan Valade

    June 27, 2012 12:00 pm

    I know it takes forever to make all of those screenshots but those are what make me bookmark this article. When I come back in 3 months and need it for a project those graphics saves me time. Please keep rolling out articles like this. 3D clouds is incredible.

  31. 38

    Really nice list, with lots of inspiration vor various projects.
    But one name dominates this list, and it is Codrops. They are really creating the most inspirational things on the web(both jQuery and CSS3). Mary Lou and the team really know their thing.

    I’ve been following them from the start, and now there is no list on the web that doesn’t include some of their tutorials.

  32. 39

    Amazing !!! I liked very much but does older browser support these stuffs… If no.. what would be the solution.. Please suggest..

  33. 40

    Jayant Bramhankar

    August 16, 2012 3:47 am

    Awesome collection,

    I like tree css3-family-tree and gonna use it.


  34. 41

    Cool techniques, looking to work in IE7-9 and for DNN DDR menu, slide menu to left to expand right panel work area.

  35. 42

    Jquery is mostly used by many designer to give a look like like magic to websites.Here’s a example to make your web page content display a fade in page loading effect.This will give a better look to your page.Lets See how this can be done with code combination.

    you can easily check the example of page load with jquery


  36. 43

    Its really to cool site wonderful post thanks for sharing. Strongly Appreciations from my site. :)

  37. 44
  38. 45

    I am a regular reader of smashing magazine. Really great inspiration to newbies .


↑ Back to top