Borde interno con CSS

26/dic/2007 8

Para todos es conocido el modelo de caja y cómo la propiedad border juega un papel importante en ello. Para los que no, un brevísimo resumen: cualquier borde que definas a través de CSS, te es sumado al ancho y alto de la caja que lo contenga (entre otras propiedades). Si no ha quedado claro aún, insisto que te tomes un tiempo para leer el artículo sobre ello.

La idea es mostrar una técnica donde a través de una imagen contenida dentro de un link, podamos hacer que el border al momento del :hover no interfiera con la caja contenedora de la imagen. O sea, en vez de ser externo, que se despliegue hacia dentro de la imagen. Primero, un ejemplo de lo que ocurre comúnmente:

Ver Ejemplo 1

Border Interno en CSSLab

Qué sucede. Primero, al tener una imagen linkeada de la manera <a><img /></a> debemos darle border al <a> para que, a través de la pseudo-class :hover me funcione sin problemas. Como verán, la imagen al principio no tenía ese border (el cual exageré para que se notara el problema). ¿Qué solución tendríamos? Bueno, si son acertivos lo solucionarían agregando un border al a:link del mismo color de fondo y del mismo grosor. Así, no se notaría el cambio de instancia (en cuanto a ese movimiento que se produce), y funciona bastante bien. Pero, ¿y si no podemos hacer calzar el color de fondo, ya que tenemos una imagen, un pattern o un gradiente por ejemplo?

Ver Ejemplo 2

Bueno, aqui les tengo una solución más elegante al tema. Simplemente, en vez de que el border me sume pixeles a la caja que contiene la imagen, es mejor que las haga parte, integrando el border dentro de la imagen. La única contra que veo es que puede que tape algo importante que tenga la imagen, pero bueno depende de su criterio como diseñador/desarrollador aplicarlo.

El HTML del ejemplo es demasiado simple:

<a href="#"><img src="foto.jpg"  /></a>

y con el CSS haremos magia:

a  {
     display: block;
     overflow: hidden;
     position: relative;
     width: 300px;
     height: 200px;
}
          a img {
               display: block;
          }
          a:hover {
               border: 5px solid red;
               width: 290px;
               height: 190px;
          }
               a:hover img {
                    margin: -5px 0 0 -5px;
               }
SafariFirefoxInternet Explorer 7Internet Explorer 6Opera

Al link le decimos que sea un elemento bloque (display: block;) y que tenga alto y anchos de la imagen (si no fuera block no lo aplicaría). Luego, al a:hover le definimos el borde que queremos, así como el nuevo ancho y alto restados el borde multiplicado por 2. Me explico. Si tenemos un border: 10px; tenemos que restar 20px al alto y ancho ya que lo cubre por completo, según el modelo de caja. Finalmente, el truco final. Al a:hover img le decimos que la imagen el momento de poner el mouse sobre el link se va a mover 5px negativos arriba y 5px negativos hacia la izquierda. Con esto logramos que la imagen no se note el movimiento con el :hover y vuelva a su posición inicial. Si su borde es de 10px, sería margin: -10px 0 0 -10px;

Ver Ejemplo Final

Comentarios

  1. sergiomas [#]

    El problema es que no puedes tener un estilo genérico para todas las imágenes si estas tienen diferentes dimensiones.

    Con esta otra solución si se puede:

    /* el css */
    a:hover {
    text-decoration: none;
    }
    a img {
    background: #666;
    border: 0;
    padding: 5px;
    }
    a:hover img {
    background: #999;
    }

    El rollover sobre el enlace cambia el color de fondo de la imagen, que se puede ver gracias a un padding que los separa.

    Saludos

  2. Juan [#]

    Sergiomás, la has clavao!

    Eso es una solución elegante!

  3. ilen [#]

    oye papi esta es la solucion q necitaba la aplicare en mi web. Gracias por el Aporte..!!!

  4. catalina [#]

    uy no que es eso tan vakno deberian tener mas definicioones

    (*)….gracias

  5. Carlos [#]

    Genial, el botón queda muy bonito y limpio, Muy buen tutorial, gracias!

  6. aaorasio [#]

    Hola muy buenas llevaba tiempo buscando un ejemplo así, podrían explicarme como lo puedo utilizar con un modo inline y no en block.
    Cuando lo pongo en inline que es lo que me interesa para una galería todo se va al traste.
    Un saludo.

  7. Anónimo [#]

    […] pero hay que editar el clss de las imagenes que quieres con el borde asi… Le dejo un tutorial: Borde interno con CSS ↝ CSSLab Saludos Theme Optimizado para Adsense y MicroNichos para WP y Blogger! Citando […]

  8. Melina [#]

    Muchas gracias por compartir tu conocimiento!

    Hago un humilde aporte:

    Tambien he resuelto el tema de que el borde no extienda el ancho o el alto del elemento (tambien funciona con el padding) con la propiedad de border-sizing:

    img {
    width: 300px;
    border: 25px solid red;
    box-sizing: border-box;
    }

    Espero que les haya servido!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab