Las novedades de CSS 3 (I)

Aunque sorprendentemente aún quedan defensores de la vieja guardia de las tablas, el pulso del diseño web hoy en día se mide en base a las hojas de estilos y el estándar que las define: CSS. Si alguna vez te has animado a «retocar» alguna web, te habrás cruzado con este lenguaje sencillo, flexible y totalmente abierto a la creatividad de cada uno.

Sin embargo, los años no pasan en balde para nadie, y el estándar empieza a necesitar un lavado de cara que lo adapte a los tiempos que corren. Dicha actualización llegará con CSS 3, la nueva generación que aportará multitud de recursos nuevos a los diseñadores, ampliando así las posibilidades estéticas de la web. Muchos de estos avances ya se emplean en algunos sitios, aunque obviamente no los soportan todos los navegadores. ¿Quieres conocerlos y saber lo que darán de sí? Aquí va la primera entrega de novedades que traerá consigo:

• Bordes redondeados: Tradicionalmente, cuando queríamos aplicar esquinas redondeadas a nuestros diseños teníamos que recurrir a imágenes de fondo que simularan el efecto, con todos los inconvenientes que ello conlleva. Esta inclusión hará que con unas pocas líneas de código, cualquier elemento de nuestra página luzca unos bellos bordes redondeados. Así aplicaríamos un borde de 5 píxeles de radio a todas las esquinas de un elemento:

  -moz-border-radius: 5px;
-webkit-border-radius: 5px;

  Y así lo haríamos si quisiéramos añadir diferentes valores a distintas esquinas:

  -moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 10px;

  Los añadidos «-moz-» y «-webkit-» sirven para que la propiedad funcione en Firefox y navegadores con WebKit (Safari y Chrome). Es una de las novedades más conocidas, y de hecho podemos verla en sitios tan populares como Twitter, cuyas esquinas se muestran redondeadas únicamente en navegadores que soporten este estándar.

  

• Transparencias: Al igual que con los bordes redondeados, la única forma que hasta ahora teníamos de incluir transparencias en nuestras webs era mediante imágenes, en este caso empleando archivos PNG. Con CSS 3 será mucho más fácil, gracias al empleo de una propiedad que nos permitirá ajustar el nivel de transparencia para el color de cualquier elemento. Veamos cómo se haría:

  color: #000;
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;

  De esta forma, obtendremos un elemento negro con la transparencia reducida a la mitad, permitiendo así mostrar parte de lo que haya tras él. La comodidad que aporta esta solución está fuera de toda duda, así como lo vistoso de sus resultados, que pueden apreciarse en todos los navegadores modernos.

  

• Usa cualquier fuente: Esta es una de mis novedades favoritas, y bien usada hará que Internet luzca más vistoso que nunca… aunque mal empleada puede llegar a ser un atentado para el buen gusto. Básicamente, con esta propiedad se pondrá fin al uso de las fuentes básicas para navegación web (Arial, Verdana, Times, etc.), pudiendo emplearse cualquiera. Lo conseguimos de esta forma:

  @font-face {
font-family:'MEgalopolis Extra';
src: url('/archivos/MEgalopolisExtra.otf') format('opentype');}

  La idea es que el visitante reciba la fuente almacenada en el directorio que le indiquemos mediante el «src», para que de esta forma pueda visualizar la tipografía de nuestra web tal y como nosotros siempre la imaginamos. Una propiedad ya disponible en todos los navegadores decentes, así como en Internet Explorer 7 empleando unos cuantos trucos para ello.

  

Por su condición de estándar aún no finalizado, hay que tener en cuenta a la hora de usar estas propiedades que muchos de nuestros visitantes no podrán apreciarlas, en función del navegador con el que lleguen a nosotros. En cualquier caso, se trata de un goloso bocado al futuro que ya podemos ir paladeando, y del cual os iremos mostrando más novedades en otros artículos.