このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

sepia()”関数CSS3で追加

記事Jul.27th,2021
入力画像をセピア調に変換するCSSの関数、“sepia()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

sepia()”関数

sepia()”関数は入力画像をセピア調に変換するための関数です。

<filter-function>”値として使用することができ、filter”プロパティで要素をセピア調に変換することができます。

引数は1個の<number-percentage>”値で、“0”は“0%”、“1”は“100%”に対応します。

sepia(〚“<number-percentage>”値〛)

引数は変換の比率を表し、“0%”で入力画像と同じ画像、“100%”で完全なセピア調の画像を出力します。“100%”より大きい引数も有効ですが、“100%”に丸められます。負の値は無効です。

省略時の既定値は“1”です。また、補間時の初期値は“0”です。

使用例

.filter-0 { filter: sepia(0%);}
.filter-2 { filter: sepia(20%);}
.filter-4 { filter: sepia(40%);}
.filter-6 { filter: sepia(60%);}
.filter-8 { filter: sepia(80%);}
.filter-10 { filter: sepia(100%);}
sepia(0%)
sepia(20%)
sepia(40%)
sepia(60%)
sepia(80%)
sepia(100%)

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
sepia()
定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク