THE HAM MEDIA BLOG

CSSだけで画像をフレーム表現するあれこれ

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
photo
ボーダー
写真
CSS
フレーム

写真にフレームをつける

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

ボーダーを使って装飾

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

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

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

photosamp_m.jpg

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

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

Photo Sample

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

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

Photo Sample

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

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

Photo Sample

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;
}

●ボーダーで立体的な影

Photo Sample

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

●ちょっとポラロイド風

Photo Sample

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タグのパディングとボーダー

Photo Sample

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;
}

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

Photo Sample
サンプル写真:冬、飛行機の上より

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;
}

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

Photo Sample
サンプル写真:冬、飛行機の上より

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;
}

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

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。