CSS: Innovative Techniques and Practical Solutions

Advertisement

Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time, but you don’t have to reinvent the wheel every single time. Other designers may have had the same problem in the past and thus the main goal of this round-up is to share with you a goldmine of new techniques which you will hopefully find very useful and valuable. We also hope that these tutorials and articles will help you solve common design problems and find new ways of approaching tricky CSS issues.

The main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. Please notice that we feature both experimental demos and practical techniques in this article. Next week we will present even more useful new tools and resources for front-end developers. We sincerely appreciate the efforts of the design community — thank you, guys!

Interesting and Original Techniques

Wonder-Webkit: 3D Transforms1
This is a remarkable example of what can be done using CSS3 3D transformations. The interesting stuff is the possibility of manipulate the transformation matrix of any element of the DOM, In this case we get the matrix given only the four end points of the element. Don’t forget to click on the items, too. Who thought a couple of years ago that something like that would be possible with only CSS?

wonder-webkit2

CSS Box Shadow and Text Shadow Experiments3
The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. The article features three remarkable examples of using box-shadow property creatively to achieve effects that don’t have much to do with shadows.

CSS Box Shadow and Text Shadow Experiments4

CSS3 Depth of Field5
Sawyer Hollenshead’s experiment is an attempt to create the “Depth of Field” effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo6 and don’t forget to press ‘n’ to toggle animation.

CSS3 Depth of Field7

Art Deco Selectable Text8
This is a quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge was to have this kind of ‘split letters’ as part of a web page layout, while retaining the ability to select text.

CSS3 Memory9

CSS3 :toggle-button without JavaScript10
This demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.

CSS3 toggle-button without JavaScript11

About War and Bananas12
This student project explores new ways of styling and designing websites in an artistic way. The students from Merz Akademie in Germany used Picasso’s “Guernica” as the footage, seperated the picture into different layers and animated them using CSS.

About war and bananas13

WebKit Clock14
This demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and no image files. The CSS file is huge, yet the result is quite remarkable.

WebKit Clock15

Pure CSS Slideshow16
This technique uses CSS transforms and positioning to create the pure CSS-based slideshow. Unfortunately, no documentation is available (yet).

Pure CSS Slideshow17

CSS Dock18
This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect.

CSS Dock19

Andrew Hoyer20
An interesting experiment by Andrew Hoyer. The walking man is implemented using only CSS3 animations and simple HTML. The key idea behind all of this is the fact that a CSS transformation applied to an element also applies to all of its children. Works in Webkit-browsers only.

Andrew Hoyer21

Type study: An all CSS button22
Dan Cederholm explains how through the use of box-shadow, text-shadow, border-radius, and CSS gradients, we can create a highly polished three-dimensional, responsive button that doesn’t require images.

Type study: An all CSS button23

3D Text24
This technique uses multiple text-shadows to create a 3D appearance of the text on any HTML element. No extra mark-up is used. Works in the latest builds of Safari, Chrome, Firefox, and Opera.

3D Text25

Spin those Icons with CSS326
Tom Kenny features a neat effect which spins the social icons with the help of a CSS transforms and transition when you hover over them. A very nice enhancement.

Spin those Icons with CSS3 - Inspect Element27

The Shapes of CSS28
The article presents various geometrical forms, all created using CSS and a single HTML element. The following forms are presented: square, rectangle, circle, oval, triangle, parallelogram, trapezoid, star, pentagon, hexagon, octagon, heart and infinity — all using CSS only.

The Shapes of CSS29

CSS background image hacks30
Emulating background image crop, background image opacity, background transforms, and improved background positioning. The article explains a few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

CSS background image hacks31

Making Better Select Elements with CSS3 and jQuery32
This tutorial explains how to take an ordinary select element, and replace it with a better looking version, while keeping all the functionality intact. It uses CSS3 multiple background and a transparent PNG image as a sprite. Currently, multiple backgrounds are supported by Firefox, Safari, Chrome and Opera. For Internet Explorer and older versions of the first browsers, a fallback is defined, which is basically just a regular version of the background. When parsing the CSS document, browsers that do not understand multiple background will just ignore the rule and use the plain one.

