Take Your Design To The Next Level With CSS3

Advertisement

Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it’s clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can’t we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?

It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.

In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.

Please also consider reading our previous, related article:

Using Browser-Specific Properties

To use most CSS3 properties today, we have to use vendor-specific extensions together with the original properties. The reason is that until now, browsers have only partially implemented new CSS3 properties. Unfortunately, some properties may not even become W3C recommendations in the end, so it’s important to target browser-specific properties by differentiating them from standard properties to (and then replacing them with the standardized ones when they become superfluous).

The disadvantages to this approach are, of course, a messy style sheet and inconsistent design across Web browsers. After all, we do not want to revive the need for proprietary browser hacks in our style sheets. Internet Explorer’s infamous <marquee>, <blink> and other tags were employed in many style sheets and became legendary in the 1990s; they still make many existing websites inconsistent or even unreadable. And we don’t want to put ourselves in the same situation now, right?

However, websites do not2 have to look exactly the same in all browsers. And using browser-specific properties to achieve particular effects in certain browsers sometimes makes sense.

The most common extensions are the ones used for Webkit-based browsers (for example, Safari), which start with -webkit-, and Gecko-based browsers (for example, Firefox), which start with -moz-. Konqueror (-khtml-), Opera (-o-) and Internet Explorer (-ms-) have their own proprietary extensions.

As professional designers, we have to bear in mind that using these vendor-specific properties will make our style sheets invalid. So putting them in the final version of a style sheet is rarely a sound idea for design purists. But in some cases, like when experimenting or learning, we can at least consider including them in a style sheet together with standardized CSS properties.

Useful Links

1. Selectors

CSS Selectors are an incredibly powerful tool: they allow us to target specific HTML elements in our markup without having to rely on unnecessary classes, IDs and JavaScripts. Most of them aren’t new to CSS3 but are not as widely used as they should be. Advanced selectors can be helpful if you are trying to achieve a clean, lightweight markup and better separation of structure and presentation. They can reduce the number of classes and IDs in the markup and make it easier for designers to maintain a style sheet.

Attribute selectors

Three new kinds of attribute selectors are a part of CSS3 specs:

  • [att^="value"]
    Matches elements to an attribute that starts with the specified value.
  • [att$="value"]
    Matches elements to an attribute that ends with the specified value.
  • [att*="value"]
    Matches elements to an attribute that contains the specified value.

tweetCC targeted link6

tweetCC277 uses an attribute selector to target links that have a title attribute ending in the words “tweetCC”:

a[title$="tweetCC"] { 
    position: absolute; 
    top: 0; 
    right: 0; 
    display: block; 
    width: 140px; 
    height: 140px; 
    text-indent: -9999px; 
    }

Browser support: The only browser that doesn’t support CSS3 attribute selectors is IE6. Both IE7 and IE8, Opera and Webkit- and Gecko-based browsers do. So using them in your style sheet is definitely safe.

Combinators

The only new kind of combinator introduced in CSS3 is the general sibling selector. It targets all siblings of an element that have the same parent.

For example, to add a gray border to all images that are a sibling of a particular div (and both the div and the images should have the same parent), defining the following in your style sheet is enough:

div~img {
	border: 1px solid #ccc;
	}

Browser support: All major browsers support the general sibling selector except our favorite: Internet Explorer 6.

Pseudo-Classes

Probably the most extensive new addition to CSS are new pseudo-classes. Here are some of the most interesting and useful ones:

  • :nth-child(n)
    Lets you target elements based on their positions in a parent’s list of child elements. You can use a number, a number expression or the odd and even keywords (perfect for Zebra-style table rows). So, if you want to match a group of three elements after the forth element, you can simply use:
    name="code">:nth-child(3n+4) { background-color: #ccc; }
  • :nth-last-child(n)
    Follows the same idea as the previous selector, but matches the last children of a parent element. For example, to target the last two paragraphs in a div, we would use the following selector:
    name="code">div p:nth-last-child(-n+2)
  • :last-child
    Matches the last child of a parent, and is equivalent to
    name="code">:nth-last-child(1)
  • :checked
    Matches elements that are checked; for example, checked boxes.
  • :empty
    Matches elements that have no children or are empty.
  • :not(s)
    Matches all elements that do not match the specified declaration(s). For example, if we want to make all paragraphs that aren’t of the class “lead” to appear black, we would write:
    name="code">p:not([class*="lead"]) { color: black; }

    .

On his website, Andrea Gandino8 uses the :last-child pseudo-selector to target the last paragraph of each blog post and apply a margin of 0 to it:

Andrea Gandino uses the :last-child pseudo-element on his blog post paragraphs

#primary .text p:last-child { 
    margin: 0; 
    }

