Esquinas redondeadas con jQuery

En este sencillo tip (en realidad se complica un poco ) recrearemos el efecto de la propiedad border-image de CSS3 utilizando jQuery, con la ventaja de que haremos el particionado de nuestra imagen manualmente, así que tendremos un control más preciso sobre el resultado, también tendrá compatibilidad en navegadores que no soportan esta propiedad, además de otras ventajas.

Bueno empecemos, lo primero es tener lista la imagen que queramos usar para darle estilo a nuestra Web, yo utilizare esta para desarrollar el tip:

Ahora tenemos que dividir nuestra imagen en 8 partes diferentes para poder envolver el div deseado, en la siguiente imagen les muestro como debemos dividirla y de paso le asignamos los nombres que usaremos de aquí en adelante para cada pedazo.

Utilizaré nombres en ingles para ser más práctico:



Una vez que tengamos todas las partes de la imagen en una carpeta con sus respectivos nombres, procederemos a crear una clase en nuestro css para cada parte y de esta manera posicionar adecuadamente cada una en una capa diferente:

Código :

/* definimos las 8 clases cada una con su respectivo fondo */

.border_top { 
           background: url(../images/border_top.png) top repeat-x; 
            position: absolute; 
         left: 20px;
                   }

.border_bot { 
            background: url(../images/border_bot.png) bottom repeat-x;  
             position: absolute; 
             left: 20px;
                   }

.border_right { 
              background:  url(../images/border_right.png) right repeat-y;  
              position: absolute; 
               top: 30px;  
                     }

.border_left {
         background: url(../images/border_left.png) left repeat-y; 
         position: absolute; 
         top: 30px; 
                    }

.corner_1 {
        background: url(../images/corner_left_top.png) left top no-repeat;
        position: absolute;
        z-index: 1;
                }

.corner_2 {
      background: url(../images/corner_right_top.png) right top no-repeat;
      position: absolute; 
      z-index: 1;
                }

.corner_3 {
     background: url(../images/corner_right_bot.png) right bottom no-repeat;
     position: absolute; 
     z-index: 1;
               }

.corner_4 {
       background: url(../images/corner_left_bot.png) left bottom no-repeat;
       position: absolute; 
       z-index: 1;
                }

/* algunas clases adicionales que necesitaremos más adelante */

.border_margin {
             position: absolute;
             top: 0px; 
              left: 20px;
              z-index: 2;
 }
.border_bg { 
        background: url(../images/carbon_fibre_v2.png);
         position: absolute; 
         top: 20px; 
        left: 20px; 
         z-index: -1;
 }
.border_container {  position: relative; }

Todos deben tener posición absoluta para que no interfieran con el flujo del documento, adicionalmente los bordes horizontales y verticales deben tener un ligero desfase para que no se vean por debajo de las esquinas (esto debido a que estamos trabajando con un png con transparencia), por eso llevan valores en top y left según el caso. Las esquinas tienen un z-index igual a 1 para que queden siempre por encima de los bordes.

El siguiente paso es programar la función que pondrá todos los elementos en su respectivo sitio, a primera vista puede parecer un poco complicada pero en realidad es bastante sencilla, lo que haremos será insertar todos los divs en el documento cuyas clases declaramos anteriormente, además les asignaremos las dimensiones que deben tener utilizando selectores de jQuery que nos permitan manejar contenido dinámico:

Código :

 // esperamos a que el DOM este completamente cargado.
