タグ

ブックマーク / css-tricks.com (2)

  • Image Rollover Borders That Do Not Change Layout

    It’s a fact of CSS life that the ‘border’ of any block level element gets factored into its final box size for layout. That means that if you add a border on a hover to an element that didn’t already have a border of that exact size, you will cause a layout shift. It’s one of my pet peeves, for sure, when I see it in final designs. I find those little shifts, even 1 pixel, jarring and awkward. (qu

    Image Rollover Borders That Do Not Change Layout
    kiyokichi
    kiyokichi 2010/08/09
     画像リンクの内側にborderを表示させる。仕組みがよくわからんが、pointは<a>へのfloat:left;と<img>の-marginかな・・・?
  • Inset Border Effect

    Inset Border Effect jQuery Plugin by Robin Thrift This plugin puts a border around the targeted elements (typically images), but unlike normal CSS borders it covers up part of the image. When the element is hovered over, the border animates to the sides, revealing the whole image. DOWNLOAD v1.0 Usage Simple: $("img").insetBorder(); All options: $("img").insetBorder({ speed : 1000, // 1000 = 1 seco

    kiyokichi
    kiyokichi 2010/08/06
    色違いの2重borderもできればいいんだけどな~…境界線+光彩(内側)のやつ
  • 1