Browser support: Webkit-based and Opera browsers support all new CSS3 pseudo-selectors. Firefox 2 and 3 (Gecko-based) only support :not(s), :last-child, :only-child, :root, :empty, :target, :checked, :enabled and :disabled, but Firefox 3.5 will have wide support of CSS3 selectors9. Trident-based browsers (Internet Explorer) have virtually no support of pseudo-selectors.

Pseudo-Elements

The only pseudo-element introduced in CSS3 is ::selection. It lets you target elements that have been highlighted by the user.

Browser support: No current Internet Explorer or Firefox browsers support the ::selection pseudo-element. Safari, Opera and Chrome do.

Useful Links

2. RGBA And Opacity

RGBA lets you specify not only the color but the opacity of an element. Some browsers still don’t support it, so it’s good practice to specify before the RGBa color another color without transparency that older browsers will understand.

Tim Van Damme's hover effects18
Tim Van Damme uses RGBA colors on hover effects on links

On his website, Tim Van Damme19 uses RGBA colors on hover effects; for example, on the network links on his home page:

#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
    }

When setting an RGBA color, we must specify the red, blue and green values either with an integer value between 0 and 255 or with percentages. The alpha value should be between 0.0 and 1.0; for example, 0.5 for a 50% opacity.

The difference between RGBA and opacity is that the former applies transparency only to a particular element, whereas the latter affects the element we target and all of its children.

Here is an example of how we would add 80% opacity to a div:

div { 
	opacity: 0.8; 
	}

Browser support: RGBA is supported by Webkit-based browsers. No Internet Explorer browser supports it. Firefox 2 does’t support it either, but Firefox 3 does, as does Opera 9.5. Opacity is supported by Opera and Webkit- and Gecko-based browsers, but is not supported by either IE release.

Useful Links

3. Multi-Column Layout

This new CSS3 selector lets you achieve multi-column layouts without having to use multiple divs. The browser interprets the properties and create the columns, giving the text a newspaper-like flow.

tweetCC's home page26
tweetCC uses CSS3 multi-column selector on its home page

tweetCC277 displays introductory text in four columns on its home page. The four columns aren’t floated divs; instead, the Web designer uses the CSS3 multi-column layout as follows:

.index #content div { 
    -webkit-column-count : 4; 
    -webkit-column-gap : 20px; 
    -moz-column-count : 4; 
    -moz-column-gap : 20px; 
    }

We can define three things with this selector: the number of columns (column-count), the width of each column (column-width, not used in the example) and the gap between columns (column-gap). If column-count is not set, the browser accommodates as many columns that fit in the available width.

To add a vertical separator between columns, we can use the column-rule property, which functions pretty much as a border property:

div {
    column-rule: 1px solid #00000;
    }

Browsers that don’t support these properties render the content as simple text, as if there were no columns.

Related properties: column-break-after, column-break-before, column-span, column-fill.

Browser support: Multi-column layouts are supported by Safari 3 and 4 and Firefox 1.5+.

Useful Links

4. Multiple Backgrounds

CSS3 lets you apply multiple layered backgrounds to an element using multiple properties such as background-image, background-repeat, background-size, background-position, background-origin and background-clip.

The easiest way to add multiple backgrounds to an element is to use the shorthand code. You can specify all of the above properties in a single declaration, but the most commonly used are image, position and repeat:

