24.9.11

Bordes redondeados y fondos con gradiente en CSS3

Definitivamente, la programación web ya no es lo que era. Recuerdo leer como mínimo 10 tutoriales con otras tantas maneras distintas de conseguir bordes redondeados. Tablas de 9 celdas, posiciones absolutas, fondos con un cuarto de círculo hechos con el gimp, ... y todo para que cuando creías que ya habías terminado, te acuerdas de la gente de utiliza Explorer y te encuentras con una página totalmente distinta.


CSS3 le ha quitado toda la gracia. Pones ...

border-radius: 15px;

... en la clase/identificador correspondiente, y ya tienes tu borde redondeado. Lógicamente ya puestos le han metido todas las opciones más habituales; redondeado tipo elipse (border-radius: 15px 5px;), y ajustes específicos para cada esquina con; top, bottom, left y right. (ej: border-top-left-radius: 15px;) Comparado lo de antes, facilísimo.

Lo mismo para los fondos con gradiente. Se acabo de hacer un .png de 1px de ancho, y luego ir repitiéndolo por -x ó -y. Con ...

background: linear-gradient (top, #000000, #ffffff);

... ya tenemos un fondo que empieza arriba en negro y termina en blanco.

En resumen, los que aprendan desarrollo web directamente con css3, no saben lo que se perdieron.

No hay comentarios: