2023年現在のcssが解る「State of CSS」

2023.stateofcss.com

ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。
ただ、新しいプロパティはブラウザごとに対応状況が違うので、必ずcan I use 等で対応状況を確認しましょう。

caniuse.com

使用したいcss

• aspect-ratio
• flexのgap
• css filter effect
• backdrop-filter
• scroll-behavior
• css variables(カスタムプロパティ)
• css Nesting

backdrop-filterのデモ

See the Pen
backdrop-filterを使ったグラスモーフィズム by yachin29 (@yachin29)
on CodePen.

scroll-behaviorのデモ1

See the Pen
scroll-behaviorでスムーススクロール by yachin29 (@yachin29)
on CodePen.

background-clipのデモ

See the Pen
apple風のテキストグラデーション by yachin29 (@yachin29)
on CodePen.

background-clipのアニメーションデモ

See the Pen
cssでグラデーションとアニメーション by yachin29 (@yachin29)
on CodePen.

使用するグラデーション

https://webgradients.com/

www.imagica-cs.co.jp