div {
	background: url(example.jpg) top left no-repeat, 
		url(example2.jpg) bottom left no-repeat, 
		url(example3.jpg) center center repeat-y;
	}

The first image will be the one “closest” to the user.

A more complex version of the same property would be:

div {
	background: url(example.jpg) top left (100% 2em) no-repeat, 
		url(example2.jpg) bottom left (100% 2em) no-repeat, 
		url(example3.jpg) center center (10em 10em) repeat-y;
	}

In this case, (100% 2em) is the background-size value; the background image in the top-left corner would stretch the full width of the div and be 2em high.

Because very few browsers support it, and because not displaying backgrounds on a website can really impair a website’s visual impact, this is not a widely used CSS3 property. However, it could greatly improve a Web designer’s workflow and significantly reduce the amount of markup that would otherwise be needed to achieve the same effect.

Browser support: multiple backgrounds only work on Safari and Konqueror.

Useful Links

5. Word Wrap

The word-wrap property is used to prevent long words from overflowing. It can have one of two values: normal and break-word. The normal value (the default) breaks words only at allowed break points, like hyphens. If break-word is used, the word can be broken where needed to fit the given space and prevent overflowing.

WordPress admin area37
The WordPress admin area uses word-wrap in data tables.

In the WordPress8838 admin area, the word-wrap property is used for elements in tables; for example, in lists on Posts and Pages:

.widefat * {
    word-wrap: break-word;
    }

Browser support: word-wrap is supported by Internet Explorer and Safari. Firefox will support it in version 3.5.

Useful Links

6. Text Shadow

Despite existing since CSS2, text-shadow is not a widely used CSS property. But it will very likely be widely adopted with CSS3. The property gives designers a new cross-browser tool to add dimension to designs and make text stand out.

You need to make sure, though, that the text in your design is readable in case the user’s browser doesn’t support advanced CSS3 properties. Give the text and background color enough contrast in case the text-shadow property isn’t rendered or understood properly by the browser.

Beak uses the text-shadow-property of CSS 343
Beakapp uses the text-shadow property on its website: for the content area.

BeakApp.com44 uses the text-shadow property for the content area, adding depth and dimension to the text and making it stand out without the use of an image replacement technique. This property is visible only in Safari and Google Chrome.

The CSS for the website’s main navigation shows the following:

