miércoles, 23 de noviembre de 2011

Esquinas redondeadas con jquery.corners

Hace tiempo vengo usando un plugin para hacer que los div o cualquier otro elemento de las webs que desarrollo tengan esas bonitas esquinas redondeadas. El plugin esta bastante bien y funciona con todos los navegadores que he probado, incluido InternetExplorer6. Por ponerle una pega, no se puede utilizar una imagen de fondo ya que no redondea las esquinas de la imagen.



La técnica que usa el plugin es ir añadiendo divs, tanto arriba como abajo, cada vez un poco mas estrechos para ir consiguiendo el efecto de esquinas redondeadas. De ahi la pega que comentaba anteriormente con las imágenes de fondo.

Una de las cosas que se me ocurrio hacer fue cambiar el color de fondo de un div redondeado al pasar el mouse por encima. Mediante jquery simplemente hay que cambiar el color de todas las divs vacias que agrega el plugin y el color de la capa uso como contenedor para todo el contenido de la capa redondeada:

<!DOCTYPE html>
<html>
<head>
  <title>Esquinas redondeadas con jquery.corners</title>
  <script src="jquery.js"></script>
  <script src="jquery.corners.min.js"></script>
  <script>
    $(document).ready(function(){
       <!--redondear esquinas-->
       $('.rounded').corners("5px 5px");
       
       <!--cambiar color al entrar-->
       $(".rounded").mouseenter(function() {
           $("div:empty", this).css("background-color","#dcdcdc");
           $(".container", this).addClass("colorOn");
           $(".container", this).removeClass("colorOff");
       });   
      
       <!--cambiar color al salir-->
       $(".rounded").mouseleave(function() {       
           $("div:empty", this).css("background-color","#f0f0f0");
           $(".container", this).addClass("colorOff");
           $(".container", this).removeClass("colorOn");
       });   
    })
  </script>
  <style>
      .rounded{margin: 10px; background-color: #f0f0f0;}
      .container{padding: 5px;}
      .colorOff{ background-color: #f0f0f0;}
      .colorOn{ background-color: #dcdcdc;}
  </style>
</head>
<body>
  
<div class="rounded">
    <div class="container colorOff">
    Lorem ipsum dolor sit amet, vel illum liber labore no, no insolens deserunt nec. Ut doming sententiae suscipiantur vim, in ius option vidisse. Quem assum possim sit ex, vim probo assentior ad, ad eam mentitum sapientem aliquando. Quo dico vidit affert ne, mundi integre voluptatum mea ut, percipitur comprehensam signiferumque est ad. Eu nostrud ancillae mea, gubergren torquatos reprehendunt ne vel.
    </div>
</div>

<div class="rounded colorOff">
    <div class="container colorOff">
    Doctus laoreet inimicus ei quo, sumo intellegebat eu mei. Vim quot labores vivendo ei. Vis eu dolore persius feugiat. Ne nec legere possit constituto. Maiorum oportere repudiandae id eos, soleat salutandi prodesset cu pri, commodo placerat splendide ius eu. Quas invenire est id. Ei mel assum graeco lobortis.
    </div>
</div>
</body>
</html>

El ejemplo en funcionamiento:




Lorem ipsum dolor sit amet, vel illum liber labore no, no insolens deserunt nec. Ut doming sententiae suscipiantur vim, in ius option vidisse. Quem assum possim sit ex, vim probo assentior ad, ad eam mentitum sapientem aliquando.

Doctus laoreet inimicus ei quo, sumo intellegebat eu mei. Vim quot labores vivendo ei. Vis eu dolore persius feugiat. Ne nec legere possit constituto. Maiorum oportere repudiandae id eos, soleat salutandi prodesset cu pri, commodo placerat splendide ius eu.

Dejo el ejemplo completo para descargar

No hay comentarios :

Publicar un comentario