CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のfilterプロパティで画像にセピア効果を適用する方法

CSS3では、filterプロパティにsepia()関数を指定するだけで、画像に簡単にセピア調（古い写真のような黄褐色のトーン）の効果を適用できます。

filter: sepia() の基本

sepia()関数は、0%〜100%（または0〜1）の値を受け取ります。値が大きいほどセピア効果が強くなり、sepia(100%)を指定すると完全なセピア調に変換されます。逆にsepia(0%)の場合は元の画像のまま表示されます。

コード例

以下は、通常の画像とセピア効果を適用した画像を並べて表示するサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
    filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework（セピア適用）</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

実行結果

上記のコードを実行すると、1つ目の画像はそのまま表示され、demoクラスが指定された2つ目の画像にはセピア効果がかかって表示されます。

CSS3のfilterプロパティで画像にセピア効果を適用する方法

応用：ホバー時のエフェクトとして活用

セピア効果は、マウスオーバー時の演出にも便利です。:hover疑似クラスと組み合わせることで、通常時は白黒やセピア、ホバー時にカラーへ戻すといったインタラクティブな表現が可能です。

img {
    filter: sepia(80%);
    transition: filter 0.3s ease;
}
img:hover {
    filter: sepia(0%);
}

このようにCSS3のfilterプロパティを使えば、JavaScript不要で手軽に画像の色調を変化させることができます。主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）でサポートされているため、安心して利用できます。

  1. CSS3のtransformで実現！要素の2D変換の基本と使い方

    2D変換とは？CSS3の2D変換（2D Transform）は、translate（移動）、rotate（回転）、scale（拡大・縮小）、skew（傾斜）などの関数を使って、HTML要素の位置や形状を自由に変更できる機能です。これらの変換を組み合わせることで、従来はJavaScriptが必要だった視覚効果を、CSSだけで手軽に実現できます。主な2D変換関数一覧No.値と説明1matrix(n,n,n,n,n,n)6つの値を指定して、行列による変換を定義します。2translate(x,y)X軸・Y軸の両方向に沿って要素を移動させます。3translateX(n)X軸方向に沿って要素を移動させ

  2. CSS3のword-breakプロパティで改行ルールを指定する方法

    CSS3で改行（ワードブレイク）のルールを指定するには、word-breakプロパティを使用します。このプロパティは、テキストがコンテナの幅を超えた場合に、どのように行を折り返すかを制御するものです。word-breakプロパティに指定できる主な値は以下のとおりです。normal：デフォルトの改行規則に従います。日本語や中国語などのCJK言語では任意の位置で改行されますが、英語などの欧文ではスペースやハイフンがある箇所でのみ改行されます。break-all：言語に関係なく、任意の文字の間で改行を許可します。英語のような単語の途中でも強制的に折り返されるため、幅の狭いコンテナで長い英単語を表示し