.signup_area p {
	text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Here, we have the shadow color (using RGBA, see above), followed by the right (x coordinate) and bottom (y coordinate) offset, and finally the blur radius.

To apply multiple shadows to a text, separate the shadows with a comma. For example:

p {
    text-shadow: red 4px 4px 2px, 
		yellow -4px -4px 2px, 
		green -4px 4px 2px;
    }

Browser support: Webkit-based browsers and Opera 9.5 support text-shadow. Internet Explorer doesn’t support it, and Firefox will only support it in version 3.5.

Useful Links

7. @font-face-Attribute

Despite being one of the most highly anticipated CSS3 features (even though it’s been around since CSS2), @font-face is still not as widely adopted on the Web as other CSS3 properties. This is due mainly to font licensing and copyright issues: embedded fonts are easily downloaded from the Web, a major concern to type foundries.

However, a solution to the licensing issues seems to be on the way. TypeKit52 promises to come up with a solution that would make it easier for designers and type foundries to agree on licensing issues that would significantly enrich the typography in Web design and make the @font-face attribute usable in practice.

Mozilla Labs JetPack font53
Mozilla Labs JetPack website resorts to the font-face rule to use the DroidSans typeface

One of the few websites that use the property is the new JetPack MozillaLabs54.

@font-face{
    font-family: 'DroidSans'; 
    src: url('../fonts/DroidSans.ttf') format('truetype');
    }

To use embedded fonts on your websites, you have to declare each style separately (for example, normal, bold and italic). Make sure to only use fonts that have been licensed for such use on the Web and to give the designer credit when required.

After the @font-face rule, you can call the font with a normal font-family property in your style sheet:

p {
    font-family: "DroidSans";
    }

If a browser doesn’t support @font-face, it will revert to the next font specified in the font-family property (CSS font stacks). This may be okay for some websites, if the @font-face font is a luxury for supported browsers; but if the font plays a major role in the design or is a key part of the visual identity of the company, you will probably want to use another solution, such as sIFR55 or Cufón5856. Bear in mind, though, that these tools are more appropriate for headings and short passages of text, and copying and pasting this kind of content is difficult and not user-friendly.

Font embedding on MezzoBlue.com57
Wouldn’t it be nice to have such type for body copy on the Web? Dave Shea experiments with Cufón5856 and Museo Sans59. Beautiful!

Browser support: @font-face is supported by Safari 3.1+. Internet Explorer supports it if EOT fonts are used. Opera 10 and Firefox 3.5 should support it.

Useful Links

8. Border Radius

Border-radius adds curved corners to HTML elements without background images. Currently, it is probably the most widely used CSS3 property for the simple reason that rounded corners are just nice to have and aren’t critical to design or usability.

Instead of adding cryptic JavaScript or unnecessary HTML markup, just add a couple of extra properties in CSS and hope for the best. The solution is cleaner and more efficient and can save you from having to spend a couple of hours finding clever browser workarounds for CSS and JavaScript-based rounded corners.

Sam Brown's blog categories67
Sam Brown’s blog using border-radius on headings, categories and links.

On his website, Sam Brown68 uses the border-radius property heavily on headings, links and divs. Achieving this effect with images would be time-consuming. This is one of the reasons why using CSS3 properties in our projects is such an important step towards efficiency in Web development.

To add rounded corners to category links, Sam uses the following CSS snippet:

h2 span { 
	color: #1a1a1a; 
	padding: .5em; 
	-webkit-border-radius: 6px; 
	-moz-border-radius: 6px; 
	}

We can go one step further and add the original CSS3 property and Konqueror proprietary extension, making it:

h2 span {
    color: #1a1a1a;
    padding: .5em; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    -khtml-border-radius: 6px; 
    border-radius: 6px; 
    }

If we want to apply the property to certain corners of our element, we can target each corner separately:

div {	
    -moz-border-radius-topright: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    }

Browser support: border-radius is supported by Webkit- and Gecko-based browsers but not by any version of Internet Explorer or Opera.

Useful Links

9. Border Image

The border-image property allows you to specify an image for the border of an element, freeing you from the usual solid, dotted and other border styles. This property gives designers a better tool with which to consistently style the borders of design elements, being better than the background-image property (for advanced designs) or rigid default border styles. We can also explicitly define how a border should be scaled or tiled.

SpoonGraphics blog's border-image74
The SpoonGraphics blog uses the border-image property for its images borders

On the SpoonGraphis blog75, border-image is used for the images borders as follows:

#content .post img {
    border: 6px solid #f2e6d1;
    -webkit-border-image: url(main-border.png) 6 repeat;
    -moz-border-image: url(main-border.png) 6 repeat;
    border-image: url(main-border.png) 6 repeat;
    }

To define the border-image, we must specify the image location, which part of the image should be cropped and used for each side of the element and how the image should be scaled and tiled.

To create a div that uses the image below as its border, we would use the following code (we will add in the Opera and Konqueror extensions for this example):

Image used as border-image

div {
    border-width: 18px 25px 25px 18px;
    -webkit-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -moz-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -o-border-image: url(example.png) 18 25 25 18 stretch stretch;
    -khtml-border-image: url(example.png) 18 25 25 18 stretch stretch;
    border-image: url(example.png) 18 25 25 18 stretch stretch;
	}

The last value of this property can be stretch (default), round (only a whole number of repeated images will fit the space allowed) or repeat. In our example, the top, bottom, left and right border images are stretched. If we want only the top and bottom sides to stretch, we would use this CSS:

div {
    (...)
    border-image: url(example.png) 18 25 25 18 stretch repeat;
	}

We can also target each corner separately if we want to use a different image for each:

