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

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

Contents

colofilter.cssとは？
colofilter.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を使って画像にカラーフィルタを設定表示するデモページ