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 New CSS Techniques and Tools

The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, analyzed, curated and feature latest useful resources for your convenience, so you can use them right away or save them for future reference.

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, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use HTML5, JavaScript, or JavaScript-libraries as well. Thanks to all featured designers and developers for inspiring, hard work.

Further Reading on SmashingMag: Link

CSS Techniques Link

Rotational Sliders4
Eric Meyer shares six of his animated transforms that are capable of sliding around to a particular extent with non-centered transform origins.

Rotational Sliders5

Generating Organic Randomness with Prime Numbers and CSS6
At first, you may be wondering why the heck is Alex Walker talking about cicada’s and Web design. Once taking a closer look, a sort of connection between the two evolves and a ‘cicada principle’ is born.

The Cicada Principle and Why It Matters to Web Designers7

CSS3 3D Hologram8
Being inspired by holographic effects that can be achieved with HTML/CSS, Hakim El Hattab has developed his own 3D box which alters perspective depending on device orientation. Note that this requires a webkit browser and has only been tested on iPhone. Also make sure to visit more of Hakim’s CSS/HTML5 experiments9.

Hakim / CSS3 3D Hologram10

Checkerboard, striped & other background patterns with CSS3 gradients11
You’re probably familiar with CSS3 gradients by now, including the closer to the standard Mozilla syntax and the verbose Webkit one. I assume you know how to add multiple color stops, make your gradients angled or create radial gradients. What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more. Also, check out Lea’s CSS3 Patterns Gallery</a.12

Checkerboard, striped & other background patterns with CSS3 gradients13

CSS3 Keyboard14
Click in the box and start typing on your computer’s keyboard. Cleverly developed by Dustin Cartwright and Dustin Hoffman. You’ve got to respect the amount of time and effort which went into producing this demo.

Keyboard15

CSS3 Progress Bars16
A couple of nice progress bars created by Chris Coyier that use no images — just CSS3 fancies. In browsers that do not support CSS3, these progress bars will look more simplified.

CSS3 Progress Bars | CSS-Tricks17

Hover on “Everything But”18
A tutorial by Chris Coyier which shows us how easy adding a hover state to an element can be. In this case, the hover state is applied to everything but the element actually being hovered over.

Hover on “Everything But”19

Creating a Sphere With 3D CSS20
With CSS3’s 3D trans­forms it’s possible to cre­ate a sphere-like object, albeit with many elements. Paul Hayes shares his version of a 3D CSS sphere (works in the latest Safari and iOS) and provides us with the coding needed.

Creating a sphere with 3D CSS21

CSS3 Planetarium22
This demo highlights leading edge CSS3 and HTML5 features that Mozilla Firefox and the open web community push into modern Web browsers.

Firefox 4 Demos: Awesome CSS3 Planetarium23

Natural Object-Rotation with CSS3 3D24
A tutorial by Dirk Weber that teaches us how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. By adding some Javascript, we can make the object freely rotatable in 3D space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.

Natural Object-Rotation with CSS3 3D25

CSS Drop-Shadows Without Images26
Nicolas Gallagher shares presents his CSS drop-shadows without any images.

CSS drop-shadows without images27

Incrementable Length Values in Text Fields28
Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it.

Incrementable length values in text fields29

Beveled Corners & Negative Border-Radius with CSS3 Gradients30
Beveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10.

Beveled corners & negative border-radius with CSS3 gradients31

Flexible Height Vertical Centering With CSS, Beyond IE732
Roger Johansson shares his thoughts on how to improve centering an element both horizontally and vertically with the display:table alternative.

Flexible height vertical centering with CSS, beyond IE733

Coding up a semantic, lean timeline34
This article tells you how to create a semantic lean timeline.

Coding up a semantic, lean timeline35

CSS Border Tricks with Collapsed Boxes36
These border tricks tricks will help you to display content outside of the content box, over borders, without the use of images, CSS3 gradients or extraneous markup.

