[CSS]画像にちょっと素敵なエフェクトを与えるスタイルシートのまとめ

サイト構築 -CSS

Post on:2012年4月2日

ポラロイド風に

メッセージを添えたポラロイド風にします。

デモページ

[ad#ad-2]

HTML

img要素とメッセージのp要素をdiv要素に内包します。

<div class="polaroid">
  <p>Sarah, Dec '02</p>
  <img src="http://lorempixum.com/200/200/people/1" />
</div>

デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。

<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>

CSS

ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。

.polaroid {
  position: relative;
  width: 220px;
  margin: 20px;
}

.polaroid img {
  border: 10px solid #fff;
  border-bottom: 45px solid #fff;
  -webkit-box-shadow: 3px 3px 3px #777;
     -moz-box-shadow: 3px 3px 3px #777;
          box-shadow: 3px 3px 3px #777;
}

.polaroid p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  font: 400 18px/1 'Kaushan Script', cursive;
  color: #888;
}

複数のボーダーを簡単に

box-shadowを使って、画像に複数のボーダーを適用します。

デモページ

HTML

img要素をdiv要素で内包します。

<div class="multiple-borders">
  <img src="http://lorempixum.com/400/200/nature/1" />
</div>

CSS

box-shadowをボーダーのようにするには、ぼやけを0にします。

.multiple-borders {
  width: 400px; height: 200px;
  margin: 50px;
  -webkit-box-shadow:
    		0px 0px 0px 2px rgba(0,0,0,0.6),
                0px 0px 0px 14px #fff,
                0px 0px 0px 18px rgba(0,0,0,0.2),
                6px 6px 8px 17px #555;

     -moz-box-shadow:
    		0px 0px 0px 2px rgba(0,0,0,0.6),
                0px 0px 0px 14px #fff,
                0px 0px 0px 18px rgba(0,0,0,0.2),
                6px 6px 8px 17px #555;

          box-shadow:
    		0px 0px 0px 2px rgba(0,0,0,0.6),
                0px 0px 0px 14px #fff,
                0px 0px 0px 18px rgba(0,0,0,0.2),
                6px 6px 8px 17px #555;
}

ビネット効果

box-shadowを使って、はめこまれたようなインセット状のシャドウをつけます。

デモページ

HTML

classを付与してdiv要素のみです。画像は背景として配置します。

<div class="vignette">
</div>

CSS

画像を背景とし、insetでbox-shadowを使用します。

.vignette {
  background: url("http://lorempixum.com/400/200/nature/5");
  width: 400px; height: 200px;
  margin: 50px;
  -webkit-box-shadow:
    		inset 0 0 50px #000,
                inset 0 0 50px #000,
                inset 0 0 50px #000;

     -moz-box-shadow:
    		inset 0 0 50px #000,
                inset 0 0 50px #000,
                inset 0 0 50px #000;

          box-shadow:
    		inset 0 0 50px #000,
                inset 0 0 50px #000,
                inset 0 0 50px #000;
}

テクスチャを重ねる

画像にテクスチャ（グランジ風）を重ねたスタイルです。

デモページ
※キャプチャはホバー時

HTML

写真画像とテクスチャは背景として配置するので、div要素のみです。

<div class="grunge">
</div>

CSS

div要素のサイズを写真画像のサイズにし、3つ目の「ビネット効果」を弱めに与えます。
ホバー時にはマルチバックグラウンドを使い、テクスチャをオーバーレイで配置します。背景は最初に記述した方が上に表示されます。

.grunge {
  background: url("http://lorempixum.com/400/200/technics/4");
  width: 400px; height: 200px;
  margin: 50px;
  -webkit-box-shadow: inset 0 0 20px black;
  -moz-box-shadow: inset 0 0 20px black;
  box-shadow: inset 0 0 20px black;
}

.grunge:hover {
  background: url("http://designshack.net/wp-content/uploads/imagetreatments-texture3.png"), url("http://lorempixum.com/400/200/technics/4");
}