50 New Useful CSS Techniques, Tutorials and Tools

Advertisement

These are great times for front-end developers. After months of exaggerated excitement1 about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes2. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing!

In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. 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 JavaScript, or JavaScript-libraries as well.

CSS Techniques

Now Playing: transitions and animations with CSS3
Tim Van Damme showcases a fairly simple CSS design that uses transitions, animations and subtle hover-effects to produce an engaging user experience. Also, notice the use of favicons as background-images for attribute selectors. Unfortunately, the demo works best in Webkit-browsers, but it degrades gracefully in other modern browsers. Unfortunately, we didn’t find the documentation of the technique.

Now Playing4

CSS3 range slider, checkbox + radio button5
A demo of HTML input elements made with CSS3. They include realistic range sliders, checkboxes and radio buttons. The designer used minimal markup, no JavaScript and no images. Downside: there is a ton of messy CSS3 code, and Safari renders the page best. Chrome is close, but the 3D perspective doesn’t quite work.

umbrUI - CSS3 range slider, checkbox + radio button6

CSS3 Media Queries7
CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries.

CSS3 Media Queries8

Proportional leading with CSS3 Media Queries9
A fluid layout should be responsive to the width of the columns of text. This problem, of proportional leading, is what holds many designers back from adopting fluid layouts. In this article, Andy Clarke explains how you can achieve proportional leading for your typography using CSS3 Media Queries.

Proportional Leading10

Responsive Web Design11
This article by Ethan Marcotte explains how to use fluid grids, flexible images, and media queries to create elegant user experiences with responsive web design. Check out the demo12 — of course, don’t forget to resize the browser window.

Responsive Web Design13

Popout Details on Hover with CSS14
This tutorial describes a technique that presents details of a content item on hover. The solution is quite simple and uses position: relative and z-index to achieve the effect.

HTML/CSS Tutorials15

CSS3 Border-Radius and Rounded Avatars16
Trent Walton came up with a clever technique to create rounded images (in this case, rounded avatars) with the border-radius property. The solution is simple: create a frame class for your image, and give it a border. Then, round both the frame and image with the border-radius property, and you’re done: a simple technique with no additional images or scripts — just an extra line of code. You may want to check Tim Van Damme’s similar CSS technique17, too.

CSS3 Border-Radius and Rounded Avatars18

CSS3 Rounded Image With jQuery19
“The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn’t display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image.”

CSS3 Rounded Image With jQuery20

The Simpler CSS Grid21
Why restrict your layout so that it can fit into this 960gs? A grid is supposed to help you in design, not to limit your creativity. The 978 grid is not just about increasing the page width, but to loosen the gutter space, so users can read it more comfortably.

The Simpler CSS Grid22

Correcting Orphans with CSS Overflow23
When typesetting, designers try to avoid leaving just one or a few words hanging on a line at the end of a paragraph. Doing so is considered poor typography because it leaves too much white space between paragraphs and interrupts the reader’s eye movement (see the example below). A simple typographic solution is to rework the line by adding indented paragraph endings. But the problem is particularly annoying when aligning a paragraph next to an image that exceeds the paragraph’s height. Soh Tanaka has come up with a simple and quick solution to this problem with CSS.

 Web Design Tutorials and Front-end Development Blog by Soh Tanaka24

Apple-like Retina Effect With jQuery25
This tutorial explain how you can recreate the effect displayed on the image below, using jQuery and CSS.

Apple-like Retina Effect With jQuery26

How to create a kick-ass CSS3 progress bar27
New features introduced in CSS3 allows developers to create stunning visual effects: this post exaplains how you can create a fancy progress bar using CSS3 and jQuery, without Flash or images.

How to create a kick-ass CSS3 progress bar28

CSS pseudo-element Solar System using semantic HTML29
This is a complete reworking of another author’s basic reproduction of the classic model of our solar system using CSS. By using pseudo-elements (again) I wanted to reproduce as much as possible without presentational HTML and JavaScript. In addition, by hooking into HTML microdata I’ve put together a rough scale model of the solar system that demonstrates some further uses of CSS generated content.

CSS pseudo-element Solar System using semantic HTML30

Advanced Columns using the :nth-child(N)31
Imagine this task: you have to display product listings as columns laid out in a zig zag pattern. The first instinct is to split each section into its own list, but if the site is running on a CMS, all products had to be spit out in one giant list. Given this scenario, you can use pseudo-selectors :nth-child(N) and a bit of jQuery to help with IE support.

Advanced Columns using the :nth-child(N)32

Lost World’s Fairs33
Trent Walton explains the workflow and design techniques used to create the Lost World’s Fairs34 website to celebrate the launch of Internet Explorer 9. The result is truly remarkable.

Now Playing35

New Twitter Design with CSS and JQuery.36
This post explains the techniques used by Twitter’s new web interface and re-creates its interactivity using CSS and jQuery.

New Twitter Design with CSS and JQuery.37

