CSS » Esquinas redondeadas con CSS e imágenes para todos los navegadores

Ya que el CSS3 sólo está disponible en algunos navegadores y la propiedad border-radius es parte de ella, no podemos utilizarla si queremos que nuestro sitio web se vea estupendo en todos los navegadores.

Es por ello que utilizamos técnicas CSS (versión 2.1) junto con alguna imagen para provocar el efecto de las esquinas redondeadas sin sufrir tanto.

Mi técnica se las mostraré a continuación más unos ejemplos bien completos y concretos donde podrán ver y analizar el código CSS.

Bien, yo utilizo una sola imagen, 6 divs del HTML y porsupuesto que CSS. Quizás sean demasiados divs, pero no encuentro otro método más simple, además, no interfiere en el funcionamiento. Lo bueno es que utilizo una sola imagen que contiene las cuatro esquinas juntas formando un circulo, la que en los primeros cuatro divs se posiciona con CSS sin repetirse en cada una de las esquinas. El quinto div cubre 1/2 de cada imagen con rellenos (padding) laterales de tamaño de la mitad de la imagen más un color de fondo, y el último cubre 1/2 de las partes de las imagenes restantes con un margen negativo superior e inferior con las mismas características del anterior.

Se puede interpretar de la siguiente forma:

En general, los últimos dos divs son los encargados de cubrir 3/4 de la imagen posicionada en cada esquina (contenida en los 4 divs anteriores).

Y así se puede crear el efecto de las esquinas redondeadas que funciona en todos los navegadores (hasta en IE 5.5) con ventajas de agregar bordes CSS, a partir de 6 divs, una sola imagen más un poco de estilo. Creo que es mejor esto en vez de usar 4 divs y una imagen para cada uno como he visto y experimentado en otros ejemplos: menos peticiones para el servidor, menor tiempo de carga.

Puedes ver una presentación que he creado con 4 tipos de cajas de esquinas redondeadas.

• Guía: CSS: Sprites CSS
• CSS: Recortar imágenes con CSS

Twitter Facebook Feed RSS

www.DocumentoWeb.com - Licencia Creative Commons