CSS Border Tricks with Collapsed Boxes37

Quick Tip: Nonintrusive CSS Text Gradients38
Jeffrey Way shows some ways for creating pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.

Quick Tip: Nonintrusive CSS Text Gradients39

Bokeh with CSS3 Gradients40
Divya Manian uses the CSS gradients and shows the results of his work on a project which uses a bunch of circles as a decorative background.

Bokeh with CSS3 Gradients41

Different Transitions for Hover On / Hover Off42
Chris Coyier tries to acchieve “different transitions on mouseenter and mouseleave”, but he isn’t using JavaScript here; we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates.

Different Transitions for Hover On / Hover Off43

Styling children based on their number, with CSS344
Lea Verou shows how to style children of elements based on their total number (that is, their total count).

Styling children based on their number, with CSS345

CSS Modal46
Using CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more special. The problem: when you hit the “Back”-button after the modal has popped up and was closed, you’ll see the modal again. But maybe you’ll come with a way to fix it?

CSS Modal47

Rotating Feature Boxes48
The full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation.

Rotating Feature Boxes49

When and How to Visually Hide Content50
Visually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). Other exaples about using the Visually Hide Content are shown in this article.

When and How to Visually Hide Content51

How to avoid common CSS3 mistakes52
The new features of CSS3 bring with them complexity and new things for us to screw up. This article will help keep us in check as we start using these new features.

How to avoid common CSS3 mistakes | Feature | .net magazine53

Introduction to CSS Escape Sequences54
Escape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules. In this article Mert Tol shows how to use these sequences.

Introduction to CSS Escape Sequences | Mert TOL55

Wrapping Long URLs and Text Content with CSS56
To wrap long URLs, strings of text, and other content, you can just apply a carefully crafted chunk of CSS code to any block-level element .

CSS57

CSS Generated Content
Trevor Davis shows on some examples what you can do with the CSS generated content.

My New Best Friend: CSS Generated Content | Viget Inspire

Controlling width with CSS3 box-sizing58
An incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not. It makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths.

Controlling width with CSS3 box-sizing59

Revisit Hardboiled CSS3 Media Queries
Shi Chuan takes a close look at boilerplates and helps us understand the math we need to tweak the width required for a good resolution to any particular device.

iPad Orientation CSS60
Keith Chu revises Cloud Four’s work and finds a way to alleviate extra HTTP requests, not iPad-specific as well as lack of reusability. In this post, he shares with us his proposed revision to the iPad orientation CSS.

CSS Value Lengths, Times, Frequencies and Angles61
In this article the authors go over all the math type units that can be applied as property values in CSS.

CSS Tools Link

320 and up62
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

320 and up63

CSS3 Generator – By Eric Hoffman and Peter Funk64
This generator was proudly designed by Eric Hoffman and coded by Peter Funk.

CSS3 Generator - By Eric Hoffman and Peter Funk65

CSS Pattern Generator66
Patternify is a simple pattern generator that enables you to not only build your patterns online, but export them with the base64 code, so you don’t even need an image file anymore. Just include the code in your CSS and you’re ready to go. Created by Sacha Greif.

CSS Pattern Generator67

Griddle.it – Web page alignment made easy68
A clean and simple way to help align your layouts. No complex grid frameworks necessary.Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

Griddle.it - Web page alignment made easy69

The 1140px Grid: Fluid down to mobile
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

The 1140px Grid: Fluid down to mobile

Fighting the @font-face FOUT70
Paul Irish’s 2011 update for the @font-face FOUT issue. Good news: Firefox 4 has no FOUT, IE9 does, and FOUT-b-GONE71 will help you out with that.

FOUT-b-gone72

CSS3 Github Buttons73
CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.

CSS3 Buttons | Simple CSS3 framework for creating GitHub style button links74

CSS3 Facebook Buttons75
CSS3 Facebook Buttons