Europe, CSS and jQuery clickable map38
CSS converts a simple list of countries into the fully clickable map. Works with disabled style sheets and JavaScript, as well as on mobile devices. A simple code does not require Flash Player or other plug-ins!

Europe, CSS and jQuery clickable map39

Simple Tooltip w/ jQuery and CSS40
There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. I would like to share how I’ve created mine today, and am also open to any critiques and suggestions for those jQuery ninjas out there. Lets take a look.

Simple Tooltip w/ jQuery and CSS41

Super Cool CSS Flip Effect with Webkit Animation42
Webkit support some fancy transform and animation effects that can really spice up the web experiences for users with Safari or Chrome browsers. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a Transformers themed top trumps design.

Super Cool CSS Flip Effect with Webkit Animation43

CSS3 Border Images for Beautiful, Flexible Boxes44
The CSS3 buzz is in full swing, and many of CSS3′s most useful properties are receiving a fair bit of attention. Properties like border-radius, text-shadow, custom gradients, and even CSS3 transitions have been shown to be quite practical, resolving real-world design issues with minimal markup and maintainable code.

CSS3 Border Images for Beautiful, Flexible Boxes45

Animated wicked CSS3 3D bar chart46
Create a beautiful 3D bar chart. But instead of creating a “stacked” one, several bars are placed under each other. When hovering, the animation shows and the bar grows to the appropriate size.

Animated wicked CSS3 3d bar chart47

CSS Border Tricks48
Since I released my new redesigned blog, a lot of people have asked me how I styled the pressed effect on my category navigation. I would like to share some simple border style tricks to get various effects for your next project.

CSS Border Tricks49

The Background Trick With CSS50
This page provides links to a couple of examples for the trick used on Design Made In Germany 551 where a couple of layers are used and the middle layer has a fixed background, while other layers have absolute positioning. The visual effect is unique and interesting. Unfortunately, the explanations are in German, but the demos are self-explanatory.

Der Backgroundtrick52

Footnotes With CSS53
in their simplest implementation — using sup tags and linking within the page — footnotes aren’t very user-friendly. They interrupt the experience, requiring the user to click the link, read the information and then return to the page with the browser’s “Back” button.” Lukas Mathis has come up with an elegant solution to improve this user experience: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it — i.e. when they move the cursor over the footnote symbol.

ignore the code: Footnotes54

Why and how to create Microsoft Office Minibar with jQuery and CSS355
Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

Why and how to create Microsoft Office Minibar with jQuery and CSS356

CSS image replacement with pseudo-elements (NIR)57
An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off; works with semi-transparent images; doesn’t hide text from screen-readers or search engines; and provides fallback for IE6 and IE7.

CSS image replacement with pseudo-elements (NIR)58

Diagonal CSS Sprites – Aaron Barker59
So you’ve got your sprite created, and it’s working great. 30+ icons in one image, and major HTTP connections saved. You have made your little corner of the interwebs a little happier and faster. Steve Souders would be proud.

Diagonal CSS Sprites - Aaron Barker60

Sneak – Fixing the background ‘bleed’61
I recently came up with an issue in Safari where the background colour of an element seemed to “bleed’ through the edge of the corners when applying both borders and a border-radius (see the image above). I then found a solution, and it came in the form of the -webkit-background-clip property.

Sneak - Fixing the background 'bleed'62

Zebra-striping rows and columns63
Zebra-striping tables is certainly not a new thing; it has been done and discussed for years. They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another. We can create zebra-stripes using the nth-of-type selector — but we can apply it not only to rows but also columns.

Zebra-striping rows and columns64

Feature Table Design65
“I ran into the feature table design and I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool stuff you find on the web is definitely an excise I recommend (a few days after, I read this – couldn’t agree more). As these exercises typically do, it lead me down some interesting paths.”

Feature Table Design66

ShineTime – A jQuery and CSS3 Gallery With Animated Shine Effects67
This article shows how you can create an animated Shine Effect with jQuery and CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

ShineTime – A Kick-Ass New jQuery and CSS3 Gallery With Animated Shine Effects68

The Mac-style Skype Application Menu with CSS3 and jQuery69
This tutorial re-creates the Skype application menu in the web browser. The final design mimics not the full layout — only the menu where all your friends are listed. For the nifty layout CSS3 is used and jQuery is used for the extra functionality.

The Mac-style Skype Application Menu with CSS3 and jQuery70

Further Interesting Techniques

Object-oriented CSS71
All the resources you need to get started are linked from the left navigation. Start by downloading the base files. Exercises one and two can be completed in Firebug if you are comfortable with it. Then you can download the finished file at the beginning of Exercise 3.

Object-oriented CSS72

clearfix Reloaded + 73
clearfix and overflow:hidden may be the two most popular techniques to clear floats without structural markup. This short article is about enhancing the first method and shedding some light on the real meaning of the second.

CSS3 text-shadow and box-shadow trick74
All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today. That’s handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend.