Making Better Select Elements with jQuery and CSS333

CSS-Only 3D Slideshow34
This tutorial shows how to create a 3D slideshow using only HTML and CSS. No JavaScript required. You’ll be able to mimic a click event with CSS using the :focus pseudo-class and the HTML5 element <figcaption>, but the idea is the same. As the author admits, this method isn’t necessarily “better” than using JavaScript, but simply a neat alternative that takes advantages of the newest HTML5 elements.

Build a Kickbutt CSS-Only 3D Slideshow35

Have Fun with Borders36
This tutorial shows three simple technique to add a light shadow, “pressed” and “beveled” states to text blocks and images. By Soh Tanaka.

Have Fun w/ Borders, Beveled, Pressed, and More!37

Animated CSS3 Owl38
“What about having an owl that moved his eyes every so often and when hovered over would raise his wings while a few light rays would spin in the background. A little excessive? Probably. Necessary? Not at all. However, that’s exactly what I was looking to do with CSS3 transforms, transitions, and animations.” An interesting experiment, best viewed in Safari or Chrome.

CSS3 Transforms, Transitions and Aminations39

CSS Social Sign-in Buttons40
This blog post describes a fairly simple technique for creating nice responsive CSS-buttons using a CSS sprite, border-radius, shadows and CSS gradients.

CSS Social Sign-in Buttons41

Rotating color cube box with CSS3 animation, transforms and gradients42
A yet another remarkable experiment that presents a rotating color cube using CSS3 animations and transforms. Be aware that the browser may slow down a bit when loading the demo.

Rotating color cube box with CSS3 animation, transforms and gradients43

CSS3 Demo: 3D Interactive Galaxy44
A CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, the designer used 3D CSS properties available in Safari 5 and on the iPhone and iPad.

CSS3 Demo: 3D Interactive Galaxy45

Getting Hardboiled with CSS3 2D Transforms46
Andy Clarke explains how to use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards. The working demo is available47 as well.

Case Study: Getting Hardboiled with CSS3 2D Transforms48

How to create Microsoft Office Minibar with jQuery and CSS349
Janko Jovanovic explains how to create a Microsoft Office Minibar 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 CSS350

Angled Content Mask with CSS51
This article explains how to create angled CSS content “masks”. The idea is pretty simple and uses CSS transform property (rotation, to be more precise).

Angled content mask with CSS52

Rotating Feature Boxes53
All the animation here are CSS3 transitions. JavaScript only watches for the clicks and applies and removes classes as needed. So when you click on a block, that block’s class’ is adjusted. The new classes have different size and position values. Because the block has transition CSS applied, those new sizes and postion values are animated as well.

Rotating Feature Boxes54

Pure CSS3 box-shadow page curl effect55
Okay, the CSS3 code here is quirky and might seem a bit bloated first, but it’s a nice example of using various CSS3 features together to create an effect that would usually require images.

Pure CSS3 box-shadow page curl effect56

Pure CSS Folded-Corner Effect57
Learn how to create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds; supported by Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

Pure CSS folded-corner effect58

Useful Practical Techniques

Smooth Fading Image Captions with Pure CSS359
Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included.

Smooth Fading Image Captions with Pure CSS360

Fade Image Into Another61
Learn how to create an image rollover by giving the element a background image. There are three ways to fade in the opacity. Click here to find out more:

fading-image62

New @Font-Face Syntax: Simpler, Easier63
With IE9 and FF4 nearing release, Ethan Dunham from Font Squirrel has revisited the problem of a cross-browser CSS @font-face syntax and found a new and simpler solution. In this article, Richard Fink explains the new syntax and its variations and suggests the most reasonable syntax to use. Also, check FontSpring’s The New Bulletproof @font-face Syntax64. Please notice that this technique no longer works in Internet Explorer 9.

New @Font-Face Syntax: Simpler, Easier65