CSS3 Facebook Buttons76

Minimee77
On the Internets, speed is everything – which means that when it comes to CSS & Javascript files, size DOES matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files svelte.

Adapt.js - Adaptive CSS78

Live.js79
one script closer to designing in the browser.

Adapt.js - Adaptive CSS80

Bootstrap.less81
Bootstrap is a pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development.

Adapt.js - Adaptive CSS82

Animatable: Create CSS3 animations and advertising for Webkit browsers83
Animatable is the easy way to create CSS3 animations and advertising for Webkit browsers on any platform or device — including Android, BlackBerry, iOS and WebOS.

Animatable | Create CSS3 animations and advertising for Webkit browsers84

Ceaser: CSS Easing Animation Tool85
Ceaser is an CSS Easing Animation Tool.

Ceaser - CSS Easing Animation Tool86

Shower
This is provided without warranty, guarantee, or much in the way of explanation.

Shower

CSS Pivot87
This tool allows you to add CSS styles to any website, and share (and adjust) the result with a short link.

CSS Pivot88

Roots WordPress Theme89
Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs.

Roots WordPress Theme90

Free Online CSS3 Typeset Style Generator91
An advanced generator of CSS buttons; the tools allows you to define font and color variations, shadows, borders, corners etc.

Free Online CSS3 Typeset Style Generator92

CSSPrefixer
You hate writing vendor prefixes for all browsers? The CSSPrefixer does it for you.

CSSPrefixer

Type-a-file93
This tool will give your Web typography a head start. Type-a-file is essentially a small collection of CSS stylesheets with heavy focus on rich and beautiful typography. The tool uses Typekit to preview the stylesheets, so if you have a Typekit-account, you could purchase the font license and have exact the same typography on your website.

Type-a-file94

A Best Practice Baseline for Your Mobile Web App95
Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

HTML5boilerplate96

Code Beautifier97
This tool allows you to format, clean up and optimize your stylesheets.

Adapt.js - Adaptive CSS98

Markup Generator99
Markup Generator is a simple tool created for HTML/CSS coders that are tired of writing boring frame code at the very beginning of slicing work.

Adapt.js - Adaptive CSS100

CSS Sprite Generator101
This tool allows you to create and maintain your CSS sprites.

Adapt.js - Adaptive CSS102

Respond103
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Adapt.js – Adaptive CSS104
Adapt.js simply checks the browser width, and serves only the CSS that is needed, when it is needed.

Firmin, a JavaScript animation library using CSS transforms and transitions105
Firmin is a JavaScript animation library that uses CSS transforms and transitions to create smooth, hardware-accelerated animations.

Command-line CSS spriting106
The author shows, how to create CSS sprites from the command line alone.

Last Click Link

Code Standards
This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices.

Code Standards

How to Manage CSS Explosion107
A very useful thread on StackOverflow on how to keep CSS files organized and clean.

How to Manage CSS Explosion108