Data theft with CSS75
Mozilla has released security updates to Firefox 3.5 and 3.6 that include defenses for an old, little-known, but serious security hole: cross-site data theft using CSS. These defenses have a small but significant chance of breaking websites that rely on “quirks mode” rendering and use a server in another DNS domain (e.g. a CDN) for their style sheets.

Show Markup in CSS Comments76
“Let’s say you are creating a CSS file for a modular bit of a webpage. Perhaps you are the type that separates your CSS files into bits like header.css, sidebar.css, footer.css, etc. I just ran across an idea I thought was rather clever where you include the basic markup you will be styling as a comment at the top of your CSS file.”

Show Markup in CSS Comments77

How to Micro-Optimize Your CSS78
Minification shrinks file size significantly, by as much as 30% or more (depending on input code). This size-reduction is the net result of numerous micro-optimization techniques applied to your stylesheet. By learning these techniques and integrating them into your coding practice, you’ll create better-optimized CSS during the development process. Sharper skills, cleaner code, faster downloads — it’s a “win-win” for everyone.

How to Micro-Optimize Your CSS79

Transparent Borders with background-clip80
Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.

Transparent Borders with background-clip81

Showing and hiding content with CSS 382
One very common feature is the expanding/collapsing or shown/hidden box, whether this is a tabbed interface, a content “tray” on the side that can be slid out and then put away again, or a complex tree menu with expanding/collapsing sub-menus. Generally, these features are implemented via JavaScript, however using CSS3 it is possible to create such content using only HTML and CSS — no JavaScript required.

CSS for Blockin’ Stuff83
If you want to use user stylesheets, ad blockers, flash blockers, or whatever else, more power to you. Here are some CSS projects intended for blockin’ stuff.

CSS Tools and Services

ProCSSor: Advanced CSS Prettifier84
This online tool allows you to submit your CSS (either copy and paste the code, upload the file or point to a URL) and choose your formatting options. You can save options and reuse them every time you run code through ProCSSor. You can separate properties and selectors across multiple lines, indent up to four levels with either the space bar or tab key and even sort properties. The tool also has a “Columnize” mode, which groups elements into columns, making for a more elegant style sheet; you need to deactivate “Fail-safe mode” to use it.

ProCSSor - Advanced CSS Prettifier85

Selectivizr – CSS3 selectors for IE 6-886
selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. Selectivizr adds support for 19 CSS3 pseudo-classes, 2 pseudo-elements and every attribute selector to older versions of IE. It can also fix a few of the browsers native selector implementations.

Selectivizr - CSS3 selectors for IE 6-887

CSS Desk88
CSSDesk is an online HTML/CSS sandbox. The tool allows you too experiment with CSS online, see the results live, and share your code with others. You may want to check Rendera 89, too.

CSS Desk90

The Square Grid91
A quite simple CSS framework that is based on 35 equal-width columns. It aims to cut down on development time and help you create well-structured websites. The total width of the grid is 994 pixels – which the majority of modern monitors support. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3 and 2. The pack contains sketch sheets for printing (PDF), design layout templates for Photoshop, InDesign and Illustrator and source code files with explanations.

The Square Grid - A simple CSS framework for designers and developers92

Instant Blueprint93
Instant Blueprint allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster. You may want to check Project Deploy94, too.

Instant Blueprint - Create a web project framework in seconds.95

HTML5 Boilerplate96
HTML5 Boilerplate is the professional base HTML/CSS/JS template for a fast, robust and future-proof site. You get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on. You may want to check HTML5 Reset97, too.

HTML5 Boilerplate - A rock-solid default for HTML5 awesome.98

HTML5 Starter Pack99
A a very basic HTML5 starter pack with a clean and ordered directory structure that will fit for most projects. The pack contains the most common files (HTML, CSS, JavaScript), as well as a basic Photoshop web design template, again with a group’s structure that would fit for most projects.

HTML5 Starter Pack100

PrimerCSS101
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.

PrimerCSS102

Hardboiled CSS3 Media Queries103
These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes that you may be interested in making responsive designs for. The stylesheet covers smartphones in portrait and landscape modes, iPads, iPhone and large screens.

Hardboiled CSS3 Media Queries104

Grid Generator105
This tool allows you treate your own custom CSS grids. You can select base unit, number of columns, column width, gutter width and margins and download PNG as well as a CSS source code.

Grid Generator - build your own custom css grid106

Baseline framework107
Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system.

Baseline - a designer framework108

Gridulator109
Gridulator is a quick and easy grid calculator for web designers and developers. You can choose the overall width and number of columns, select the column width and gutter width and download the PNG of the grid.

Gridulator: Make pixel grids, lickety-split110

Dust-Me Selectors111
Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered.

Dust-Me Selectors112

zen-coding – Project Hosting on Google Code113
Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions — similar to CSS selectors — into HTML code.

zen-coding - Project Hosting on Google Code114

Turbine115
Turbine is a collection of PHP-powered tools that are designed to decrease CSS development time. It includes packing, gzipping and automatic minification of multiple style files, “CSS variables”, selector aliases as well as nested css selectors and OOP-like inheritance, extensions and templating features.