div {
    border-top-image: url(example.png) 5 5 stretch;
    border-right-image: url(example.png) 5 5 stretch;
    border-bottom-image: url(example.png) 5 5 stretch;
    border-left-image: url(example.png) 5 5 stretch;
    border-top-left-image: url(example.png) 5 5 stretch;
    border-top-right-image: url(example.png) 5 5 stretch;
    border-bottom-left-image: url(example.png) 5 5 stretch;
    border-bottom-right-image: url(example.png) 5 5 stretch;
    }

If a browser doesn’t support the border-image property, it will ignore it and only apply the other defined border properties, such as border-width and border-color.

Browser support: border-image is currently only supported by Webkit-based browsers. Support in the next release of Firefox is not certain.

Useful Links

10. Box Shadow

The box-shadow property adds shadows to HTML elements without extra markup or background images. Like the text-shadow property, it enhances the detail of a design; and because it doesn’t really affect the readability of content, it could be a good way to add that extra touch.

10to1 navigation81
10to1 uses the box-shadow property for its navigation background and hover states.

10to182 adds a simple shadow to its navigation area and uses the property for a hover effect on the navigation links:

#navigation {
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	}
	#navigation li a:hover,
	#navigation li a:focus {
	-webkit-box-shadow: 0 0 5px #111;
	-moz-box-shadow: 0 0 5px #111;
	}

The box-shadow property can have multiple values: horizontal offset, vertical offset, blur radius, spread radius and shadow color. Horizontal and vertical offset and shadow color are the most commonly used.

To apply a red shadow positioned four pixels to the right and bottom of a div, with no blur, we would need the following code:

div {
    -moz-box-shadow: 4px 4px 0 #f00;
    -webkit-box-shadow: 4px 4px 0 #f00;
    box-shadow: 4px 4px 0 #f00;
    }

Browser support: box-shadow is currently supported only by Webkit-based browsers, but the upcoming Firefox 3.5 will very likely support it as well.

Useful Links

11. Box Sizing

According to CSS 2.1 specifications, when calculating the overall dimensions of a box, the borders and padding of the element should be added to the width and height. But legacy browsers are well known for interpreting this specification in their own and quite creative ways. The box-sizing property lets you specify how the browser calculates the width and height of an element.

WordPress input and textarea tags87
WordPress uses the border-box property in all input fields (text type) and text area elements in the admin panel.

The WordPress8838 admin area demonstrates this property in all its input tags with a text type and textarea tags (among other elements):

input[type="text"],
	textarea {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}

The third property (-ms-box-sizing) only works in Internet Explorer 8. With other selectors, the WordPress style sheet also adds the Konqueror property: -khtml-box-sizing.

The box-sizing property can have one of two values: border-box and content-box. Content-box renders the width as specified in CSS 2.1. Border-box subtracts the padding and border from the specified width and height (as done by legacy browsers).

Browser support: box-sizing is supported by IE8, Opera and Gecko- and Webkit-based browsers.

Useful Links

12. Media Queries

Media queries let you define different styles for different devices based on their capabilities. For example, you may want your website’s sidebar to appear under the main content when viewed on devices with a viewport narrower than 480 pixels, in which case it shouldn’t be floated and displayed on the right side:

#sidebar {
	float: right;
	display: inline; /* IE Double-Margin Bugfix */
	}
	
@media all and (max-width:480px) {
	#sidebar {
		float: none;
		clear: both;
		}
	}

You can also target devices with color screens:

a {
	color: grey;
	}
	
@media screen and (color) {
	a {
		color: red;
		}
	}

The possibilities are endless. This property is useful because you no longer have to write separate style sheets for different devices, nor do you have to use JavaScript to determine the capabilities and properties of each user’s browser. A more popular JavaScript-based solution to achieve a flexible layout would be to use an adaptive fluid layout92, making the layout more responsive to the user’s browser resolution.

Browser support: Media queries are supported by Webkit-based browsers and Opera. Firefox plans to support them in version 3.5. Internet Explorer currently doesn’t support them and doesn’t plan to support them in upcoming versions.

Useful Links

13. Speech

The speech module in CSS3 lets you specify the speech style of screen readers. You can control various aspects of the speech, such as:

  • voice-volume
    Set a volume using a number from 0 to 100 (0 being silence), percentages or a keyword (silent, x-soft, soft, medium, loud and x-loud).
  • voice-balance
    Control which channel sound comes from (if the user’s sound system supports stereo).
  • Speak
    Instruct the screen reader to spell out particular words, digits or punctuation. Available keywords are none, normal, spell-out, digits, literal-punctuation, no-punctuation and inherit.
  • Pauses and rests
    Set a pause or rest before or after an element’s content is spoken. You can use either time units (for example, “2s” for 2 seconds) or keywords (none, x-weak, weak, medium, strong and x-strong).
  • Cues
    Use sounds to delimit particular elements and control their volume.
  • voice-family
    Set specific types of voices and voice combinations (as you do with fonts).
  • voice-rate
    Control the speed at which elements are spoken. This can be defined as a percentage or keyword: x-slow, slow, medium, fast and x-fast.
  • voice-stress
    Indicate any emphasis that should be applied, using different keywords: none, moderate, strong and reduced.

For example, to tell a screen reader to read all h2 tags in a female voice, from the left speaker, in a soft tone and followed by a particular sound, set the CSS as follows:

h2 {
	voice-family: female;
	voice-balance: left;
	voice-volume: soft;
	cue-after: url(sound.au);
	}

Unfortunately, this property has very little support now but is definitely worth keeping in mind so that we might improve the accessibility of our websites in future.

Browser support: Currently, only Opera browsers for Windows XP and 2000 support some of the speech module properties. To use them, use the -xv- prefix; for example, -xv-voice-balance: right.

Useful Links

Conclusion

CSS3 properties can greatly improve your workflow, making some of the most time-consuming CSS tasks a breeze and allowing for better, cleaner and more lightweight markup. Some properties are still not widely supported, even by the most recent browsers, but that doesn’t mean we shouldn’t experiment with them or give visitors with modern browsers advanced features and CSS styling.

In this regard, keep in mind that educating our clients is both useful and necessary: websites don’t have to look exactly the same in every browser, and if a difference doesn’t negatively affect the aesthetics or usability of a website, it should be considered. If we continue to waste valuable time and money making every detail pixel-perfect (instead of adopting more flexible and future-oriented solutions), users won’t have an incentive to upgrade their browsers, in which case we would have to wait a long time before older browsers become legacy browsers and robust modern browsers become the standard.

The earlier we experiment with and adapt new CSS3 properties, the earlier they will be supported by popular browsers and the earlier we’ll be able to use them widely.

