Crear corner redondos en firefox e IE7 con jQuery e Imagen de fondo
Bueno aquí dejo las fuentes para poder crear los bordes curvos y se visualicen correctamente, he utilizado varios plugin sobre jQuery.
El problema que tenia es que utilizaba una imagen de fondo, de no haber sido así habría resultado muchos mas sencillo, pero como siempre, me gusta hacer lo que quiero aunque cueste. Espero que así a otros muchos le resulte mucho mas facil.
En html escribimos las capas y en nuestros css añadimos las capas que sean necesarias. Y en el script ejecutamos según el navegador que sea. Como he dicho el problema la imagen de fondo sino habría solo necesario la función .corners().
$(document).ready(function() {
if (navigator.userAgent.indexOf("Firefox")!=-1) {
$("#fondo").corners('20px');
$("#subfondo").corners();
$("#texto").corners();
} else {
DD_roundies.addRule('#fondo', '20px');
}
});
Descarga el ejemplo: Round Example
Plugin:
- http://jquery.com/
- http://www.atblabs.com/jquery.corners.html
- Para IE7: http://www.dillerdesign.com/experiment/DD_roundies/#download
Actualización:
Iñaki esta en lo cierto, dejo un ejemplo de lo que comenta:
#block-menu-menu-cabecera .menu a {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-top-right-radius: 5px;
-khtml-border-top-left-radius: 5px;
}
Similar pasaría con Opera. Hay que tener en cuenta que tema de los bordes, en esta explicación esta realizada para ponerlo “mas bonito”, no como diseño que el cliente nos solicito.
Otra vez mas gracias por tus comentarios Iñaki.
Iñaki Ibarrola dijo
11 de Marzo del 2010 a las 14:01
Para firefox, konqueror y webkit tienes etiquetas que te permiten bordes redondeados mediante CSS.
DD_roundies no funciona con IE8. Otras soluciones que he encontrado por Internet no funcionan en todos los casos. En diseños sencillos funcionan bien pero en cuanto los uso en sitios completos aparecen los problemas.
Me imagino que para IE usaré un script de jquery que añada los divs y las imágenes necesarias.
keopx dijo
11 de Marzo del 2010 a las 17:59
Joder Iñaki, hoy te has aburrido en el curro ehhhh, jajajajaja.
Muy buenos apuntes.
La idea es conseguir ese aspecto de la mejor forma posible. Me he centrado en IE6 e IE7, pero imagino que con el incumplimiento de estándares de cualquier IE se hace casi imposible el contemplar todos los IE.
Iñaki Ibarrola dijo
11 de Marzo del 2010 a las 22:24
Los bordes redondeados no son parte de ningún estandar, así que tampoco se les puede achacar nada. En HTML5 se implementará, pero todavía no es definitivo.
keopx dijo
11 de Marzo del 2010 a las 23:34
Cuando comento el tema del incumplimiento de estándar, hago referencia a otra posibles formas de maquetar para conseguir el mismo aspecto.
Deja de aburrirte. Instala el redmine mientras, espero que ya lo tengas con mis apuntes.
PD: es que odio IE!!!!