いままで画像やjavascriptで対応していたことが最近ではcssだけで表現できるようになってきました。
その中の一部をご紹介させていただきます。
しかし、使用する際の注意点として、一部のブラウザで対応していないプロパティもあります。
場合によって、@supportsを使って代替スタイルを追加するなど、cssだけで条件分岐をして対応する必要があります。
@supportsの使い方についても一番最後の項目でご紹介させていただきます。
conic-gradient
cssのグラデーションで代表的なものといえばlinear-gradientですが、conic-gradientを使えばcssだけで円グラフを作成できます。
https://ide.geeksforgeeks.org/tryit.php/yEgFgnK6Y0
filter
Photoshopのフィルタ機能を使わずして、cssだけでフィルターの実装が可能となります。
filterプロパティでできることとして、
saturate・・・彩度
hue-rotate・・・色相
contrast・・・コントラスト
blur・・・ぼかし
brightness・・・明るさ
sepia・・・セピア
grayscale・・・グレースケール
drop-shadow・・・ドロップシャドウ
などなど、、、多様なエフェクトがあり、複数のエフェクトを組み合わせることも可能です。
https://ide.geeksforgeeks.org/tryit.php/5X1wTmenlC
attr()
選択された要素の値をattr()で取得できます。
cssの擬似要素（:beforeや:after）の中に入る要素はcontent: "";で指定することができますが、コンテンツと装飾がattrを使用すればjavascriptのようにhtmlから取得することができます。
こうすることで、コンテンツと装飾を分けることができます。
https://ide.geeksforgeeks.org/tryit.php/Tx6mdEQ14J
shape-outside
複雑なオブジェクトに隣接するテキストの回り込みをカスタマイズできます。
https://ide.geeksforgeeks.org/tryit.php/V96kl6U9HM
Smooth scroll snap
scroll-snapを使用すると、スマホのホーム画面のようにちょっとずらすだけで、すぐに次のコンテンツを表示させることができます。
IDE | GeeksforGeeks | A computer science portal for geeks
@supports
下記URLはひとつの例としてご紹介させていただきました。
テキストの色をグラデーションにするには、テキスト要素の背景をグラデーションカラーにし、テキストでマスクをかける方法を使用しています。
しかし、マスクをかけるにはSafariとChromeで使える background-clip を利用するので、対応していないブラウザーには普通の塗りつぶし色を適用させます。
IDE | GeeksforGeeks | A computer science portal for geeks
cssのみの実装で、ユーザーが気持ちよく操作でき、かつコード量を少なくできるのは非常に便利ですね。
