Pasar al contenido principal
www.keopx.net

Navegación principal

  • Inicio
  • Talks
  • Freelance Drupal Bilbao
  • Acerca de Keopx
  • Contacto
Menú de cuenta de usuario
  • Iniciar sesión

Sobrescribir enlaces de ayuda a la navegación

  1. Inicio

Crear corner redondos en firefox e IE7 con jQuery e Imagen de fondo

By keopx, 28 Julio, 2009

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.

Comentarios

El contenido de este campo se mantiene privado y no se mostrará públicamente.
Acerca de formatos de texto

HTML Restringido

  • Etiquetas HTML permitidas: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Saltos automáticos de líneas y de párrafos.
  • Las direcciones de correos electrónicos y páginas web se convierten en enlaces automáticamente.

Forcontu Master in Drupal 9

DrupalAssoc member

DrupalCampSpain2022: Introducción al desarrollo de módulos en Drupal 9

Seville Drupal Developer Days Individual Sponsor - 2017

I am speaker DrupalCamp Alicante 2018

I am speaker DrupalCamp Madrid 2017

I am speaker DrupalCamp Valencia 2014

I am Rules Ruler

Sponsored by

Isarea

Soy Ruben Egiguren a.k.a. keopx, actualmente soy freelance experto en Drupal de Bilbao

  • Reinicializar su contraseña
RSS feed
Powered by www.keopx.net