The New Clearfix Method66
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack67 works great, but the browsers that it targets are either obsolete or well on their way. The new clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, the new clearfix method triggers hasLayout with some proprietary CSS. Thus, the New Clearfix method effectively clears floats in all currently used browsers without using any hacks.

The New Clearfix Method68

Quick Tip: Mimic a Click Event with CSS69
Jeffrey Way shares with us a quick tip with a video that will illustrate a nifty technique by using plain and simple CSS to mimic click events.

Breadcrumb Navigation with CSS Triangles70
This article describes a fairly simple technique for creating triangles with pure CSS. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. Useful for little arrow sticking out from speech bubbles, navigation pointers, and more.

Breadcrumb Navigation with CSS Triangles71

Responsive Images: Experimenting with Context-Aware Image Sizing72
Since Ethan Marcotte coined the term, responsive Web design has gained a lot of attention in the Web design community, mainly due to its remarkable potential for flexible layouts that respond to the browser’s viewport for the best user experience. The main problem with such designs, however, is figuring out how to serve small images to mobile devices and tablets and large ones to desktop displays. The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.

Responsive Images: Experimenting with Context-Aware Image Sizing73

CSS powered ribbons the clean way74
Harry Roberts presents a simple technique that uses an image and CSS to create clean ribbons. This technique creates a white <h2> with a pink background, pulls the <h2> out of the content area with a negative margin and then places the image absolutely left-bottom of the <h2> in a :before pseudo-element.

CSS powered ribbons the clean way75

Create a centred horizontal navigation76
Centring block level elements is easy, just define a width and set margin: 0 auto;, but what if you don’t know that fixed width? You could use text-align: center;, but that won't work on 100%-width block-level elements either. However, there is a way to have a centred horizontal navigation without knowing an explicit width, and without adding CSS.

Keep Margins Out of Link Lists77
When building a menu or other list of links, it's generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier for people to click and lead to better user experience. Make sure list items don't have padding, but links do and don't use margins, so there are no un-clickable gaps.

Keep Margins Out of Link Lists78

Pure CSS3 Post Tags79
This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts. See also Image-Free Tag Shape80.

Pure CSS3 Post Tags81

Styling children based on their number, with CSS382
Lea Verou presents an interesting technique for styling children based on their number. It is based on the relationship between :nth-child and :nth-last-child. With the technique, the number of total rules is still O(N), but the number of selectors in every rule becomes just 2, making this trick practical for far larger numbers of children.

Styling children based on their number, with CSS383

Wrapping Long URLs and Text Content with CSS84
To wrap long URLs, strings of text, and other content, it's enough to apply a carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags). Very useful for cases when code snippets need to be presented in a blog post with a fixed content width.

Wrapping Long URLs and Text Content with CSS85

Pure CSS(3) accordion86
An interesting accordion technique that uses nothing but semantic HTML, CSS and some progressive CSS3. There are also two versions, a horizontal one and a vertical one.

Pure CSS(3) accordion87

Target iPhone and iPad with CSS3 Media Queries88
A detailed explanation of how to se CSS3 media queries to apply CSS style to the portrait and landscape modes in mobile devices such as iPad or iPhone.

Rein In Fluid Width By Limiting HTML Width89
If you are making a fluid width site but wish to limit the maximum width it can expand, you can do so easily by literally applying a max-width to the html element. Quick and useful tip.

Rein In Fluid Width By Limiting HTML Width90

Inline Boxes with Bottom Alignment91
Imagine that you want to keep a "Submit" button at the bottom of a line box, aligned with form controls positioned below their label (see below). If the containing block is not wide enough for the "Submit" button to flow next to the other controls, that button must be displayed at the beginning of the next line box with minimal space above it. The article explains a solution for this problem.

CSS Quick Tip: Inline Boxes with Bottom Alignment92

Transparent CSS Sprites93
The idea of the technique is to create a transparent sprite allowing the background-color to show through. If you are familiar with CSS Sprites, you should be able to grasp this twist relatively easily. Simply, an image with a transparent “knocked-out” transparent center is placed over a background colour. Changing the background colour changes the appearance of the element.

