Guymon

Mit CSS3 wird alles einfacher

net.tutsplus vergleicht 11 “old-school” CSS/JavaScript Techniken und wie sie mit CSS3 umzusetzen sind.

Here are the 11 techniques that I’ll be showing you how to recreate with CSS3. I’ll show you how to create them using CSS2 (or JavaScript), and then with CSS3 properties.

Und hier die Demos:

1. Rounded Corners
2. Box Shadow
3. Text Shadow
4. Fancy Font
5. Opacity
6. RGBA
7. Background Size
8. Multiple Backgrounds
9. Columns
10. Border Image
11. Animations

Browser Support für RGBa

Chris Coyier hat eine schöne Auflistung zusammengestellt welche Browser RGBa unterstützen.

Im Einsatz sieht RGBa so aus:

div {
 background: rgb(200, 54, 54);  
 background: rgba(200, 54, 54, 0.5);
}

Natürlich braucht der IE eine Sonderbehandlung:

<!--[if IE]>
 <style type="text/css">
 .color-block {
 background:transparent;
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
 zoom: 1;
 }
 </style>
<![endif]-->