(vf) (ik)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2012/06/powerful-new-cssjavascript-techniques/
  2. 2 https://www.smashingmagazine.com/2016/02/the-flexbox-reading-list/
  3. 3 https://www.smashingmagazine.com/2008/12/50-really-useful-css-tools/
  4. 4 http://meyerweb.com/eric/css/tests/css3-trans-an/transform-sliders.html
  5. 5 http://meyerweb.com/eric/css/tests/css3-trans-an/transform-sliders.html
  6. 6 http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/
  7. 7 http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/
  8. 8 http://hakim.se/experiments/css3-hologram
  9. 9 http://hakim.se/experiments
  10. 10 http://hakim.se/experiments/css3-hologram
  11. 11 http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
  12. 12 http://leaverou.me/css3patterns/
  13. 13 http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/
  14. 14 http://dl.dropbox.com/u/921159/Keyboard/page.html#
  15. 15 http://dl.dropbox.com/u/921159/Keyboard/page.html#
  16. 16 http://css-tricks.com/css3-progress-bars/
  17. 17 http://css-tricks.com/css3-progress-bars/
  18. 18 http://css-tricks.com/hover-on-everything-but/
  19. 19 http://css-tricks.com/hover-on-everything-but/
  20. 20 http://www.paulrhayes.com/2011-02/creating-a-sphere-with-3d-css/
  21. 21 http://www.paulrhayes.com/2011-02/creating-a-sphere-with-3d-css/
  22. 22 http://hacks.mozilla.org/2011/03/css3-planetarium/
  23. 23 http://hacks.mozilla.org/2011/03/css3-planetarium/
  24. 24 http://www.eleqtriq.com/2010/11/natural-object-rotation-with-css3-3d/
  25. 25 http://www.eleqtriq.com/2010/11/natural-object-rotation-with-css3-3d/
  26. 26 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  27. 27 http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  28. 28 http://leaverou.me/2011/02/incrementable-length-values-in-text-fields/
  29. 29 http://leaverou.me/2011/02/incrementable-length-values-in-text-fields/
  30. 30 http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
  31. 31 http://leaverou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
  32. 32 http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/
  33. 33 http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/
  34. 34 http://csswizardry.com/2011/03/coding-up-a-semantic-lean-timeline/
  35. 35 http://csswizardry.com/2011/03/coding-up-a-semantic-lean-timeline/
  36. 36 http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes
  37. 37 http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes
  38. 38 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-nonintrusive-css-text-gradients/
  39. 39 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-nonintrusive-css-text-gradients/
  40. 40 http://nimbupani.com/bokeh-with-css3-gradients.html
  41. 41 http://nimbupani.com/bokeh-with-css3-gradients.html
  42. 42 http://css-tricks.com/different-transitions-for-hover-on-hover-off/
  43. 43 http://css-tricks.com/different-transitions-for-hover-on-hover-off/
  44. 44 http://leaverou.me/2011/01/styling-children-based-on-their-number-with-css3/
  45. 45 http://leaverou.me/2011/01/styling-children-based-on-their-number-with-css3/
  46. 46 http://www.paulrhayes.com/2011-03/css-modal/
  47. 47 http://www.paulrhayes.com/2011-03/css-modal/
  48. 48 http://css-tricks.com/rotating-feature-boxes/
  49. 49 http://css-tricks.com/rotating-feature-boxes/
  50. 50 http://designfestival.com/when-and-how-to-visually-hide-content/
  51. 51 http://designfestival.com/when-and-how-to-visually-hide-content/
  52. 52 http://www.netmagazine.com/features/how-avoid-common-css3-mistakes
  53. 53 http://www.netmagazine.com/features/how-avoid-common-css3-mistakes
  54. 54 http://www.merttol.com/articles/web/code/introduction-to-css-escape-sequences.html
  55. 55 http://www.merttol.com/articles/web/code/introduction-to-css-escape-sequences.html
  56. 56 http://perishablepress.com/press/2010/06/01/wrapping-content/
  57. 57 http://perishablepress.com/press/2010/06/01/wrapping-content/
  58. 58 http://www.456bereastreet.com/archive/201104/controlling_width_with_css3_box-sizing/
  59. 59 http://www.456bereastreet.com/archive/201104/controlling_width_with_css3_box-sizing/
  60. 60 http://catharsis.tumblr.com/post/501657271/ipad-orientation-css-revised
  61. 61 http://www.standardista.com/css3/css-values-lengths-times-frequenc-angles
  62. 62 http://stuffandnonsense.co.uk/projects/320andup/
  63. 63 http://stuffandnonsense.co.uk/projects/320andup/
  64. 64 http://www.css3.me/
  65. 65 http://www.css3.me/
  66. 66 http://www.patternify.com/
  67. 67 http://www.patternify.com/
  68. 68 http://griddle.it/
  69. 69 http://griddle.it/
  70. 70 http://paulirish.com/2009/fighting-the-font-face-fout/#update2011
  71. 71 http://www.extensis.com/en/WebINK/fout-b-gone/
  72. 72 http://www.extensis.com/en/WebINK/fout-b-gone/
  73. 73 http://css3buttons.michaelhenriksen.dk/
  74. 74 http://css3buttons.michaelhenriksen.dk/
  75. 75 http://nicolasgallagher.com/lab/css3-facebook-buttons/
  76. 76 http://nicolasgallagher.com/lab/css3-facebook-buttons/
  77. 77 http://johndwells.com/software/minimee
  78. 78 http://johndwells.com/software/minimee
  79. 79 http://livejs.com/
  80. 80 http://livejs.com/
  81. 81 http://markdotto.com/bootstrap/
  82. 82 http://markdotto.com/bootstrap/
  83. 83 http://animatable.com/
  84. 84 http://animatable.com/
  85. 85 http://matthewlein.com/ceaser/
  86. 86 http://matthewlein.com/ceaser/
  87. 87 http://www.csspivot.com/
  88. 88 http://www.csspivot.com/
  89. 89 http://www.rootstheme.com/
  90. 90 http://www.rootstheme.com/
  91. 91 http://www.sciweavers.org/i2style
  92. 92 http://www.sciweavers.org/i2style
  93. 93 http://type-a-file.com/
  94. 94 http://type-a-file.com/
  95. 95 http://html5boilerplate.com/mobile/
  96. 96 http://html5boilerplate.com/mobile/
  97. 97 http://codebeautifier.com/
  98. 98 http://codebeautifier.com/
  99. 99 http://lab.xms.pl/markup-generator/
  100. 100 http://lab.xms.pl/markup-generator/
  101. 101 http://spritegen.website-performance.org/
  102. 102 http://spritegen.website-performance.org/
  103. 103 https://github.com/scottjehl/Respond
  104. 104 http://adapt.960.gs/
  105. 105 http://extralogical.net/projects/firmin/
  106. 106 http://www.phpied.com/command-line-css-spriting/
  107. 107 http://stackoverflow.com/questions/2253110/how-to-manage-css-explosion
  108. 108 http://stackoverflow.com/questions/2253110/how-to-manage-css-explosion