Turbine116

CSS Usage117
CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.

CSS Usage118

CSS Reloader119
CSS Reloader is a browser extension for Mozilla Firefox and Google Chrome, that allows you to reload all the CSS of any site without you have to reload the page itself. The goal for this browser extension is to enable developers to become more productive.

CSS Reloader120

CSS Frame Generator121
This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure — each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better. It’s essential to use a predefined properties order, such as this one:

CSS Frame Generator122

Switch CSS123
Switch is a full featured, production ready CSS preprocessor. It runs under Apache with mod_python, or as an environment-agnostic command line tool.

Switch CSS124

CSS Tools: Diagnostic CSS125
Validation is great, but it won’t catch everything. For example, if you have a link where you forgot to add a URL value to the href attribute, the validator won’t complain. The syntax is valid, even if it’s a broken experience. Similarly, the validator will be happy to let through empty class and id values.

CSS Tools: Diagnostic CSS126

IE Print Protector – ieCSS127
IE Print Protector is a piece of javascript that allows you to print HTML5 pages in Internet Explorer. IE Print Protector helps IE render HTML5 elements correctly, both on screen and in print.

IE Print Protector - ieCSS128

CSS reset, CSS framework, Toucan CSS reset129
It is a reset stylesheet. Unlike Meyer’s or YUI’s, it not only removes the default styling of HTML elements, but also rebuilds the new generic rules for the typography, headings, paragraphs, lists, forms, tables etc. It’s light-weight, flexible and browser-friendly.

CSS reset, CSS framework, Toucan CSS reset130

PHP CSS Browser Selector131
CSS Browser Selector is a very small javascript with just one line php function which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

PHP CSS Browser Selector132

CSS3Machine for iPad133
CSS3Machine makes the most advanced CSS3 styles simple. Easily create stunning gradients, drop-shadows, and 3D transforms. CSS3Machine also builds, edits, and exports WebKit animations.

CSS3Machine for iPad - CSS3 Styles and Animations in Seconds · numerosign134

minify135
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.

minify136

Modernizr137
Modernizr adds classes to the element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.

Modernizr138

Spritebaker: Easy Base64 encoding for designers139
This free tool parses your CSS and returns a copy with all external media “baked” right into it as Base64 encoded datasets. The number of time consuming http-requests on your website is decreased significantly, resulting in a massive speed-boost (server-side gzip-compression must be enabled).

Spritebaker - Ridiculous easy Base64 encoding for Designers140

My DebugBar141
IETester is a free application that allows you to have the rendering and JavaScript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE at the same time.

My DebugBar142

Less Framework 2143
This framework is a CSS framework for cross-device layouts. The framework has a minimal set of features, and does away with things like predefined classes. All it really contains are a set of media-queries, typography presets aligned to a 24 px baseline grid and a grid, with its column sizes noted down within CSS comments. You can select what features you want to have in your framework files, and the tool will provide you with a zipped archive right away. Note that this framework isn’t related with LESS CSS144, another framework that extends CSS with variables, mixins, operations and nested rules.

Less Framework 2145

Last Click

Never Mind the Bullets146
HTML5 is coming to modern browsers, and developers are already pushing its limits. To this end, Microsoft has created an online comic to show off HTML5/CSS3’s features (SVG background, JavaScript acceleration, etc.) as they function on IE9. It’s a fully interactive experience, complete with animations and other features that were until now possibly only with JavaScript or Flash.

Never Mind the Bullets - BEAUTY OF THE WEB147

The comic is a Western in a fairly traditional comic-book style, but with a lot of extras. It’s viewable in other browsers, but not as fully as with all of the features built into IE9. There’s also a feature that lets you create your own comic strip using the same characters. We never thought we’d say these words, but the website is actually best viewed in Internet Explorer 9.

Have something useful? Get in touch with us!

Our job is to promote good, high-quality content and resources. If you wrote or developed something useful, contact us148 — we will do our best to spread the word and help you out.

