CSS3, la revolución en el diseño web

Los diseñadores web de Alicante somos conscientes de los problemas que origina la “batalla entre navegadores”, la cantidad de puertas traseras que tenemos que buscar para que el resultado se visualice igual en uno que en otro.

Con la llegada del CSS3, tendremos muchas más posibilidades de controlar el diseño del blog o de la web que estemos construyendo. CSS3 tiene un mayor control sobre la maquetación, permitiéndonos diseñar sin pensar en las dificultades que nos van a originar los distintos navegadores.

Este es uno de los problemas de ser diseñador y además maquetador, ya que a menudo te condiciona el ser conocedor de los problemas que luego te vas a encontrar en la maquetación, aunque habrá quien lo vea como beneficioso…

CSS3 incorpora muchas novedades, vamos a destacar algunas de las que me parecen más impactantes, por su resultado visual y sobre todo por lo difícil que ha sido conseguir ese mismo resultado hasta la fecha.

MAQUETACIÓN MULTICOLUMNA

La maquetación en columnas ha sido durante mucho tiempo un quebradero de cabeza en el diseño web. Para maquetar una página a tres columnas, colocaba una capa con un float:right y otra con un float:left y dentro de una de ellas volvía a hacer lo mismo, de ese modo conseguía tener tres columnas sin usar tablas y sin problemas en los distintos navegadores.

CSS3 nos permite dejar de lado esa preocupación, al menos en lo que se refiere a la maquetación de varias columnas. Podremos definir el número de columnas, el espacio entre estas, la posición de las fotografías en ellas en apenas un par de órdenes, luego basta con colocar todo el texto dentro del div que lleva esas propiedades y podremos ver el resultado de inmediato.

De momento sólo Firefox, Safari y Chrome soportan estas nuevas etiquetas, así que desgraciadamente tendremos que esperar un poco más a que “espabile” el explorer.

BACKGROUNDS Y BORDERS

CSS3 nos permite también en un par de líneas dar forma redondeada a una capa, controlando incluso el radio de curvatura de las esquinas redondeadas.

También nos permite colocar un background sobre otro, tantas veces necesitemos. Una gran ventaja para los nuevos diseños web que ya llevamos un tiempo viendo, con grandes backgrounds superpuestos uno sobre otro.

MAQUETACIÓN MÁS PRECISA

CSS3 nos da la opción de colocar unas “reglas imaginarias” para ayudarnos a realizar un diseño tipo revista, permitiéndonos además jugar con las posiciones “flotantes” de elementos como las imágenes.

Y ADEMÁS…

• Rotura de palabras largas – cuando introducimos una cadena muy larga de caracteres sin ningún espacio, el resultado es que dicha cadena alargue el div que la contiene destrozando la maquetación. Ahora podremos despreocuparnos del “gracioso” que introduce esas palabras sin fin en nuestros comentarios para destrozarnos la maquetación.
• Color RGBA – a los ya conocidos RGB se le une la sigla A que determina la opacidad del color (canal Alpha).

Tenéis más información en www.css3.info