colofilter.cssを使って画像に色々なパターンのカラーフィルタを設定し、表示する方法をご紹介します。
Contents
ディスプレイ広告
colofilter.cssを使って画像にカラーフィルタを設定表示するCSSの記述
※colofilter.cssファイルを読み込みます。画像表示エリア(div)には画像の縦横サイズを設定してます。必要に応じて変更して下さい。
<link href="colofilter.css" rel="stylesheet" type="text/css"> <style> body{ padding: 0; margin: 0; text-align: center; } h1{ line-height:1.6em; text-align:center; font-weight:bold; padding: 15px 0 0 0; font-size: 18px; } h2{ line-height:1.6em; text-align:center; font-weight:bold; padding: 40px 0 6px 0; font-size: 16px; } div{ display: block; width: 800px; height: 533px; margin: 0 auto; } [class^="blend-"] { position: relative; } </style>
colofilter.cssを使って画像にカラーフィルタを設定表示するHTMLの記述
※カラーフィルタ設定前のオリジナル画像「1.jpg」を用意し、画像表示エリア(div)にclass=”カラーフィルタパターン”を記述します。カラーフィルタパターンは「ソース元:Colofilter.css」にあります。
<h1>colofilter.cssを使って画像にカラーフィルタを設定して表示</h1> <h2>オリジナル画像</h2> <div><img src="1.jpg"></div> <h2>カラーフィルタを設定</h2> <div class="blend-blue"> <img src="1.jpg"> </div> <div class="blend-blue-dark"> <img src="1.jpg"> </div> <div class="blend-orange"> <img src="1.jpg"> </div> <div class="blend-red-blue-light"> <img src="1.jpg"> </div>
colofilter.cssを使って画像にカラーフィルタを設定表示するデモページ
colofilter.cssを使って画像にカラーフィルタを設定表示するデモページ
ソース元:Colofilter.css
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。