Footnotes

  1. 1 http://matthewjamestaylor.com/blog/css3-starbursts
  2. 2 http://farukat.es/journal/2010/08/469-pure-css-icons-make-madness-stop
  3. 3 http://maxvoltar.com/temp/nowplaying/
  4. 4 http://maxvoltar.com/temp/nowplaying/
  5. 5 http://lab.simurai.com/css/umbrui/
  6. 6 http://lab.simurai.com/css/umbrui/
  7. 7 http://www.webdesignerwall.com/tutorials/css3-media-queries/
  8. 8 http://www.webdesignerwall.com/tutorials/css3-media-queries/
  9. 9 http://stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries/
  10. 10 http://stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries/
  11. 11 http://www.alistapart.com/articles/responsive-web-design
  12. 12 http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
  13. 13 http://www.alistapart.com/articles/responsive-web-design
  14. 14 http://www.sohtanaka.com/web-design/popout-details-on-hover-w-css/
  15. 15 http://www.sohtanaka.com/web-design/popout-details-on-hover-w-css/
  16. 16 http://trentwalton.com/2010/08/03/css3-border-radius-rounded-avatars/
  17. 17 http://maxvoltar.com/archive/rounded-corners-on-images-css-only
  18. 18 http://trentwalton.com/2010/08/03/css3-border-radius-rounded-avatars/
  19. 19 http://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/
  20. 20 http://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/
  21. 21 http://www.webdesignerwall.com/tutorials/the-simpler-css-grid/
  22. 22 http://www.webdesignerwall.com/tutorials/the-simpler-css-grid/
  23. 23 http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/#blog
  24. 24 http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/#blog
  25. 25 http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/
  26. 26 http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/
  27. 27 http://www.catswhocode.com/blog/how-to-create-a-kick-ass-css3-progress-bar
  28. 28 http://www.catswhocode.com/blog/how-to-create-a-kick-ass-css3-progress-bar
  29. 29 http://nicolasgallagher.com/css-pseudo-element-solar-system/
  30. 30 http://nicolasgallagher.com/css-pseudo-element-solar-system/
  31. 31 http://www.sohtanaka.com/web-design/advanced-columns-w-css/
  32. 32 http://www.sohtanaka.com/web-design/advanced-columns-w-css/
  33. 33 http://trentwalton.com/2010/09/15/lost-worlds-fairs/
  34. 34 http://lostworldsfairs.com/
  35. 35 http://trentwalton.com/2010/09/15/lost-worlds-fairs/
  36. 36 http://www.9lessons.info/2010/10/new-twitter-design-css-jquery.html
  37. 37 http://www.9lessons.info/2010/10/new-twitter-design-css-jquery.html
  38. 38 http://winstonwolf.pl/css,europe.html
  39. 39 http://winstonwolf.pl/css,europe.html
  40. 40 http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/
  41. 41 http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/
  42. 42 http://line25.com/articles/super-cool-css-flip-effect-with-webkit-animation
  43. 43 http://line25.com/articles/super-cool-css-flip-effect-with-webkit-animation
  44. 44 http://articles.sitepoint.com/article/css3-border-images
  45. 45 http://articles.sitepoint.com/article/css3-border-images
  46. 46 http://www.marcofolio.net/css/animated_wicked_css3_3d_bar_chart.html
  47. 47 http://www.marcofolio.net/css/animated_wicked_css3_3d_bar_chart.html
  48. 48 http://www.sohtanaka.com/web-design/css-border-tricks-tutorial/
  49. 49 http://www.sohtanaka.com/web-design/css-border-tricks-tutorial/
  50. 50 http://www.designmadeingermany.de/blog/der-backgroundtrick/
  51. 51 http://www.designmadeingermany.de/magazin/5/
  52. 52 http://www.designmadeingermany.de/blog/der-backgroundtrick/
  53. 53 http://ignorethecode.net/blog/2010/04/20/footnotes/
  54. 54 http://ignorethecode.net/blog/2010/04/20/footnotes/
  55. 55 http://www.jankoatwarpspeed.com/post/2010/05/23/microsoft-office-minibar-jQuery-CSS3.aspx
  56. 56 http://www.jankoatwarpspeed.com/post/2010/05/23/microsoft-office-minibar-jQuery-CSS3.aspx
  57. 57 http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/
  58. 58 http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/
  59. 59 http://www.aaronbarker.net/2010/07/diagonal-sprites/
  60. 60 http://www.aaronbarker.net/2010/07/diagonal-sprites/
  61. 61 http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
  62. 62 http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
  63. 63 http://csswizardry.com/2010/08/zebra-striping-rows-and-columns/
  64. 64 http://csswizardry.com/2010/08/zebra-striping-rows-and-columns/
  65. 65 http://css-tricks.com/feature-table-design/
  66. 66 http://css-tricks.com/feature-table-design/
  67. 67 http://addyosmani.com/blog/shinetime/
  68. 68 http://addyosmani.com/blog/shinetime/
  69. 69 http://www.marcofolio.net/webdesign/the_mac_skype_app_menu_with_css3_and_jquery.html
  70. 70 http://www.marcofolio.net/webdesign/the_mac_skype_app_menu_with_css3_and_jquery.html
  71. 71 http://oocss.org/
  72. 72 http://oocss.org/
  73. 73 http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
  74. 74 http://mezzoblue.com/archives/2010/07/27/a_css3_tip/
  75. 75 http://www.owlfolio.org/htmletc/css-data-theft/
  76. 76 http://css-tricks.com/show-markup-in-css-comments/
  77. 77 http://css-tricks.com/show-markup-in-css-comments/
  78. 78 http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/
  79. 79 http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/
  80. 80 http://css-tricks.com/transparent-borders-with-background-clip/
  81. 81 http://css-tricks.com/transparent-borders-with-background-clip/
  82. 82 http://dev.opera.com/articles/view/css3-show-and-hide/
  83. 83 http://css-tricks.com/css-for-blockin-stuff/
  84. 84 http://www.procssor.com/
  85. 85 http://www.procssor.com/
  86. 86 http://selectivizr.com/
  87. 87 http://selectivizr.com/
  88. 88 http://www.cssdesk.com/
  89. 89 http://rendera.heroku.com/
  90. 90 http://www.cssdesk.com/
  91. 91 http://thesquaregrid.com/
  92. 92 http://thesquaregrid.com/
  93. 93 http://instantblueprint.com/
  94. 94 http://projectdeploy.org/index.php
  95. 95 http://instantblueprint.com/
  96. 96 http://html5boilerplate.com/
  97. 97 http://html5reset.org/
  98. 98 http://html5boilerplate.com/
  99. 99 http://sickdesigner.com/resources/HTML5-starter-pack/index.html
  100. 100 http://sickdesigner.com/resources/HTML5-starter-pack/index.html
  101. 101 http://www.primercss.com/
  102. 102 http://www.primercss.com/
  103. 103 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
  104. 104 http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries
  105. 105 http://netprotozo.com/grid/
  106. 106 http://netprotozo.com/grid/
  107. 107 http://baselinecss.com/
  108. 108 http://baselinecss.com/
  109. 109 http://gridulator.com/
  110. 110 http://gridulator.com/
  111. 111 https://addons.mozilla.org/en-US/firefox/addon/5392/
  112. 112 https://addons.mozilla.org/en-US/firefox/addon/5392/
  113. 113 http://code.google.com/p/zen-coding/
  114. 114 http://code.google.com/p/zen-coding/
  115. 115 http://turbine.peterkroener.de/
  116. 116 http://turbine.peterkroener.de/
  117. 117 https://addons.mozilla.org/de/firefox/addon/10704/
  118. 118 https://addons.mozilla.org/de/firefox/addon/10704/
  119. 119 https://addons.mozilla.org/de/firefox/addon/46211/
  120. 120 https://addons.mozilla.org/de/firefox/addon/46211/
  121. 121 http://lab.xms.pl/css-generator/
  122. 122 http://lab.xms.pl/css-generator/
  123. 123 http://sourceforge.net/projects/switchcss/
  124. 124 http://sourceforge.net/projects/switchcss/
  125. 125 http://meyerweb.com/eric/tools/css/diagnostics/
  126. 126 http://meyerweb.com/eric/tools/css/diagnostics/
  127. 127 http://www.iecss.com/print-protector/
  128. 128 http://www.iecss.com/print-protector/
  129. 129 http://borderleft.com/labs/
  130. 130 http://borderleft.com/labs/
  131. 131 http://bastian-allgeier.de/css_browser_selector/
  132. 132 http://bastian-allgeier.de/css_browser_selector/
  133. 133 http://numerosign.com/software/css3machine/#info
  134. 134 http://numerosign.com/software/css3machine/#info
  135. 135 http://code.google.com/p/minify/
  136. 136 http://code.google.com/p/minify/
  137. 137 http://www.modernizr.com/
  138. 138 http://www.modernizr.com/
  139. 139 http://www.spritebaker.com/
  140. 140 http://www.spritebaker.com/
  141. 141 http://www.my-debugbar.com/wiki/IETester/HomePage
  142. 142 http://www.my-debugbar.com/wiki/IETester/HomePage
  143. 143 http://lessframework.com/
  144. 144 http://lesscss.org/
  145. 145 http://lessframework.com/
  146. 146 http://www.nevermindthebullets.com/
  147. 147 http://www.nevermindthebullets.com/
  148. 148 http://twitter.com/smashingmag
  149. 149 http://polldaddy.com/poll/3911118/
  150. 150 http://polldaddy.com/features-surveys/

