Bordes con CSS3

Desde hace mucho tiempo el tema de los bordes en las cajas, divisiones o secciones de nuestra web ha sido un problema con el que hemos tenido que lidiar e ingeniárnoslas para poder hacer algo atractivo de nuestros diseños, o como maquetador, de lo que el diseñador nos presentaba.

Entre los distintos problemas que nos podíamos encontrar, estaban las esquinas redondeadas. Las cuales siempre teníamos varias opciones para hacerlas, pero era un trabajo arduo para lo que realmente debía ser.

Hoy en día, con la llegada de CSS3 este trabajo se ha simplificado un montón, ha llegado una propiedad nueva para poder utilizarla y disfrutarla:

• border-radius

Con está propiedad, ya no tendremos ningún problema más en este sentido, en un post posterior explicare, su uso y sus distintas posibilidades.

Otro de los problemas que nos podíamos encontrar con los bordes en nuestras webs, era el de el sombreado.

Al igual que ha ocurrido con las esquinas redondeadas, los señores del W3C, se han dado cuenta que nos tenían que ofrecer una propiedad, la cual nos facilitara conseguir este efecto sin tener que usar imagenes o dobles capas o quizás otros trucos para poder hacerlo.

Esta nueva propiedad nos permitirá dar el efecto de sombra que tanto buscábamos o utilizábamos ultimamente, su nombre sería el siguiente:

• box-shadow

Al igual que he dicho con border-radius, está etiqueta la estudiaremos en un artículo aparte, viendo su sintaxis y sus posibles opciones de utilización.

Por último en cuanto a los bordes se refiere, otra de las dificultades con las que nos podíamos encontrar, era la de crear bordes con imagenes, como siempre, nuestro ingenio se basaba, en la utilización de div, span...., pero siempre pensábamos que encestábamos alguna opción para poder realizar este trabajo sin tener que depender de trucos o hacks para conseguir un fin que CSS2 no nos ofrecía de forma nativa.

Con suerte el W3C, ha escuchado nuestros problemas, los ha valorado y ha pensado que la mejor solución era  crear una nueva propiedad que nos ayude también en este sentido, la propiedad que se encargará de esto será la siguiente:

• border-image

Respecto a border-image, no es tan simple como parece o podamos pensar, cuando la veamos en un artículo posterior podréis ver las diferentes posibilidades que nos brinda su utilización y sus diferentes usos y subpropiedades.

Con esto he terminado la introducción al primer tema de CSS3, en el cual podréis saber que etiquetas serán las que estudiaremos en distintos artículos proximamente.