Further Reading And References

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
  2. 2 http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  3. 3 http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
  4. 4 http://www.css3.info/vendor-specific-extensions-to-css3/
  5. 5 http://reference.sitepoint.com/css/vendorspecific
  6. 6 http://tweetcc.com/
  7. 7 http://tweetcc.com/
  8. 8 http://andreagandino.com/
  9. 9 https://developer.mozilla.org/en/Firefox_3.5_for_developers
  10. 10 http://www.w3.org/TR/css3-selectors/
  11. 11 http://www.css3.info/preview/attribute-selectors/
  12. 12 http://www.css3.info/modules/selector-compat/
  13. 13 http://kimblim.dk/css-tests/selectors/
  14. 14 http://reference.sitepoint.com/css/css3attributeselectors
  15. 15 http://reference.sitepoint.com/css/pseudoelement-selection
  16. 16 http://reference.sitepoint.com/css/generalsiblingselector
  17. 17 http://reference.sitepoint.com/css/css3psuedoclasses
  18. 18 http://timvandamme.com/
  19. 19 http://timvandamme.com/
  20. 20 http://www.w3.org/TR/css3-color/
  21. 21 http://www.css3.info/preview/rgba/
  22. 22 http://css-tricks.com/rgba-browser-support/
  23. 23 http://en.wikipedia.org/wiki/RGBA_color_space
  24. 24 http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock
  25. 25 http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
  26. 26 http://tweetcc.com/
  27. 27 http://tweetcc.com/
  28. 28 http://www.w3.org/TR/css3-multicol/
  29. 29 http://www.quirksmode.org/css/multicolumn.html
  30. 30 http://www.csscripting.com/css-multi-column/
  31. 31 https://developer.mozilla.org/en/CSS3_Columns
  32. 32 http://forabeautifulweb.com/blog/about/designing_tweetcc/
  33. 33 http://designshack.co.uk/tutorials/introduction-to-css3-part-5-multiple-columns
  34. 34 http://www.w3.org/TR/css3-background/#layering
  35. 35 http://www.css3.info/preview/multiple-backgrounds/
  36. 36 http://designshack.co.uk/tutorials/introduction-to-css3-part-6-backgrounds
  37. 37 http://wordpress.org
  38. 38 http://wordpress.org
  39. 39 http://www.w3.org/TR/css3-text/#word-wrap
  40. 40 http://www.css3.info/preview/word-wrap/
  41. 41 http://www.css3.com/css-word-wrap/
  42. 42 https://developer.mozilla.org/en/CSS/word-wrap
  43. 43 http://beakapp.com/
  44. 44 http://beakapp.com/
  45. 45 http://www.w3.org/TR/css3-text/#text-shadow
  46. 46 http://www.w3.org/Style/Examples/007/text-shadow
  47. 47 http://www.css3.info/preview/text-shadow/
  48. 48 http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
  49. 49 http://sam.brown.tc/entry/348/safaris-text-shadow-anti-aliasing-css-hack
  50. 50 http://reference.sitepoint.com/css/text-shadow
  51. 51 https://developer.mozilla.org/en/CSS/text-shadow
  52. 52 http://blog.typekit.com/2009/05/27/introducing-typekit/
  53. 53 https://jetpack.mozillalabs.com/
  54. 54 https://jetpack.mozillalabs.com/
  55. 55 http://wiki.novemberborn.net/sifr3/
  56. 56 http://wiki.github.com/sorccu/cufon/about
  57. 57 http://mezzoblue.com/archives/2009/05/07/font_embeddi/
  58. 58 http://wiki.github.com/sorccu/cufon/about
  59. 59 http://www.josbuivenga.demon.nl/museosans.html
  60. 60 http://www.w3.org/TR/css3-webfonts/#font-descriptions
  61. 61 http://www.css3.info/preview/web-fonts-with-font-face/
  62. 62 http://reference.sitepoint.com/css/at-fontface
  63. 63 http://webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding
  64. 64 http://nickcowie.com/2008/font-face/
  65. 65 http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  66. 66 http://blog.typekit.com/2009/05/27/introducing-typekit/
  67. 67 http://sam.brown.tc/
  68. 68 http://sam.brown.tc/
  69. 69 http://www.w3.org/TR/css3-background/#border-radius
  70. 70 http://www.css3.info/preview/rounded-border/
  71. 71 http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders
  72. 72 http://webdesignernotebook.com/css/an-ode-to-border-radius/
  73. 73 http://www.zenelements.co.uk/blog/css3-border-radius-rounded-corners/
  74. 74 http://www.blog.spoongraphics.co.uk/
  75. 75 http://www.blog.spoongraphics.co.uk/
  76. 76 http://www.w3.org/TR/css3-background/#the-border-image
  77. 77 http://www.css3.info/preview/border-image/
  78. 78 http://ejohn.org/blog/border-image-in-firefox/
  79. 79 http://www.lrbabe.com/sdoms/borderImage/index.html
  80. 80 http://www.launchpadhq.com/blog/2007/07/07/replicating-iphone-buttons-the-webkit-way/
  81. 81 http://10to1.be/
  82. 82 http://10to1.be/
  83. 83 http://www.w3.org/TR/css3-background/#the-box-shadow
  84. 84 http://www.css3.info/preview/box-shadow/
  85. 85 http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
  86. 86 http://webkit.org/blog/86/box-shadow/
  87. 87 http://wordpress.org
  88. 88 http://wordpress.org
  89. 89 http://www.w3.org/TR/css3-ui/#box-sizing
  90. 90 http://www.css3.info/preview/box-sizing/
  91. 91 http://helephant.com/2008/10/css3-box-sizing-attribute/
  92. 92 http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
  93. 93 http://www.w3.org/TR/css3-mediaqueries/
  94. 94 http://webkit.org/specs/MediaQueriesExtensions.html
  95. 95 http://www.css3.info/preview/media-queries/
  96. 96 http://helephant.com/2008/07/the-bleeding-edge-of-web-media-queries/
  97. 97 http://dev.opera.com/articles/view/safe-media-queries/
  98. 98 http://www.howtocreate.co.uk/tutorials/css/mediatypes
  99. 99 http://www.w3.org/TR/css3-speech/
  100. 100 http://www.css3.info/preview/speech/
  101. 101 http://lab.dotjay.co.uk/notes/css/aural-speech/
  102. 102 http://www.css3.info/preview/
  103. 103 http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html
  104. 104 http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html
  105. 105 http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
  106. 106 http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(CSS)
  107. 107 http://en.wikipedia.org/wiki/Progressive_enhancement
  108. 108 http://forabeautifulweb.com/blog/about/five_css_design_browser_differences_i_can_live_with/
  109. 109 http://www.alistapart.com/articles/progressiveenhancementwithcss/
  110. 110 http://www.opera.com/docs/specs/opera95/css/

