スタイルシートだけで画像にさまざまな効果をプラスしてみる。その2。

前回の続きです。

今回は、画像の上に「色付きの背景を透過させた div ボックス」を重ねてみます。

オリジナルの画像はこれ。

こいつに、こんな色の透過div を重ねます。

すると、「昭和に撮影されたフィルム」のような味わいに。

html：
<div class="board">
 <img src="//freefielder.jp/pics/test03.jpg" class="originalphoto" />
<div class="retro"></div>
CSS:
.board{ /* 前の記事を参照してください */ }
.originalphoto{ /* 前の記事を参照してください */ }

.retro{
  position: absolute;
  top:10px;
  left:90px;
  width:300px;
  height:400px;
  background-color:rgb( 200 , 50 , 50 );
 /* Firefox , Safari , Chrome , Opera , IE 9*/
  opacity:0.25;
 /* IE 8, 9 */
  filter:Alpha( opacity=25 );
}

IE 9だと、opacityも filterも処理できてしまいそうなのですが、とりあえず表示に問題は出ませんね。

もしオリジナル画像がモノクロだったら…、

こんなフィルタをかけてみます。
セピア色の写真の出来上がり。

html：
<div class="board">
 <img src="//freefielder.jp/pics/phototest03.jpg" class="originalphoto" />
 <div class="sepia"></div>
</div>
CSS：
.sepia{
  position: absolute;
  top:10px;
  left:90px;
  width:300px;
  height:400px;
  background-color:rgb(180 , 120 , 0 );
 /* Firefox , Safari , Chrome , IE 9 , Opera */
  opacity:0.3;
 /* IE 8 , 9 */
  filter:Alpha( opacity=30 );
}

前回の記事で紹介した「周辺露光落ち」と組み合わせると、こんな感じ。(Operaでは表示に変化ありません)

html：
<div class="board">
 <img src="//freefielder.jp/pics/phototest03.jpg" class="originalphoto" />
 <div class="sepia"></div>
 <div class="vignette_soft"></div>
</div>
CSS：
.vignette_soft{ /* 前の記事を参照してください */ }


もうすこし、続きます。

カテゴリ:

タグ: