2020年3月22日日曜日
CSSシミュレータ(filter)
【使い方】textareaの中身(値)を書き換えて色々と試してみる ①ぼかし / filter:blur()
0px~
初期値は「0px」
②明度(明るさ) / filter:brightness()
0%~
初期値は「100%」
③明暗差 / filter:contrast()
0%~
初期値は「100%」
④影 / filter:drop-shadow()
影の位置(横)、影の位置(縦)、影のぼかし、影の色
透過画像は、非透過部分の形に影が付く
影の位置(横):正の数が右、負の数が左
影の位置(縦):正の数が下、負の数が上
影のぼかし:0pxならはっきりくっきり
影の色:カラーコード、カラーネーム、RGB、RGBAで指定する
初期値は「none」
⑤白黒度 / filter:grayscale()
0~100%
初期値は「0%」
⑥色相回転 / filter:hue-rotate()
0deg=±360deg
180deg=-180deg
初期値は「0deg」
⑦階調反転 / filter:invert
0~100%
初期値は「0%」
⑧不透明度 / filter:opacity()
0~100%
初期値は「100%」
⑨彩度(鮮やかさ) / filter:saturate
0%~
初期値は「100%」
⑩セピア度 / filter:sepia()
0~100%
初期値は「0%」
HTML
JavaScript