No hay duda de que CSS3 llegó para quedarse: es moderno, elegante y finalmente entrega control total a los estilos. Cada vez lo utilizo más, y me encanta tener que pensar menos en solucionar problemas y esforzarme más en dar el formato que realmente quiero.

Paralelamente, se siente cada vez más fuerte el fervor por dejar de lado ese infame IE6, el último remanente de la [guerra de los browsers][1]. Ese que nos mantiene en la edad media, y no nos deja pasar finalmente a la ilustración… y disfrutar a plenitud de CSS3 (Sí, lo sé. Además están IE7 e IE8, pero algo es algo).

Actualmente existen algunas propiedades que puedes ya utilizar en los browsers modernos, lo que hará que tu diseño se distinga del resto. A continuación, las más atractivas:

Bordes redondos⌗

Ya no más cortar en Photoshop esos bordes y tratar de hacerlos calzar; ahora puedes crearlos directamente con CSS3:

border-radius: 10px;

Ahora, para que Firefox y Safari/Chrome lo reconozcan, debes ayudarlos agregando lo siguiente:

-moz-border-radius: 10px; <span class="commentcss">/* para Firefox */</span><br />
-webkit-border-radius: 10px;  <span class="commentcss">/* Para Safari/Chrome */</span>

Caja aplicada con border-radius

Soportado por Safari/Chrome y Firefox 3.1+.

Textos con sombra⌗

Con text-shadow puedes darle sombras a tus tipografías, haciendo tus títulos más atractivos:

text-shadow: 2px 2px 5px #000;

Caja aplicada con text-shadow

Soportado por Firefox 3.5+, Safari/Chrome y Opera 9.5+.

Cajas con sombras⌗

¡Genial! Además, puedes darle sombras a cualquier elemento HTML en bloque… ¡incluso si ya lo definiste con bordes redondos!

box-shadow: #666 0 0 10px;<br />
-webkit-box-shadow: #666 0 0 10px; <span class="commentcss">/* para Firefox */</span><br />
-moz-box-shadow: #666 0 0 10px; <span class="commentcss">/* Para Safari/Chrome */</span>

Caja aplicada con border-radius y box-shadow

Soportado por Safari/Chrome y Firefox 3.5+.

Transparencias⌗

Las puedes definir de 2 maneras: como color utilizando [RGBa][2] o como opacidad del elemento completo, mediante opacity:

background: rgba(0,0,0,0.5);

Caja aplicada con background RGBa al 0.5 

opacity: 0.5;<br />
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); <span class="commentcss">/* para IE8 */</span><br />
filter: alpha(opacity=50); <span class="commentcss">/* para IE6-7 *</span>

Caja aplicada con opacity al 0.5

Soportado por Safari/Chrome, Firefox 3.5+, Opera e IE7+ (parcialmente).

[1]: http://www.csslab.cl/2008/05/05/un-poco-de-historia-browser-wars/ “Enlace en CSSLab a “Un poco de historia: Browser Wars”” [2]: http://www.csslab.cl/2009/02/26/tip-precoz-3-rgba/ “Enlace en CSSLab a “Tip Precoz 3: RGBa””