Tutorials Archives

Tutorials on how to use CSS3 in your daily web design work.

Styling Forms with CSS3

Excerpt: For those of you that haven't seen, Dev Opera has just published a two part article series on styling form controls, by Christopher Schmitt. The first part covers using attribute selectors (which work in IE7, Opera, Safari and Firefox) to slim down your markup by providing a way to identify certain

Liquid faux columns with background-size

Excerpt: Until the Advanced Layout and Grid Layout modules are implemented, we have to get by with the existing tricks of the trade. One of those is the use of faux columns, a background image which simulates equal-height columns. This is a good technique, but the drawback is that it only works with fixed-wi

A mock-up interface using CSS3 Colour

Excerpt: I recently posted a preview of the CSS3 colour module on my own blog, but avoided using any actual examples. This was because of the things that have been implemented, the true power isn't really seen using a simple example. With opacity and the HSLA/RGBA colour models, any elements that have been

Resize now works in Gecko (kind of)

Excerpt: While preparing an example of using the colours specified in the CSS3 Colour module, I come across something after Minefield (the nightly builds of Firefox 3) updated itself. It now supports the resize property from the Basic user interface module. Unfortunately, Minefield loads, then freezes an

Using CSS 3 selectors to apply link icons

Excerpt: #test_selectors { list-style: none; margin: 0; padding: 0; } #test_selectors a { color: #000; display: block; text-decoration: none; } #test_selectors a span { text-decoration: underline; } #test_selectors a:hover { color: #f00; text-decoration: underline; } #test_selectors a[accesskey] { backgroun