Careful Web

Three CSS3 features which works right in all major browsers (Mozilla, Safari and Opera). Yes, IE plays outside with finalizing of CSS2 support.

CSS3 Opacity

Opacity effect is very widely used in graphics and of course in web-design too. Today we can use it not only inside our graphic editor, but with plain CSS feature { opacity: 0.5 }. IE users can be supported with { filter: alpha(opacity=50) } property. You can see lots of demo examples here:

• Opacity for image example;
• Opacity and RGBA quick overview;
• Lots of examples on Mandarin Design page: Opacity and transparency.

Box-sizing

This feature really matters for fast coding of block design. It really simple to use: just specify float, width in percent and box-sizing property. Like this (Mozilla, Opera and Safari uses different declaration):

div.span { width: 50%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Also see live example at CSS3.info box-sizing page.

Overflow-x & overflow-y

Overflow property is improved in CSS3 specification. It allows to specify X and Y axis overflow independently with visible, hidden, auto and scroll options. See examples and tests here.

Text-shadow (bonus)

This one is really fancy and well-know effect. Firefox supporting it only in upcoming 3.1 release. But Opera and Safari already taking care on it. See demo page with reference image on CSS3.info: text-shadow.