2013.05.09
css

CSSで画像にビンテージ風のエフェクト

CSSだけでできるフォトショップみたいなエフェクトを紹介します。
古い写真などで変色してしまったような状態を思わせるビンテージ風なエフェクトです。

イメージギャラリーなどで使えそうです。


CSSでビンテージ風のエフェクト

box-shadowのinsetを使います。

HTML

HTMLソース
<div class="vignette">
<img src=画像のパス"/>
</div>

今回はwidthが400px、heightが225pxの画像を使用。

CSS

CSSソース
.vignette {
  width: 400px; 
  height: 225px;
  -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;
  position:relative;
}
.vignette img {
  position:absolute;
  z-index:-1;
}
CSSの説明
  • 18行目と21行目、22行目
  • 18行目のrelativeに対して、その子要素であるimgにabsolute、そしてz-indexでimgが.vingnetteよりも下のレイヤー(下側)にくるように調整。

  • box-shadow
  • ここで使っていいるbox-shadowの値は左から順に、inset、x、y、blur、colorです。
    (詳しくこちらに書きました。)

    insetは要素の内側に効果を付ける値、x、yは0px、blur(ぼかし)が50px、colorが色です。
    全く同じ値を「,(カンマ)」で区切って3つ重複しているのは、1つでは物足りないエフェクトをより効果的にするためです。

参考サイト: design shack

box-shadowの使い方は奥が深いですね。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP