page フィルター

最終更新：2021/08/06

グレースケール

「page_grayscale」の中の要素は色がモノクロになります。
0%だと元の色、100%でモノクロです。
60%とか半端な数字を指定すれば色褪せた感じにもできます。

 

モノクロの画像を使いたいのであれば画像を編集する時点でその状態にしておけばいいので、cssではあまり指定しないです。
以下のようにバナー画像などのaタグにhoverしたときのアニメーションなどで使用することが多いです。
「page_grayscale」末尾に「_a」を付けてください。
※画像が薄くなっているのは、「#lp-main a:hover img」で画像が半透明になる指定をしているからです。

 

以前からあるクラス

上のアニメーションと逆になるクラスもあります。
こちらはpage.cssを作る以前からあるクラスなので、だいたいのテーマで使用できると思います。
クラスはmain.cssかcontents.cssに入っていると思います。

「toGray」を指定してください。
※こちらはaタグにhoverではなく、「toGray」にhoverしたら色が変わる指定です。
　クリックできるaタグの範囲外でも「toGray」の範囲に入っていれば色が変わります。

このテーマではmain.cssに記述しています。

 

ドロップシャドウ

影を付けます。

drop-shadow(縦軸 横軸 影が広がる範囲 色)
の順に指定します。

 

影白

影が付いているのがわかりづらかったので、「page_drop-shadow」より色を濃くしています。