↑ Back to top Tweet itShare on Facebook

Inayaili de León is a London-based Portuguese web designer, specialist in cross-browser, semantic HTML and CSS, and clean, functional design. She writes frequently for well-known online and print publications and also on her own web design blog, Web Designer Notebook. In May 2011, she published a book, Pro CSS for High Traffic Websites, and she speaks frequently at local and international web conferences and meetups. She is currently working as a web designer on Canonical's Design team.

Advertisement
  1. 1

    Dominic Zukiewicz

    August 12, 2009 12:57 am

    Thanks for your hard work putting this together. I can only imagine the number of hours spent putting this together.

    A fantastic overview of CSS 3.0 and the best current resource there is for it!

    Thanks again

    0
  2. 152

    what is wrong with people? Why can’t they take the two minuets it takes to download and install better browsers?
    Most programs look for and get updates automatically anyway???? And what’s with software developers not implementing all of the latest features (such as those responsible for designing IE – do they ever go on the internet?), that is what is holding us back?

    The sooner css3 is commonplace the better!

    thanks for this one :-)

    0
  3. 303

    great post! thanks!

    0
  4. 454

    great post. thnx

    0
  5. 605

    CSS3 rules!

    0
  6. 756

    Amazing!!!Ever green article for CSS3…thanks a million….hope you continue your journey in this way and give us this types of article again and again.

    0
  7. 907

    I’d like to see an update to this, including which are supported in Chrome.

    0
  8. 1058

    Well as every one has alredy thanks for sharing, I wish one day I could help others with webdesigning as you doing there. Inayaili.

    0
  9. 1209

    Wow!!…Cool information…..very useful
    I love it..:)

    0
  10. 1360

    Good article thank you

    0
  11. 1511

    Massive, Amazing features in CSS3, I love it…
    Thanks for sharing…

    0
  12. 1662

    Awesome article… everything is covered here…

    1
  13. 1813

    Nice article. :) Really want to upgrade with CSS3.

    0
  14. 1964

    Great article. Thanks! Although I’m just starting with CSS3 I think it has enough powerful features to revolutionize front end coding trend.

    0
  15. 2115

    so beautiful Inayaili de Leon…eh
    so amazing article :D

    0
  16. 2266

    Thank you very much for this article!

    Kind Regards,

    Fabian

    0
  17. 2417

    It has been sometime since i have commented on someone elses work, luckily this is positive though. Wonderful post, i will likely be reading this blog more within the future.

    0
  18. 2568

    its lands with a stampede,though browser specification yet is itching.a promising future though.what of css3 tags for animation?

    0
  19. 2719

    awesome.consider content for css3 for animation

    0
  20. 2870

    This post is like gold. Thanks!

    0
  21. 3021

    Fantastic post, definitely worth a book mark and frequent visit.

    0

↑ Back to top