$(document).ready(function(){ 

 // declaramos la función que se llamara box_model y le asignamos un parámetro que sera el div al que posteriormente queramos agregar los bordes, de aquí en adelante me referiré a este como: nuestra caja.
  function box_model (bordered_div) {

// el método de jQuery each() ejecutará el código para cada uno de los elementos en caso de que le pasemos como parámetro un array.
   $(bordered_div).each(function () { 

 // con la función de jQuery wrap() envolvemos nuestra caja con un div de clase = border_container, que hará las veces de contenedor general para todas las demás capas. 
      $(this).wrap("<div class='border_container' />");

//añadimos la clase "border_margin" definida anteriormente a nuestra caja.      
      $(this).addClass("border_margin");

//a continuación insertamos dentro del contenedor general todas las capas que tienen asignadas las partes de la imagen.
      $(this).parent().append("<div class='corner_1' />");
      $(this).parent().append("<div class='corner_2' />");
      $(this).parent().append("<div class='corner_3' />");
      $(this).parent().append("<div class='corner_4' />");
      $(this).parent().append("<div class='border_top' />");
      $(this).parent().append("<div class='border_bot' />");
      $(this).parent().append("<div class='border_right' />");
      $(this).parent().append("<div class='border_left' />");

//insertamos un div adicional que contendrá el fondo que queramos darle a nuestra caja. (previamente definido en el css) 
      $(this).parent().append("<div class='border_bg' />");

Listo ya insertamos todos los divs que necesitamos, ahora tenemos que asignarles dimensiones de ancho y alto, para esto declararemos un par de variables a las que les asignaremos los valores de nuestra caja utilizando los métodos outerWidth() y outerHeight() que nos devolverán el ancho y el alto incluyendo padding y bordes.

Recordemos que el this hace referencia al elemento que le pasemos como parámetro, es decir a nuestra caja, por lo tanto todas las dimensiones de las demás capas tendrán a nuestra caja como base.

Código :

//declaramos una variable para el ancho y otra para el alto y les asignamos las dimensiones de nuestra caja.
               w_w =  $(this).outerWidth();
      w_h =  $(this).outerHeight();

//unos cuantos ajustes a las dimensiones anteriores que no vale la pena explicar ya que dependen de la imagen que utilicen, así que tendrán que ajustarlos según el resultado que obtengan.
      c_w_w = w_w + 40;
      c_w_h = w_h + 22;
      y_w_h = c_w_h - 60;
      bg_w_h = w_h - 20;

// Tomamos las variables anteriormente creadas para definir las dimensiones de todas las capas, acá es cuestión de utilizar un poco la lógica e ir ajustando cada capa a prueba y error, siempre tomando como base las dimensiones de nuestra caja.
      $(this).parent().children(".border_bg").css("width", w_w);
      $(this).parent().children(".border_bg").css("height", bg_w_h);
      
      $(this).parent().children(".border_top").css("width", w_w);
      $(this).parent().children(".border_top").css("height", c_w_h);
      $(this).parent().children(".border_bot").css("width", w_w);
      $(this).parent().children(".border_bot").css("height", c_w_h);
      
      $(this).parent().children(".border_right").css("width", c_w_w);
      $(this).parent().children(".border_right").css("height", y_w_h);
      $(this).parent().children(".border_left").css("width", c_w_w);
      $(this).parent().children(".border_left").css("height", y_w_h);
      
      
      $(this).parent().children(".corner_1").css("width", c_w_w);
      $(this).parent().children(".corner_1").css("height", c_w_h);
      $(this).parent().children(".corner_2").css("width", c_w_w);
      $(this).parent().children(".corner_2").css("height", c_w_h);
      $(this).parent().children(".corner_3").css("width", c_w_w);
      $(this).parent().children(".corner_3").css("height", c_w_h);
      $(this).parent().children(".corner_4").css("width", c_w_w);
      $(this).parent().children(".corner_4").css("height", c_w_h);
      
      $(this).parents(".border_container").css("width", c_w_w);
      $(this).parents(".border_container").css("height", c_w_h);
   });
   
  }   
         
});

Con esto terminamos nuestro mini-plugin, ahora lo único que tenemos que hacer para verlo funcionando es llamar nuestra función box-model pasándole como parámetro el div o grupo de divs a los que queramos añadirle los bordes con imágenes:

Código :

// si es un único elemento podemos pasarle un ID
box_model("#nuestra caja");

//si en cambio queremos aplicarle los bordes a varios elementos podemos pasarle una clase, con lo cual jQuery nos devolverá un array y la función se aplicara a todos los elementos que tengan esta clase.

box_model(".nuestras_cajas");

Y eso es todo, con esto podemos realizar cualquier diseño idéntico a como lo tenemos en el PSD con total compatibilidad desde IE7 en adelante (incluso desde el 6 excepto por los png), les dejo un demo de como me quedó, espero que les sea de utilidad.

saludos.

Demo

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.