THE HAM MEDIA BLOG

僕のブログでも画像をいろいろCSSで装飾していますが
画像にフレーム(枠)をつける方法をいろいろ紹介しようと思います。

ボーダーを使って装飾

一番オーソドックスな方法かもしれませんが、
枠をボーダーで表現する方法です。

※サンプルの写真は、僕が撮影した飛行機の上からの景色です。

●全体が同じ太さのボーダー

a img.imglinksamp01 {
border:10px solid #cfcfcf;
}
a:hover img.imglinksamp01 {
border:10px solid #9f9f9f;
}

●全体をボーダー二重ライン

a img.imglinksamp02 {
border:10px double #cfcfcf;
}
a:hover img.imglinksamp02 {
border:10px double #9f9f9f;
}

●ボーダーで額縁のように表現

a img.imglinksamp03 {
border:10px ridge #cfcfcf;
}
a:hover img.imglinksamp03 {
border:10px ridge #9f9f9f;
}

●右と下だけボーダーで擬似的な影

a img.imglinksamp04 {
border-top:5px solid #fff;
border-right:5px solid #cfcfcf;
border-bottom:5px solid #cfcfcf;
border-left:5px solid #fff;
}
a:hover img.imglinksamp04 {
border-top:5px solid #fff;
border-right:5px solid #cfcfcf;
border-bottom:5px solid #cfcfcf;
border-left:5px solid #fff;
}

●ボーダーで立体的な影

a img.imglinksamp05 {
border:10px outset #cfcfcf;
}
a:hover img.imglinksamp05 {
border:10px inset #cfcfcf;
}

●ちょっとポラロイド風

a img.imglinksamp06 {
border-top:10px solid #cfcfcf;
border-right:10px solid #cfcfcf;
border-bottom:30px solid #cfcfcf;
border-left:10px solid #cfcfcf;
}
a:hover img.imglinksamp06 {
border-top:10px solid #9f9f9f;
border-right:10px solid #9f9f9f;
border-bottom:30px solid #9f9f9f;
border-left:10px solid #9f9f9f;
}

ボーダーとimgを囲う要素を使って装飾

●pタグのパディングとボーダー

HTMLソース

<p class="imglinksampp07">
  <a href="JPEG">
    <img src="JPEG" alt="Sample"
      width="300" height="225" class="imglinksamp07" />
  </a>
</p>

CSSソース

a img.imglinksamp07 {
border:1px solid #ccc;
}
p.imglinksampp07 {
display:block;
width:300px;
height:225px;
padding:10px;
background-color:#fff;
border:1px solid #999;
}

●ポラロイド風、キャプション付き

サンプル写真：冬、飛行機の上より

HTMLソース

<p class="imglinksampp08">
  <a href="JPEG">
    <img src="JPEG" alt="Sample"
      width="300" height="225" class="imglinksamp08" />
  </a>
</p>

CSSソース

a img.imglinksamp08 {
border:1px solid #ccc;
}
p.imglinksampp08 {
display:block;
width:300px;
height:250px;
padding:10px;
background-color:#fff;
border:1px solid #999;
}

●ポラロイド風、背景＆キャプション付き

サンプル写真：冬、飛行機の上より

HTMLソース

<p class="imglinksampp09">
  <a href="JPEG">
    <img src="JPEG" alt="Sample"
      width="300" height="225" class="imglinksamp09" />
  </a>
</p>

CSSソース

a img.imglinksamp09 {
border:1px solid #ccc;
}
p.imglinksampp09 {
display:block;
width:300px;
height:250px;
padding:10px;
background: #fff url(###) repeat 0 0;
border:1px solid #999;
}

場面に合った用途で、
写真を彩ってみてください。