↑ Back to topShare on Twitter

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 and loves solving complex problems in large companies. Get in touch.

Advertising
  1. 1

    Oh, SM – why are you doing this everytime ! I’m overloaded with resources now ! Awesome. Bookmarked.

    2
  2. 2

    Great, great post. Keep on the good work smash!

    11
  3. 3

    Niiiiicee. Thank you for the updates. Huge list is huge!

    -3
  4. 4

    Wow!! As always it is rocking… Thanks Vitaly, keep your good work :)

    4
  5. 5

    Great, just great!. :)

    3
  6. 6

    great post! :D

    1
  7. 7

    Nice collection,

    Some links bookmarked for our new website. Thx!

    0
  8. 8

    Great list! Definitely will use a bunch of these… the only other helpful CSS tool I thought of that would be a great addition is the CSS3 generator:

    http://css3generator.com/

    0
  9. 9

    As usual: Great post. Thanks!!

    Bookmarked it for later, since there is way too much interesting content here for the occasional, quick read.

    //Michael.

    0
  10. 10

    Wow! What a fantastic and exhaustive list. I feel like a kid on Christmas morning who has all sorts of new toys to play with!

    0
  11. 11

    WOW! So many amazing new stuff!
    Cheers!

    0
  12. 12

    Great collection!

    A little correction, Max Voltar is not a person, Maxvoltar is Tim Van Damme’s blog.

    0
  13. 13

    Great and usefull post. Bookmarked. Thank you.

    Sadly the CSS Browser Selector seems not to work with Chrome (black background instead of the blue one)

    0
  14. 14

    Great resources! I think that article “Bulletproof CSS3 media queries” http://www.vcarrer.com/2010/07/bulletproof-css3-media-queries.html can be also useful to someone like a new CSS Technique.

    0
  15. 15

    Nicolas Gallagher

    October 12, 2010 11:47 am

    Thanks for linking to two of my articles Vitaly. However, I feel that the article I wrote about multiple backgrounds and borders (with CSS 2.1) – http://j.mp/d6UMOd – might have been more useful to your readers, and has more applications, than the pseudo-element solar system demo.

    1
  16. 16

    Thanks a million. You guys, rock!

    -1
  17. 17

    one of my favorite articles. the examples were awesome.

    0
  18. 18

    great post ! make more of those :)

    0
  19. 19

    Great article some very useful info, certainly will be using it very often…

    Oh by the way, found an error in the html5 boilerplate description the link is broken

    Shedh

    1
  20. 20

    So how many work in IE7… lol Nice list, thanks!

    0
  21. 21

    awesome post! thanks for the great resources

    -1
  22. 22

    Nice compilation and good work putting this together!

    0
  23. 23

    Nice Post ,, thanks Vitaly Friedman im becoming so exited with development of html css and java script !!

    0
  24. 24

    Freakin unreal son! I spent half a day on this post. Had me locked like a deadbolt. Word!

    -1
  25. 25

    Great!!!!!!

    -3
  26. 26

    I noticed you included the Switch CSS pre-processor. This is incredablly out of date and no longer being developed.

    Turbine http://turbine.peterkroener.de/ (PHP) or Sass http://sass-lang.com/ (Ruby) would have been a better choice.

    Also, minify is good, even more so when combined with YUICompressor, but CSS-JS-Booster more up to date and is arguably better http://github.com/Schepp/CSS-JS-Booster/

    1
  27. 27

    What’s the comment rating tool you guys are using? Quite neat! Like voting on digg or reddit!

    3
  28. 28

    That’s why we are looking smashing for keep update ourselves

    0
  29. 29

    Madness!!!!!!!!!!

    -1
  30. 30

    Love this post, its really very nice to see all this on SM I am purely your FAN..

    0
  31. 31

    Extremely Great ;)

    0
  32. 32

    very nice post …

    0
  33. 33

    Thanks, SK. It was built from scratch for Smashing Magazine.

    8
  34. 34

    Thumbs up for this post. It’s stuff like this that becomes great reference for designers around the world.Also good to see the support on #smcss.

    Thanks for the input, guys.

    Filed this under Design and Development 101 ;-)

    1
  35. 35
  36. 36

    That is just amazing to read and getting maximum things to use from here..

    -1
  37. 37

    First I would like to grats the author, Vitaly, because of the awesome job done here. Much usefull links there with modern practicals. Designers works well around new CSS resources.

    Nevertheless, as a developper, I can unfortunately use only a very few tools here as they has a low compatibility with browsers. I can only “dream” about using the rest…
    If Smashing Magazine could write a such post with modern techniques and 100% browsers compatibiliy, it would be a must!
    I hope one day…

    Keep up the good work.

    0
  38. 38

    great!
    thanks for the article , really insightful

    0
  39. 39

    great article!

    0
  40. 40

    This is really a wow list and a bunch of great inspiration tuts. Thanks for that.

    But when I read this: “there is a ton of messy CSS3 code, and Safari renders the page best. Chrome is close, but the 3D perspective doesn’t quite work.” I think that I’ll waste my time on this in three years time…

    0
  41. 41

    I’d also advocate “CSS-JS-Booster” as being one of the best fully automated, PHP-driven CSS and JavaScript minification and compression tools available. Otherwise I wouldn’t have felt the need to program it.

    CSS features:
    * combine multiple CSS-files
    * also resolve @import
    * minify CSS
    * Embed any CSS-images smaller 24KB as data-URI or MHTML (for IE <= 7)
    * Split the output back into 2+ even files that can load in parallel
    * GZIP-compress the resulting CSS
    * Have browsers cache the result as long as it remains unchanged
    * If IE6: Issue a JS-command to fix background image caching behaviour

    JavaScript features:
    * combine multiple JS-files resulting in HTTP-requests going down
    * Minify through Google Closure Compiler Webservice, or JSMin as fallback
    * GZIP-compress the resulting JS
    * Have browsers cache the result as long as it remains unchanged

    + Compression of the calling page itself

    http://github.com/Schepp/CSS-JS-Booster

    And wrapped up as WordPress plugin:
    http://wordpress.org/extend/plugins/css-js-booster/

    Regards

    Schepp

    3
  42. 42

    Lovely, thanks for that.

    0
  43. 43

    Great post.
    But, sadly, CSS3 and HTML5 isn’t widely accepted. Some clients of my are still using old browser’s and it’s sad that you can’t implement some nice tools in your websites…

    -2
  44. 44

    This article reminds me of a married guy watching a line of hot models walk by winking and blowing kisses at him. Sure he’d love to seek out the eye candy, but in the end it just isn’t in his best interest due to complications.

    Great post tho, I really enjoyed it!

    2
  45. 45

    How can you call them useful if they don’t work for more than 30% of web users? If you called it 50 cutting edge techniques that would be fine. I don’t consider a technique very useful if it makes me fork my code for different browsers or completely changes the experience between browsers. Once it gets to 90% maybe I can consider it useful.

    -5
  46. 46

    Don’t forget CSS3 Pie! http://www.css3pie.com

    1
  47. 47

    This is incredible!! Thank you so much!

    0
  48. 48

    Just curious, there are many javascript libraries out there (JQuery, MooTools, Prototype) with different specializations. Is there a reason why only JQuery has been featured on most of the recent (months) posts? This post is no different, I didn’t see any other JS libraries featured.

    Again, not looking for a “what’s better” argument, just curious.

    0
  49. 49

    This would be a lot more useful if there were accompanying tests of how well it worked in the major browsers.

    1
  50. 50

    You can use these techniques right away. There are libraries that help you make IE understand these new CSS properties, too. And it gets even better — they are listed in this very post!

    4
  51. 51

    @Yuri @Smacky @Tim

    Turbine for example does cross-browser CSS 3, sometimes using proprietary filters for IE. Those are done by the Turbine plugins, of which there is quite a bunch:

    http://turbine.peterkroener.de/docs.php#plugins

    Release 1.1 will feature border-radius and box-shadow, too.

    0
  52. 52

    This is awesome collection. Thanks a lot.

    0
  53. 53

    anyone else feeling overwhelmed, or is it just me?

    0
  54. 54

    so sexy!!!………………………

    0
  55. 55

    I love css3 but i am still not sure if its ready to be implemented to the world since it has some issues of compatibility with browsers that many people still use to this date.

    What are your thoughts on this , is it safe to start using it now or should we wait to implement css3 in maby a year or half?

    0
  56. 56

    Thanks for the techniques list. Really useful resources especially the mentioned CSS tools and services section ;);)

    0
  57. 57

    wow Thanks for this css ocean. very help full Five Star *****

    1
  58. 58

    @Pierre

    Smashing Magazine herself is not compatible with IE6, so how they will provide you 100% Compatibility articles?

    ——
    Afraz

    0
  59. 59

    Nice collection. thx

    0
  60. 60

    Didn’t even notice it until you mentioned it! They are almost hidden, require excellent vision, and pixel point accuracy to vote.

    -1
  61. 61

    Excellent post now Im going to sharpen up skills so I standout from everyone in my class at unie.

    0
  62. 62

    Really helpfull stuff!!! Thanks a for posting!

    0
  63. 63

    very good tutorials ,thanks for sharing …:D

    0
  64. 64

    Out-of-box

    0
  65. 65

    There all link are not working, please check.

    0
  66. 66

    Sorry for that comment actually there some problem in net.

    0
  67. 67

    Very interessing !
    Bookmarked

    0
  68. 68
  69. 69

    awesome! i spend an hour on your homepage, thanks for the great collection

    0
  70. 70

    The php script is working correct, but I forgot to include the background css for chrome on my example page. I just fixed that and it should display the right background color now!

    1
  71. 71

    Diagonal CSS Sprites – Aaron Barker

    So simple and obvious, but yet so brilliant!

    0
  72. 72

    Great Post! Thanks!

    0
  73. 73

    Great stuff, it’s going to take me a while to get through this post … :-)

    0
  74. 74

    Muito Obrigado!!!
    Essas ferramentas são muito importantes pra mim.

    0
  75. 75

    Thank you for so interesting article!

    0
  76. 76

    What a great list of resources, defiantly be using a lot of them, thanks.

    0
  77. 77

    Wow, it took me 2 days to read this article.

    Loved it, post more similar articles.

    0
  78. 78

    thanks fro sharing

    0
  79. 79
  80. 80

    Great collection. I really like these kind of roundups.

    I also found an interesting CSS3 experiment on http://www.codeforest.net/be-hypnotized-with-css3-creating-an-animated-css3-spiral

    0
  81. 81

    that is really great collection.

    1
  82. 82

    very very useful tips and tricks, will be using lot of them in my next project

    0
  83. 83

    Amazing post. Great collection of css tricks. Thank you. Keep up the good work.

    0
  84. 84

    This is this kind of a fantastic useful resource that you’re offering and you give it away for free. I love seeing web websites that understand the worth of offering a quality useful resource for free. It?s the old what goes around arrives around routine.

    0
  85. 85

    I was just about to mention the same thing. Indispensable if you want to use CSS3 in IE.

    0
  86. 86

    I tried to figure the first one out.. I almost did it….. the icons when you hover over an image, they don’t show up! WHAT!!! thought that i was almost there..

    0
  87. 87

    Great List!

    0

↑ Back to top