Usando CSS3 ahora
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. 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; /* para Firefox */ -webkit-border-radius: 10px; /* Para Safari/Chrome */
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; -webkit-box-shadow: #666 0 0 10px; /* para Firefox */ -moz-box-shadow: #666 0 0 10px; /* Para Safari/Chrome */
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 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; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /* para IE8 */ filter: alpha(opacity=50); /* para IE6-7 *
Caja aplicada con opacity al 0.5
Soportado por Safari/Chrome, Firefox 3.5+, Opera e IE7+ (parcialmente).