Jump links and viewport positioning94
"Using within-page links presses the jumped-to content right at the very top of the viewport. This can be a problem when using a fixed header. With a bit of hackery, there are some CSS methods to insert space between the top of the viewport and the target element within a page."

Jump links and viewport positioning95

Mimic Equal Columns with CSS3 Gradients96
"What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as the primary content section exceeds the height of the sidebar. Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images." A nice piece by Jeffrey Way.

Double Click in CSS97
There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Now, here is the idea: can we somehow pull off a double click with pure CSS? Yes, we can, if the input covers link, buries on focus, which triggers hover on link keeping it on top. Work on WebKit (including Mobile) and Firefox. So we've basically created a "light" alternative to hover for the sequence tap → change state / activate link → tap again to visit link.

Double Click in CSS98

Center Multiple DIVs with CSS99
At some point, you may have a situation where you want to center multiple elements (maybe «div» elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center. You can achieve something similar by taking advantage of CSS’s flexibity with “recasting” elements.

Center Multiple DIVs with CSS100

Clearing Floats with Overflow101
One of the common problems we face when coding with float-based layouts is that the wrapper container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new trick, but still very useful.

CSS: Clearing Floats with Overflow102

Different Transitions for Hover On / Hover Off103
The idea of this technique is to solve an interesting problem: what about using different transition for hover on and off? In the example, when you hover over, the :hover transition overrides the transition set in the regular state, and that property animates. When you hover off, the transition from the regular state takes over and that property animates. Useful.

Stretch a Box to its Parent's Bounds104
A powerful feature that enables absolute positioning of stretching a box. The most popular use is having a box positioned in either top or bottom and right or left coordinates.

Equal Height Column Layouts with Borders and Negative Margins in CSS105
This article demonstrates different construct techniques and brushes up on a few concepts you might have missed.

Equal Height Column Layouts with Borders and Negative Margins in CSS106

Using CSS Text-Shadow to Create Cool Text Effects107
The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop's Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. A demo is available if you'd like to see what it looks like before you give it a try yourself.

Using CSS Text-Shadow to Create Cool Text Effects108

Fluid Width Equal Height Columns109
Equal height columns have been a need of web designers forever. If all the columns share the same background, equal height is irrelevant because you can set that background on a parent element.

Fluid Width Equal Height Columns110

CSS Box-Shadow:Inset111
It's always nice to be able to add a vignetting effect to photos sans-Photoshop, but the way browsers interpret box-shadow:inset is to throw the shadow behind the image, rendering it invisible. While this seems pretty useless, it does make sense when you consider other kinds of content.

CSS Box-Shadow:Inset112

Flexible Navigation113
An interesting technique for a navigation that uses only CSS transforms and transitions and no JavaScript.

flexible-nav114

Circle Zoom115
A very nice hover effect: the Twitter icon has a circle as a background and the circle increases its radius when the users hovers the mouse over it.

circle-zoom116

Last Click

CSS3 Memory117
A game of memory in which you will have to find three matching cards (as a tribute to the CSS transitions).

CSS3 Memory118

CSS 3D Scrolling @ BeerCamp at SXSW 2011119
Now, that's innovative: while you are scrolling down the page, the site appears to have a 3D scrolling effect. And it has a nice Inception reference. Can you discover it?

BeerCamp at SXSW 2011120

50 New Useful CSS Techniques, Tutorials and Tools121
The previous round-up of CSS techniques on Smashing Magazine. In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills.

50 New Useful CSS Techniques, Tutorials and Tools122

Footnotes

  1. 1 http://www.is-real.net/experiments/css3/wonder-webkit/
  2. 2 http://www.is-real.net/experiments/css3/wonder-webkit/
  3. 3 http://www.zurb.com/playground/css-boxshadow-experiments
  4. 4 http://www.zurb.com/playground/css-boxshadow-experiments
  5. 5 http://forrst.com/posts/CSS3_Depth_of_Field-4zh
  6. 6 http://shakenandstirredweb.com/playground/blur/
  7. 7 http://forrst.com/posts/CSS3_Depth_of_Field-4zh
  8. 8 http://manufacturaindependente.com/colorfont/
  9. 9 http://manufacturaindependente.com/colorfont/
  10. 10 http://lab.simurai.com/css/toggle/#box
  11. 11 http://lab.simurai.com/css/toggle/#box
  12. 12 http://id.merz-akademie.de/guernica/
  13. 13 http://id.merz-akademie.de/guernica/
  14. 14 http://onotakehiko.com/webkitclock/
  15. 15 http://onotakehiko.com/webkitclock/
  16. 16 http://www.designmadeingermany.de/slideshow/#a1
  17. 17 http://www.designmadeingermany.de/slideshow/#a1
  18. 18 http://michaelhue.com/cssdock/
  19. 19 http://michaelhue.com/cssdock/
  20. 20 http://www.andrew-hoyer.com/experiments/walking/
  21. 21 http://www.andrew-hoyer.com/experiments/walking/
  22. 22 http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/
  23. 23 http://blog.typekit.com/2011/02/10/type-study-an-all-css-button/
  24. 24 http://markdotto.com/playground/3d-text/
  25. 25 http://markdotto.com/playground/3d-text/
  26. 26 http://inspectelement.com/articles/spin-those-icons-with-css3/
  27. 27 http://inspectelement.com/articles/spin-those-icons-with-css3/
  28. 28 http://css-tricks.com/examples/ShapesOfCSS/
  29. 29 http://css-tricks.com/examples/ShapesOfCSS/
  30. 30 http://nicolasgallagher.com/css-background-image-hacks/
  31. 31 http://nicolasgallagher.com/css-background-image-hacks/
  32. 32 http://tutorialzine.com/2010/11/better-select-jquery-css3/
  33. 33 http://tutorialzine.com/2010/11/better-select-jquery-css3/
  34. 34 http://net.tutsplus.com/tutorials/html-css-techniques/build-a-kickbutt-css-only-3d-slideshow/
  35. 35 http://net.tutsplus.com/tutorials/html-css-techniques/build-a-kickbutt-css-only-3d-slideshow/
  36. 36 http://www.sohtanaka.com/web-design/css-border-tricks-tutorial/
  37. 37 http://www.sohtanaka.com/web-design/css-border-tricks-tutorial/
  38. 38 http://www.shayhowe.com/tutorial/css3-animated-owl-tutorial/
  39. 39 http://www.shayhowe.com/tutorial/css3-animated-owl-tutorial/
  40. 40 http://blog.bloop.co/33827558
  41. 41 http://blog.bloop.co/33827558
  42. 42 http://css-class.com/test/css/3/transform-color-cube3.htm
  43. 43 http://css-class.com/test/css/3/transform-color-cube3.htm
  44. 44 http://www.zachstronaut.com/posts/2010/07/28/3d-css3-galaxy.html
  45. 45 http://www.zachstronaut.com/posts/2010/07/28/3d-css3-galaxy.html
  46. 46 http://blog.typekit.com/2011/01/25/case-study-getting-hardboiled-with-css3-2d-transforms/
  47. 47 http://hardboiledwebdesign.com/demo/2011-01-26/index.html
  48. 48 http://blog.typekit.com/2011/01/25/case-study-getting-hardboiled-with-css3-2d-transforms/
  49. 49 http://www.jankoatwarpspeed.com/post/2010/05/23/microsoft-office-minibar-jQuery-CSS3.aspx
  50. 50 http://www.jankoatwarpspeed.com/post/2010/05/23/microsoft-office-minibar-jQuery-CSS3.aspx
  51. 51 http://cssglobe.com/post/9392/angled-content-mask-with-css
  52. 52 http://cssglobe.com/post/9392/angled-content-mask-with-css
  53. 53 http://css-tricks.com/rotating-feature-boxes/
  54. 54 http://css-tricks.com/rotating-feature-boxes/
  55. 55 http://www.matthamm.com/box-shadow-curl.html
  56. 56 http://www.matthamm.com/box-shadow-curl.html
  57. 57 http://nicolasgallagher.com/pure-css-folded-corner-effect/
  58. 58 http://nicolasgallagher.com/pure-css-folded-corner-effect/
  59. 59 http://www.elated.com/articles/smooth-fading-image-captions-with-pure-css3/
  60. 60 http://www.elated.com/articles/smooth-fading-image-captions-with-pure-css3/
  61. 61 http://css-tricks.com/fade-image-within-sprite/
  62. 62 http://css-tricks.com/fade-image-within-sprite/
  63. 63 http://readableweb.com/new-font-face-syntax-simpler-easier/
  64. 64 http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
  65. 65 http://readableweb.com/new-font-face-syntax-simpler-easier/
  66. 66 http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
  67. 67 http://perishablepress.com/press/2008/06/18/css-hackz-series-clearing-floats-with-the-clearfix-hack/
  68. 68 http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
  69. 69 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-mimic-a-click-event-with-css/
  70. 70 http://css-tricks.com/triangle-breadcrumbs/
  71. 71 http://css-tricks.com/triangle-breadcrumbs/
  72. 72 http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
  73. 73 http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
  74. 74 http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/
  75. 75 http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/
  76. 76 http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/
  77. 77 http://css-tricks.com/keep-margins-out-of-link-lists/
  78. 78 http://css-tricks.com/keep-margins-out-of-link-lists/
  79. 79 http://cssglobe.com/post/9435/pure-css3-post-tags
  80. 80 http://playground.deaxon.com/css/tag-shape/
  81. 81 http://cssglobe.com/post/9435/pure-css3-post-tags
  82. 82 http://leaverou.me/2011/01/styling-children-based-on-their-number-with-css3/
  83. 83 http://leaverou.me/2011/01/styling-children-based-on-their-number-with-css3/
  84. 84 http://perishablepress.com/press/2010/06/01/wrapping-content/
  85. 85 http://perishablepress.com/press/2010/06/01/wrapping-content/
  86. 86 http://www.venturelab.co.uk/devblog/2011/01/pure-css3-accordion/
  87. 87 http://www.venturelab.co.uk/devblog/2011/01/pure-css3-accordion/
  88. 88 http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
  89. 89 http://css-tricks.com/limit-html-width/
  90. 90 http://css-tricks.com/limit-html-width/
  91. 91 http://www.yuiblog.com/blog/2010/11/15/inline-boxes-with-bottom-alignment/
  92. 92 http://www.yuiblog.com/blog/2010/11/15/inline-boxes-with-bottom-alignment/
  93. 93 http://www.smashingmagazine.com/2010/10/31/transparent-css-sprites/
  94. 94 http://nicolasgallagher.com/jump-links-and-viewport-positioning/
  95. 95 http://nicolasgallagher.com/jump-links-and-viewport-positioning/
  96. 96 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-mimic-equal-columns-with-css3-gradients/
  97. 97 http://css-tricks.com/double-click-in-css/
  98. 98 http://css-tricks.com/double-click-in-css/
  99. 99 http://www.impressivewebs.com/center-multiple-divs/
  100. 100 http://www.impressivewebs.com/center-multiple-divs/
  101. 101 http://www.webdesignerwall.com/tutorials/css-clearing-floats-with-overflow/
  102. 102 http://www.webdesignerwall.com/tutorials/css-clearing-floats-with-overflow/
  103. 103 http://css-tricks.com/different-transitions-for-hover-on-hover-off/
  104. 104 http://devign.me/css-stretch-a-box-to-its-parent-bounds/
  105. 105 http://www.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
  106. 106 http://www.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
  107. 107 http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
  108. 108 http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
  109. 109 http://css-tricks.com/fluid-width-equal-height-columns/
  110. 110 http://css-tricks.com/fluid-width-equal-height-columns/
  111. 111 http://trentwalton.com/2010/11/22/css-box-shadowinset/
  112. 112 http://trentwalton.com/2010/11/22/css-box-shadowinset/
  113. 113 http://playground.deaxon.com/css/flex-nav/
  114. 114 http://playground.deaxon.com/css/flex-nav/
  115. 115 http://playground.deaxon.com/css/circle-zoom/
  116. 116 http://playground.deaxon.com/css/circle-zoom/
  117. 117 http://media.miekd.com/css3memory/
  118. 118 http://media.miekd.com/css3memory/
  119. 119 http://2011.beercamp.com/
  120. 120 http://2011.beercamp.com/
  121. 121 http://www.smashingmagazine.com/2010/10/12/50-new-useful-css-techniques-tutorials-and-tools/
  122. 122 http://www.smashingmagazine.com/2010/10/12/50-new-useful-css-techniques-tutorials-and-tools/

↑ 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, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    luis herrero jimenez

    February 16, 2011 11:11 am

    Instagram logo with CSS3. Only works in Firefox (yet)
    http://jsfiddle.net/luishj/RnfBx/

    0
  2. 2

    Awesome collection Vitaly, a lot to learn here.

    Also, thank you for including my owl tutorial!

    0
  3. 3

    interesante aporte

    0
  4. 4

    Thanks Vitaly! Great set of resources. Now if only the masses update their aging browsers.

    0
  5. 5

    Fernando Artigiano

    February 16, 2011 12:40 pm

    Terrific! Very inspiring stuff as always.

    0
  6. 6

    This is a great post! Thanks for the inspiration!

    0
  7. 7

    Anthony M. Torres

    February 16, 2011 1:13 pm

    Wow! Great articles and techniques here. Love the CSS3 3D text…great all around. Thank you.

    0
  8. 8

    Articles like this are why Smashing Magazine rocks!

    0
  9. 11

    WOW!! that’s what i just love !! thank you so much :)

    0
  10. 12

    Whoo, what a bright and inspirational resource!

    Hats off!

    0
  11. 13

    Sawyer Hollenshead

    February 16, 2011 6:01 pm

    Thanks for including my Depth of Field experiment, I appreciate it!

    0
  12. 14

    thank you vitaly, this post is great.

    0
  13. 15

    I made a quick CSS3 experiment (Webkit only), simulating a mobile phone UI.

    http://jsfiddle.net/ceble/fB7YA/

    0
  14. 16

    Thanks for all the hard work!!
    These are one of the most amazing collection of CSS3 techniques. They are amazing and broaden the vision of the possibilities webdesign can go through! Some of these effects were impossible without flash or 3d softwares or javascript a few years back but now they are all tamed under css and a bit of jquery! Thanks to the web community too for this!

    Also, I’m glad some of these are really handy for me!!

    0
  15. 17

    Lovin’ these!

    0
  16. 18

    Very helpful, thank you!

    0
  17. 19

    Great List, i was waiting long for a good smashing mag post like that. For our german readers, i recommend my own definition of a sexy CSS 3 Button: http://www.shiftedwork.de/blog/2010/08/28/the-magic-of-css3-sexy-buttons/

    0
  18. 20

    Great examples, it really shows what can be accomplished with CSS3.

    0
  19. 21

    Thank you Vitaly for adding my rotating color cube demo. Working on a few more offline. CSS3 is awesome but 3D animation is amazing.

    I’m still looking at some of the other links you have given.

    0
  20. 22

    Very interesting. I didn’t have time to look at them all, but I like the CSS3 toggle button. Here’s my own experiment with CSS3 (2D transforms), using jQuery: http://wayfarerweb.com/jquery/plugins/wowwindow/

    0
  21. 23

    A great collection of CSS techniques. I had a go at creating the CSS3 Ribbons like Harry’s on New Years Day and blogged about it at the end January. My version is pure CSS without any images though and Harry’s would be a good fall back for it in IE.

    My tutorial for it is – http://bit.ly/fHCcSA
    and a demo page of what else is possible – http://bit.ly/dVah34

    0
  22. 24

    Great list, much appreciated work. These examples go far beyond the practice how most web developers use CSS today. But remember the days when tables where used to achieve layout grids? Then CSS came to rescue and separated presentation from content structure, and everybody was happy again.
    Now we have animated buttons and other stuff, purely designed in CSS. Is this the right direction, should we indeed use CSS techniques to achieve this? I really wonder. Some more critical comments in here, please. Thank you.

    0
    • 25

      @Gerd.

      Some of the new CSS3 transitions actually help with accessibility.

      The below demo works as intended in Opera 11, Safari 5 in the first two examples and Firefox 4b for all examples. It allows someone to momentarily move off the menu items and still have them in a hovered or focused state.

      http://css-class.com/test/css/3/expanding-tabs-with-transition.htm

      The transform properties can allow authors to show things that can only be fully visualized in a 2D or 3D state.

      0
  23. 26

    Wow this stuff is nice cant wait to jump into making some of those examples.

    0
    • 27

      twubrr on February 8, 2011 The Best should had a couple of sprit drinks before he started that normally works to wear off the nerves, to bad im a best man on 3rd april, and i dont know what to say LOL

      0
  24. 28

    Awesome post Vitaly! Thank you for including my clearfix and pre-wrapping articles among such excellent resources. Cheers :)

    0
  25. 30

    Simply great post! The best of the year to this date!

    0
  26. 31

    Css water wane menu. Only works in Google chrome and Safari http://canaydogan.net/wp-content/uploads/demos/water-wave-menu/menu.html

    0
  27. 32

    These techniques are superb! Hopefuly IE will support CSS3 soon :-/

    0
  28. 33

    Great set of techniques, but should definitely come with a warning to consider whether these techniques are actually appropriate for real world use. Experimentation is nice, but it’s not because it is possible with css(3) that we should ditch javascript or other solutions, which are often favorable.

    0
  29. 34

    awesome lists….yihaaaa m/
    welcome to the CSS World…hihihi

    0
  30. 35

    Hi Vitaly,

    What about the “newer” clearfix method?
    http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

    Followed by a warning about clearfix:
    http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/

    So people know what they are getting into…

    0
  31. 36

    Great article and some amazing effects, especially like the spinning icons.

    0
  32. 37

    Fantastic post! Amazing what can be done with css3 these days!

    0
  33. 38

    Ragnarokgoestoholywood

    February 20, 2011 11:05 am

    “And it has a nice Inception reference. Can you discover it?”
    - Got it ;)

    –> “Behind him, on the table, the spinning top is STILL SPINNING. And we — FADE OUT”

    0
  34. 39

    THIS POST IS AWESOME

    The Depth of Field effect is so cool, definitely trying that one now
    Fantastic stuff cheers

    0
  35. 40

    nice super tutorial.

    Thanks lot

    0
  36. 41

    This is amazing, thank you for these great resources.

    0
  37. 42

    This was one amazing post! As an internet marketer where website design also comes into play, CSS is crucial for example when it comes to site load time, or even SEO. Check this blog post: http://blog.9thsphere.com/blog/future-of-internet-marketing that touches light on how and why to use CSS effectively for your website. Using CSS Sprites, where possible and to do effects such as drop shadows, boxes, rounded corners etc (like the way mentioned in this blog post) all help with a cleaner, smoother and faster website.

    0
  38. 43

    Regarding “Making Better Select Elements with jQuery and CSS3″:

    If one can not select it by hitting the characters the desired item beginsns with, or navigate through using arrow keys, it has nothing in common with a select element for me.

    Poor usability for the sake of pleasant look != good design.

    Otherwise nice collection, good job!

    0
  39. 44

    This article was really cool and useful to this particular css noob. There’s a lot to experiment with in the world of CSS!

    0
  40. 45

    iMagdy Production

    February 26, 2011 9:06 pm

    Even better “CSS powered ribbons the clean way”

    You can check it out here: http://imagdyproduction.com/blog/css_ribbons_-_the_clean_way_(improved).html

    Thanks again :) amazing~

    0
  41. 46

    Awesome collection. I will practice some of this examples. Thanks!

    0
  42. 47

    Están geniales, thanks for share!

    0
  43. 48

    These were all really helpful. They will really help me in the future when I run into these kinds of situations.

    0
  44. 49

    This is a great post! Thanks for the inspiration! AweSOme Job!

    0

↑ Back to top