CSS

colofilter.cssで美しいカラーフィルタを画像に適用する完全ガイド

colofilter.cssを使って画像に色々なパターンのカラーフィルタを設定し、表示する方法をご紹介します。

colofilter.cssとは?

Webデザインの世界では、画像に色彩を加えることで、サイトの見栄えを大きく変えることができます。colofilter.cssは、そんなデザインを手軽に実現するためのCSSライブラリです。このライブラリを使えば、誰でも簡単に画像に様々な色のフィルターを適用できます。

colofilter.cssの基本

まずはcolofilter.cssを使用するための基本的な手順を見ていきましょう。

ライブラリの導入

colofilter.cssを使用するには、まずそのファイルをWebページに読み込む必要があります。以下のコードをHTMLファイルのヘッド部分に追加します。

<link href="colofilter.css" rel="stylesheet" type="text/css">

CSSの設定

次に、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を使用したデモページを設けました。以下のリンクから確認できます。

colofilter.cssを使って画像にカラーフィルタを設定表示するデモページ

ソース元:Colofilter.css

Colofilter.css

まとめ

colofilter.cssを使えば、画像にカラーフィルタを適用することが簡単にできます。このツールを使用して、ウェブサイトのビジュアルを更に引き立たせましょう。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。