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

前回の続きです。

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

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

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

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

html：

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：

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：

CSS：

.vignette_soft{ /* 前の記事を参照してください */ }

もうすこし、続きます。