backdrop-filter
ぼかし。FireFoxとIE以外は大体使える。
background-clip、text-fill-color
background-clipは背景の配置調整、text-fill-colorはテキストの色。
background-clip: text; と text-fill-color: transparent; の合わせ技で背景を文字で切り抜いたりする(color: transparent; ではできない)。
mix-blend-mode
いろんな色変換に使用する。
クロスフェードでは通常、2要素の透明度を0→1と1→0へ同時にトランジションさせたとき途中で2要素がともに0.5
の透明度になり、両方が透けた状態となるので、違和感のある表示になることがある。
そのときはplus-lighterプロパティを使用すると、2要素がクロスフェードする場合に不透明度が考慮された状態で合成されるので、結果的にクロスフェードが綺麗に表示される。
参考:https://ics.media/entry/7258/
prefers-color-scheme
ダークモードに対応するためのメディアクエリ
scroll-snap
スクロール位置合わせ
flex gap
flexbox での余白を楽に調整
.list {
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.item {
width: calc((100% - 30px * 2) / 3);
}
display: grid
中央揃えとかも格段に楽になる。
.hoge {
display: grid;
place-items: center;
}
text-stroke
テキストの装飾に。
background-clip: text
クリッピングマスクの作成。
width: fit-content
blockでもコンテンツ幅に合わせて横幅を指定することができる。
margin-right: auto; margin-left: autoで中央配置にできるため、テキストのみのブロックの背景色を指定するときなどに利用できる。
参考:https://pulpxstyle.com/fit-content/