Seguramente muchos de vosotros os hayais enfrentado en más de una ocasión a la tediosa tarea de hacer que las esquinas de los elementos de una página web tome esa bonita y estética forma redondeada que tan bien queda, y habréis peleado en mayor o menor medida en función de lo que necesitárais y las posibilidades de que disponíais para ello, que si JavaScript, que si imágenes a trozitos…
Pues bien, ahora unimos otra forma más a esta lista de posibilidades, y hasta que el CSS3 sea acogido de forma estándar por todos los navegadores, este sea posiblemente una de las más sencillas de implementar, a la vez que de las más rápidas.
Esta opción empieza por descargar este archivo htc -que nada tiene que ver con la marca de terminales móviles- y subirlo a nuestro servidor.
Definimos el elemento de nuestra página web que será objeto de estos bordes redondeados como haríamos normalmente, y le aplicamos la CSS tal y como os muestro en el ejemplo:
HTML
<div id=”bordes_redondos”>Capa con esquinas redondeadas</div>CSS
#bordes_redondos {
border-radius:10px; /* CSS3 */
-ms-border-radius: 3px; /* para IE 8 */
-moz-border-radius:10px; /* Firefox */
-webkit-border-radius:10px; /* Webkit, Safari y chrome */
-khtml-border-radius:10px; /* Navegadores de linux */
behavior:url(border-radius.htc); /* Todos los navegadores, sobre todo resto de IE */
}
De todas las líneas del CSS, la última es la que actúa sobre todos los IExplorer, ese gran navegador, y el resto dependerán de la necesidad o no que tengais de hacerlo para el resto de navegadores, pero no cuesta, y cuantos más controleis, siempre será mejor…
Un muy buena solución a la par que cómoda y sencilla para conseguir que nuestras webs se vean correctamente en la mayoría de navegadores. Ahora es el momento de que enredéis, probéis y comentéis vuestras esperiencias y opiniones…
Un saludo y… Nos vemos en la red!!!
Etiquetas: css, CSS3, programación, web, XHTML
