このCSS知らなかったよ
知らなかったやつとか便利なやつとか紹介したいです
主要ブラウザ(IE, Firefox, chrome, Safari, iOS Safari, Android)
pointer-events
クリックイベントをキャンセルできる!
クリックイベントで要素のスタイルを変更したいとき、その要素の子要素をトリガーにできる
主要ブラウザは対応してる
https://gyazo.com/c82affc5b61a5fb65766a1c2fafd7916
codepen:
backdrop-filter
filterかけられる
IE, firefoxは使えない
backdrop-filter: blur(10px);
グラスモーフィズムに使える
https://gyazo.com/7d341c333891c7958b9ca493c2093551
backdrop-filter: sepia(90%);
懐かしい気持ちになる
https://gyazo.com/0016c9ca07855d65ec82d25853294b6a
backdrop-filter: blur(4px) sepia(60%);
複数掛け合わせることもできる
懐かしグラスモーフィズム
https://gyazo.com/36985f4ccfcbed08a5dc9319fd90b699
tabata.icon 前記事書いてました
scroll-snap
スクロールした時に指定したとこにピタって止まる 便利
対応ブラウザ
ほぼ使える
IEは古い記述じゃないと使えない
scroll-snap-type: y mandatory;
スクロールしたら指定したところにピタッと止まる
scroll-snap-type: y proximity;
スクロールしたところが真ん中ぐらいだったらそこで止まる
https://gyazo.com/d029c33000a63fa232b32e3853ca126e
aspect-ratio
要素のアスペクト比を指定できる
今までpadding-top: 30% ってやってたやつ
対応ブラウザ少ないけどとても便利
対応ブラウザ
chrome、Edge
width
code:html
<div class="box item-1">1:1</div>
<div class="box item-2">2:1</div>
<div class="box item-3">4:3</div>
<div class="box item-4">16:9</div>
code:css
.box {
width: 100px;
}
.item-1 {
aspect-ratio: 1 / 1;
}
.item-2 {
aspect-ratio: 2 / 1;
}
.item-3 {
aspect-ratio: 4 / 3;
}
.item-4 {
aspect-ratio: 16 / 9;
}
https://gyazo.com/28a9ad2b7a654a1d645d9e640d7306f6
@scroll-timeline
パララックスとかをCSSで実装できる!
まだ使えない 実装中
GIF貼りたかったけどなんかChrome Canaryできなかった ; (
画面に写してなんとかする
参考リンク
参考demoリンク