Borde interno con CSS

26/Dic/2007 293

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. gay dating sites t [#]

    gay hiv interracial dating https://gayedating.com/

  2. HenryUnfiP [#]

    is ayi a big gay dating site
    am.i too ugly for gay dating
    gay dating simulator free

  3. PeterCed [#]

    prescriptions from canada
    online pharmacy viagra canadian rx prices cialis canada online pharmacy how much is viagra buy cialis online canada generic viagra cheap generic cialis canada what happens if a girl takes viagra natural alternatives to viagra canada online drugs
    cheap canadian viagra cheap generic viagra online canadian discount pharmacies viagra in india meds canada

  4. ivermectin tablets [#]

    ivermectin 10 mg Borde interno con CSS | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ ivermectin

  5. FelipeHaw [#]

    viagra 100
    online prescription viagra cheap viagra from india cheap generic viagra buy online viagra canadian drugs viagra my canadian pharcharmy online cheap cialis online canadian pharmacy cielas cialis in canadian pharmacies ed drugs online from canada
    how to get viagra where to buy viagra generic viagra cheap pfizer viagra cialis discount

  6. app.gumroad.com [#]

    Hello! Do you know if they make any plugins to help with Search Engine Optimization? I’m trying to get my
    blog to rank for some targeted keywords but I’m not seeing
    very good gains. If you know of any please share. Thanks!
    asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  7. Jasonblabs [#]

    viagra singapore pharmacy

  8. ivermectin1.com [#]

    stromectol 0.5 mg Borde interno con CSS | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ stromectol

  9. HenryUnfiP [#]

    gay dating books
    straight man dating gay man
    all gay dating site in canada

  10. gay dating free site [#]

    sa gay dating sites https://gayonlinedating.net/

  11. this quest bars [#]

    I’m really enjoying the design and layout of your site.
    It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did you hire out a developer to create your theme?

    Great work! quest bars http://j.mp/3jZgEA2 quest bars

  12. http://j.mp/3hkp4jI [#]

    Awesome article. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  13. Markblabs [#]

    generic viagra 150 mg online

  14. is quest bars [#]

    If you want to get a great deal from this article then you have to apply these
    techniques to your won weblog. quest bars http://j.mp/3C2tkMR quest bars

  15. gay dating kansas city [#]

    gay pittsburgh dating https://datinggayservices.com/

  16. PeterCed [#]

    free viagra
    buy viagra online without script buy cialis in canada canada viagra online free sample viagra buy viagra internet canada prescriptions online discount cialis canada online prescription viagra tadalafil in canada canadian-pharmacy-online
    cialis generic to canada price of viagra canadian levitra drug prices viagra for men

  17. http://j.mp [#]

    Hello everyone, it’s my first visit at this website, and
    post is actually fruitful in support of me, keep up posting
    these articles or reviews. scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  18. http://coub.com [#]

    Hello! I understand this is sort of off-topic but I needed to ask.
    Does running a well-established blog such as yours take a large amount of work?
    I’m completely new to running a blog but I do write in my journal on a daily basis.
    I’d like to start a blog so I can share my experience and feelings online.
    Please let me know if you have any suggestions or tips for new aspiring
    bloggers. Thankyou! scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis
    surgery

  19. http://tinyurl.com [#]

    I’d like to find out more? I’d want to find out some additional
    information. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  20. http://www.iherb.com/search?kw=questbars [#]

    At this time it looks like BlogEngine is the top blogging platform out there right now.
    (from what I’ve read) Is that what you’re using on your blog?
    quest bars https://www.iherb.com/search?kw=quest%20bars quest
    bars

  21. FelipeHaw [#]

    viagra coupons
    viagra online no prescription viagra from a pharmacy in canada canada drug superstore canadian online pharmacy cialis buy generic cialis canadian pharmacy cialis generic http://www.onlinepharmaciescanada.com cialis without prescription canada 5mg cialis cialis and pharmacy
    buy brand viagra sample viagra price of viagra buy viagra usa buy real viagra

  22. cialis online [#]

    buy cialis online cialis dosage

  23. http://bitly.com [#]

    My coder is trying to persuade me to move to
    .net from PHP. I have always disliked the idea because of the costs.
    But he’s tryiong none the less. I’ve been using Movable-type on several
    websites for about a year and am worried about switching to
    another platform. I have heard excellent things about blogengine.net.
    Is there a way I can import all my wordpress content into it?
    Any kind of help would be really appreciated!

    ps4 games https://j.mp/3z5HwTp ps4 games

  24. HenryUnfiP [#]

    gay men with kids dating
    gay cousins dating meme
    gay dating sim 18+

  25. HenryUnfiP [#]

    world of warcraft gay dating
    new gay dating site
    gay couple dating site

  26. zithromaxeska [#]

    zithromax wiki zithromax 500mg tab zithromax classification

  27. Jasonblabs [#]

    cialis in usa

  28. Judyblabs [#]

    generic retin a 0.1

  29. HenryUnfiP [#]

    gay asia dating
    gay dating websites london
    free gay dating in duluth

  30. www.pharmaceptica.com [#]

    erectile tissue in the nose https://pharmaceptica.com/

  31. Ugoblabs [#]

    ivermectin 5 mg

  32. stromectol over the counter walgreens [#]

    Accustomed Information Fro this offshoot
    https://ivermectinstrom.com canine ivermectin for sale
    https://ivermectstromect.com ivermectin 3 mg tab
    https://stromectolivermect.com ivermectin paste for humans
    https://stromectolivermect.com bula ivermectina
    https://stromectolivermect.com ivermectin dosage chart for humans

  33. modafinilprovigil [#]

    https://provigilmodafinill.com/ how to get modafinil

  34. provigilmedication [#]

    provigil for depression modafinil for sale

  35. stromectolforte.com [#]

    ivermectin for humans walmart http://stromectolforte.com/# buy stromectol uk sales of ivermectin

  36. bactrim generic name [#]

    sulfamethoxazole medication https://bactrimtrimoxazole.com/

  37. buy ivermectin pills online [#]

    ivermectin for humans for sale http://stromectolforte.com/ stromectol stromectol cream

  38. stromectolforte.com [#]

    stromectol 3mg tablets https://stromectolforte.com/# ivermectin ivermectin sales

  39. more info [#]

    I have read so many articles or
    reviews on the topic
    of the blogger lovers however this piece of writing is really a fastidious piece
    of writing, keep it up.

  40. bactrim antibiotic [#]

    sulfamethoxazole Trimethoprim side effects trimoxazole

  41. GustavoVet [#]

    write my dissertation
    what is the best essay writing service

CSSLab