Al publicar la serie “cosas que debes saber sobre CSS” me di cuenta de que hay bastante gente interesada en el tema de las hojas de estilo, sobre todo cuando se habla de CSS avanzado. Supuse que ese interés se debía, en gran parte, a la curiosidad por lo nuevo y a la sorpresa por lo potente del CSS. Por eso, me decidí a escribir este artículo, mostrando por encima lo más nuevo en CSS: La tercera versión de CSS.

Quiero aclarar también que CSS 3 está todavía en desarrollo, y que la mayoría de sus propiedades aún no han sido implementadas por los navegadores. Aún así, pinta muy bien y hay algunas que ya pueden ser usadas. Por ejemplo, en ululand usamos bastante la propiedad border-radius para redondear algunos bordes sin recurrir a trucos raros de CSS o a librerías de javascript (como la que se usa en este blog).

Algunos elementos nuevos

border-radius

Este es, para mí, uno de los cambios más prácticos de la próxima versión de CSS. Los diseños web con esquinas redondeadas son muy habituales hoy en día y, paradójicamente, no existe una forma sencilla de conseguir este efecto. Por suerte para todos, CSS3 trae la propiedad border-radius al rescate:

Resultado

Sintaxis

border-radius: <radio_horizontal> <radio_vertical>;

border-top-radius: <radio_horizontal> <radio_vertical>;
border-right-radius: <radio_horizontal> <radio_vertical>;
border-bottom-radius: <radio_horizontal> <radio_vertical>;
border-left-radius: <radio_horizontal> <radio_vertical>;

Soporte

Firefox (usando prefijo “-moz-”): -moz-border-radius
Webkit (safari 3/Chrome) (usando prefijo “-webkit-”): -webkit-border-radius

box-shadow

Una de las novedades más sorprendentes de entre las que nos trae CSS3 es la posibilidad de añadir sombras. La propiedad box-shadow nos permite dibujar con bastante libertad una sombra alrededor de cualquier caja. La especificación del W3 habla de la posibilidad de añadir varias sombras, aunque esto no se ha implementado aún en ningún navegador.

Resultado

Sintaxis

border-shadow: <offset_horizontal> <offset_vertical> <radio_desenfoque> <color>;

Soporte

Firefox 3.1 (usando prefijo “-moz-”): -moz-box-shadow
Webkit (safari 3/Chrome) (usando prefijo “-webkit-”): -webkit-box-shadow

text-shadow

En la misma línea que la propiedad box-shadow, está la propiedad text-shadow. Además de la obvia utilidad de crear bonitos efectos de sombras, ya la he visto utilizada en varios sitios para crear efectos como el de las letras del menú de apple.com.

Resultado

Sintaxis

text-shadow: <offset_horizontal> <offset_vertical> <radio_desenfoque> <color>;

Soporte

Firefox 3.1
Opera 9.5
Webkit (safari 3/Chrome)
Konqueror

@font-face

Por fin (¡por fin!) vamos a poder salirnos de las 5 fuentes típicas sin tener que caer en auténticos quebraderos de cabeza. CSS3 va a permitirnos algo que siempre he echado de menos: Podremos mostrar textos con fuentes que el usuario no tenga instaladas en su equipo. Esto supone un paso bastante grande para una web que se está quedando claramente obsoleta en términos de tipografía.

Resultado

Sintaxis

// Declarar el tipo de fuente
@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
@font-face {
font-family: Delicious;
font-weight: bold;
src: url('Delicious-Bold.otf');
}

// Usarlo en algún elemento
h3 { font-family: Delicious, sans-serif; }

Soporte

Webkit (safari 3/Chrome)

opacity

Otra propiedad con infinidad de utilidades es opacity. Simplemente sirve para modificar la opacidad de un elemento.

Sintaxis

opacity: 0.5;

Soporte

Todos los navegadores modernos.

¡Pero hay mucho más!

Esto que os he mostrado es solo una pequeña muestra de todo lo que nos traerá la próxima versión de CSS. En el roadmap oficial se pueden ver todas las novedades, organizadas en módulos que tienen diferentes grados de desarrollo. Todavía queda mucho trabajo para que la especificación se dé por cerrada y aún más para que los navegadores la adopten completamente, pero aún así merece la pena ir investigando e ir aprovechando las propiedades que van siendo adoptadas por los navegadores mayoritarios.

Si os interesa, os recomiendo que os paséis por css3.info, que vayáis a la web oficial sobre el estado del desarrollo o que, simplemente, hagáis una búsqueda en google sobre el tema.

Fuentes utilizadas

• css3.info: Blog sobre todas las novedades que van apareciendo sobre CSS.
• Roadmap de CSS3 en w3.org