↑ 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

    Ingenious solutions to problems that don’t exist.

    0
    • 2

      Web Programming 360

      April 18, 2011 12:25 pm

      Someone either did not read the article :( or doesn’t know anything about CSS.

      0
    • 3

      How do you know problems don’t exist? Are you the head of every single project ever projected?

      Also innovation and ideas don’t need problems to surface. That mentality is for unseasoned developers who believe “what ain’t broken needn’t fixing”, unfortunatly this is a constantly evolving environment and yes, it needs to accompany the times.

      Great comment. Million dollar value.

      0
  2. 4

    Vladimir Carrer

    April 18, 2011 7:08 am

    Really nice collection of new CSS Tools. I recently created Child Selector System – CSS Framework http://code.google.com/p/child-selector-css-system/ that can be potentially added to this list.

    0
  3. 5

    WOW that’s a LOT of info!

    Good stuff, just a bit overwhelming. Might be best if you don’t post any more articles this month. ;)

    0
  4. 6

    Good overview but indeed way too long. I allways find such long overviews and lists to beat their purpose. They even induce stress. You don’t want to read it to the end yet you are afraid to miss something, so it puts on a reading burden. Why not the 10 best new techniques and call it a day? That makes things manageable. People can read it and dive deeper into individual entries, perhaps even try some things. Now few will, because there are a hundred to go through.

    You’re supposed to make the task of informing ourselves easier, not harder.

    0
    • 7

      Vitaly Friedman

      April 18, 2011 9:00 am

      Ferdy, CSS round-ups like this one are published once every 4 months or so. We think it’s better to publish a “state of the art” piece every now and again rather than publishing 10 best new techniques every week. So you could bookmark it and get back to the page in a couple of days when you have more time.

      I do see your point, however. Let me see what I can do to keep these round-ups shorter next time.

      0
      • 8

        I like current form of roundup.

        Even if I cannot enjoy entire article at once, I know I can check it later.
        If some awesome example was half-remembered, I know exactly where it can be found (searching it over 10 recent short articles would be super-annoying).

        Internet has a lot of shorter blog articles like “latest 5 clever front-end tricks”, this wide scope approach makes SM content more unique.

        0
        • 9

          frontendesign

          April 19, 2011 7:37 am

          I totally agree, that’s what make (these type of loooong and informative articles) Smashing Magazine, unique. Just bookmark one Loooong article and you are done , Cheers :)

          0
      • 10

        Yesterday this post included a link to a fullscreen photo background technique but it seems to have been removed from the article today. Do you still have that link?

        0
      • 11

        Excellent, sound and imaginative work.
        The Longer the better!

        0
      • 12

        Just to add my $.02, I like these for their reference purpose, but agree that for reading purposes, it’s too long. Perhaps a compromise could be implemented somehow? For example, maybe take the top couple in each category, then provide a way to view more? Or just some simple way to see “the best,” then “the rest”?

        0
      • 13

        What about splitting it into two posts:
        Powerful new CSS techniques
        Powerful new CSS tools

        0
      • 14

        OrganizedFellow

        January 13, 2012 10:23 am

        I actually enjoy the length of the articles.
        But I would like to see a way to bookmark or link to a particular subject in the long list. Maybe some anchor links?
        Maybe a small expandable accordion Table Of Contents linking to the anchors?
        That way it would be simpler to get back to the article without losing ones place.

        0
    • 15

      Gabe da Silveira

      April 18, 2011 3:13 pm

      I feel you, but respectfully disagree. I like the comprehensive roundup. It serves as a good reference for years to come. If the curation was more aggressive then I would actually have to spend more time aggregating other resources. Keep up the good work guys, this is awesome.

      0
  5. 16

    Great listings, I see at least a handful of techniques applicable to my latest projects. Thanks!

    0
  6. 17

    So much awesomeness. I need to find a way to way to implement a bunch of these things I’m seeing for the first time.

    0
  7. 18

    I’ve recently become very intimated by all the new CSS stuff, but you break it down well. I don’t mind that the article is really long… if anything, its easier for me because I can track down all of this stuff later from a single page.

    Thanks!

    0
  8. 19

    Found some gems in that post. Some great pieces to play with for some future projects.

    0
  9. 20

    Simply fantastic overview from the current state of CSS ! Rockin’ good, thanks !

    0
  10. 21

    Kevin Haggerty

    April 18, 2011 8:14 am

    Wow very long, exhaustive list of recent CSS developments. You forgot the first CSS3 Animation Designer, Edit Room. Live development prototype available at http://www.edit-room.com/ by yours truly. ! Webkit only supported so far, let me know when other browser support CSS3 Animations, and they will be supported as well.

    0
  11. 22

    Nils Rasmusson

    April 18, 2011 8:15 am

    Excellent resources. Thanks for gathering them together. Bookmarked.

    0
  12. 23

    Vitaly and Team,

    Keep up the great work. And thanks for being so thorough.

    0
  13. 24

    Anthony Calzadilla

    April 18, 2011 9:20 am

    A little “Behind the Scene’s” of the Mad Manimation used on animatable http://www.anthonycalzadilla.com/2011/04/behind-the-scenes-of-mad-manimation/

    0
  14. 25

    awesome, inspiring collection. keep ’em coming.

    0
  15. 26

    Darren Coxall

    April 18, 2011 9:58 am

    Fantastic collection. I learned a lot from it so thank you. It’s fantastic to see how much CSS has changed and evolved.

    0
  16. 27

    I don’t know why people are complaining about this list being “too long”. Really? If you can’t handle this much awesomeness, simply do as Vitaly suggests by bookmarking it and returning another day.

    I especially love the new css3 generator and Griddle.it. Thanks for putting all these great tools together!!

    0
  17. 28

    Wonderful! Great learning. Thanks for consolidating it all together.
    Couple of my CSS3 experiments :)
    http://bit.ly/f3JKu7 – Zero images nexus live wallpaper (for webkit)
    http://bit.ly/gS9mU3 – New Chrome Logo using CSS3

    0
  18. 29

    Great collection! Loads of new stuff here that I’ve not seen before. I’d like to see http://css3gen.com/ added to the list of useful CSS3 generators.

    0
  19. 30

    Wow, I’m featured in a Smashing Mag post hah. Thanks guys! :p

    the other entries look nifty too. CSS really has come a long way since I started years ago. The future is looking pretty bright as well too.

    0
  20. 31

    I made a tool to help migrate inline CSS styles to separate HTML and CSS.

    http://cascader.co

    Figured this was relevant.

    0
  21. 32

    Amazing Stuff! Thanks for taking the time to gather up such useful information :)

    0
  22. 33

    oh wow!
    a really great compilation …

    thank you so much, guys – very helpful

    0
  23. 34

    OMG, great article! Great resources, thanx SM!

    0
  24. 35

    Excellent resources. Thanks for gathering them together. Bookmarked.

    0
  25. 36

    wow this is a good collection what I was always looking for. this is all in one. I loved this

    0
  26. 37

    One thing that stops me from using these techniques and tools is browser comparability, will CSS 3 settle down “The browser war”?

    0
  27. 38

    i agree with Abdul Ahad. But thanks for sharing this collection might become handy some time.

    0
  28. 39

    Thx!! great work ! very usefull ;)

    0
  29. 40

    Niels Matthijs

    April 19, 2011 12:16 am

    I hope people will think twice before using many of the listed techniques above. While they are “cool”, many of them are based on horrendous hacks, hard to manage code and some are even completely inaccessible.

    See, it’s cool to build a mac keyboard in css, but beyond the “matchstick cathedral” effect (dude must be crazy or have too much time on its hands), it serves no purpose whatsoever.

    Some good bits at the bottom of the list though.

    0
  30. 41

    REALLY GREAT!!….I have bookmarked this page & I’m gonna use these techniques in my new portfolio page. Keep on posting new CSS & HTML5 tricks…

    0
  31. 42

    Hey! a lot of good stuffs here!! had a peek at some of them already, but thanks for bringing all these together!!
    Bookmarking this page now!! Saved me a lot of time bookmarking!!

    Thanks

    0
  32. 43

    Hats off to Vitaly and the team.
    I can’t image that time and effort it takes to bring out something like this. I really appreciate your commitment to quality and not to anything that is even remotely fly-by-night.
    Round-ups like these remain references for a long time.
    I am sure many will keep moving back and forth between this article to fork out something useful every time, including me.

    0
  33. 44

    Great resources, thanks for sharing. When I’m on a project I forget to use half of these tools. How do you guys do that, have some kind of toolbox or startpage for this, or just keep them in your bookmarks?

    Also, is it my internet, or is the stuffandnonsense site down (for 320 and up)?

    0
    • 45

      stuffandnonsense did die for a while. They are up now !
      The SM effect kills many websites.
      But surprising they are hosted on mediatemple !!

      0
  34. 46

    adelacreative

    April 19, 2011 8:05 am

    Great post like always!

    0
  35. 47

    Excellent resources! The 3d effects are simple to do and eye-catching! I’ll definitely be using this article as reference for my future projects.

    0
  36. 48

    Thanks for the plethora of CSS resources!

    0
  37. 49

    That’s unbelievable! nice ) Thanx a lot

    0
  38. 50

    Lot of information thanks for sharing…

    0
  39. 51

    Nooooo! Not more awesome links! *covered by avalanche of stylesheets*

    … Anyway this is a great roundup of new stuff, most of which I’ve never seen before (which is always great).

    0
  40. 52

    Anton Grakhov

    April 20, 2011 2:12 am

    For the key “Caps Lock” could be done switch LED :)

    0
  41. 53

    It’s a very interesting looking article, but unfortunately rather long so I only had time to skim it. It might be worth breaking such long articles down by some kind of subcategory and publishing it as 2 or 3 shorter articles instead.

    0
  42. 54

    Lol, this looks like a collection of flash tutorials 10 years ago. ;)

    0
  43. 55

    lot of interesting stuff. I would break it down into a series so ppl don’t get boggled down with info. overload.
    good stuff! i’ll come back.

    0
  44. 56

    That is just absolutely amazing! I am really behind the curve and need to get with the program on css3 obviously. My favorite was the “Planeterium” or Planet effect, absolutely amazing, it was almost to good to be true. If you would of showed me that and asked me what it was made in without telling me I would of said FLASH no doubt. Very nice editorial.

    Jeremiah
    Chairman & CEO
    thenerdblurb.com

    0
  45. 57

    I just don’t have words to describe it thank u very much

    0
  46. 58

    The 19th of April was my birthday and this post feels like a birthday present. Well done Smashing Mag! Quality over quantity…

    No matter how many times I look at the css code for background patterns I still cant get my head around it. (That’s cos it uses js for the magic)

    0
  47. 59

    Great post, thanks :)

    0
  48. 60

    WOW, that’s amazing, specially the backgrounds with css gradients.

    0
  49. 61

    Amazing

    0
  50. 62

    Praharsh.R.J

    April 26, 2011 5:53 am

    Thanks
    Found some interesting information on the post. thanks for sharing such a huge information

    Regards
    Praharsh

    0
  51. 63

    Amazing set of tools and techniques! Thanks so much for all the info!!!

    0
  52. 64

    Great post, I don’t know if you saw the CSS Benchmark that was done between CSS3 and CSS on wired recently but it was pretty much “dead on” with what you are saying, “whoever the author is here…” Great post and I really am totally intrigued by the new abilities, capabilites I should say, and of course the “load time” with CSS3, it’s truly been a “game changer,” as some would say.

    Great post!

    Jeremiah R.

    0
  53. 65

    As someone who plays many roles during the day, front-end dev, interaction designer, information architect, project manager, etc, etc… I can’t say thank you enough for putting these lists together for me. Thank you thank you thank you.

    0
  54. 66

    imaginepaolo

    May 9, 2011 9:59 am

    Great article… we thing is the best for CSS programmers…

    0
  55. 67

    Gilberto Ramos

    May 18, 2011 12:25 pm

    Bookmarked! Thanks a ton.

    0
  56. 68

    Great CSS, that CSS will help me to make websites.
    I like it, thank you so much.

    0
  57. 69

    You need to try http://webarti.com/best-CSS3-button-maker/ too. This is a new CSS3 tool that allows you to create stylish buttons, boxes etc. I think, it deserves to be listed in this collection.

    0
  58. 70

    A slight correction for this rather useful article – Divya Manian is a woman I believe.

    0
  59. 71

    Innovative and compelling…mind-blowing, i need more adjectives.

    0
  60. 72

    Vinay Patial

    July 25, 2012 12:21 am

    These all techniques works good in all browsers, but not in IE7/IE8. And for that i want you all to go for an article, which i found in the same “Smashing Magazine”, about “Progressive Internet Explorer(PIE)” – http://css3pie.com/. You will found it helpful, I bet you.

    0
  61. 73

    Wow, this post is really helpful and informationable! Great!!!

    0

↑ Back to top