clip-path に circle() や polygon() を指定すると、画像を円や六角形に切り抜けます。横長の画像で円が欠ける理由、影の付け方、切り抜いた外側のクリック、形を変えるアニメーションの条件も確かめました。

角を丸めた箱に、幅と高さが 0 の ::after を重ね、border の1辺だけに色を付けると、吹き出しのしっぽになります。枠線のある吹き出しの作り方と、overflow: hidden や影でしっぽが消える・欠ける理由も確かめま ...

チェックボックスに role=”switch” を付けて見えなくし、後ろの span に描いたつまみを :checked で動かすと、CSS だけでスイッチになります。キーボードでの操作と、display: n ...

半透明の背景色に backdrop-filter: blur() を組み合わせると、すりガラス風の背景になります。不透明だと効かないこと、blur の値の決め方、入れ子のすりガラスがぼけない理由と直し方を、画素を測って確かめました。

親を display: grid にして place-items: center を付け、min-height: 100dvh で画面の高さまで広げると、要素は画面の真ん中に来ます。中身が画面より高いときに上の端が切れる場合の直し方も ...

リンクの下線を ::after で描き、scaleX(0) から scaleX(1) へ変えて transform-origin を left にすると、左から伸びます。右へ抜けさせる書き方や、2行に折り返すリンクでの直し方も確かめま ...

三本線のうち上下の線を真ん中まで動かして45度ずつ回し、真ん中の線を消すと×になります。transform の関数の順番を逆にすると×がずれる理由や、開閉の状態を aria-expanded で伝える書き方も確かめました。

:hover のときに transform でカードを数px上げ、box-shadow の影を広げると、浮き上がって見えます。下の端でマウスを動かすと上下に揺れる理由と直し方、キーボードやタッチ、動きを減らす設定への合わせ方も確かめま ...

丸くした枠線の上の1辺だけ色を変え、@keyframes で rotate(360deg) まで回し続けると、読み込み中のアイコンになります。linear を書かないと1周ごとに止まりかける理由、span で作るときの注意、読み上げ用 ...

ぼかしのない box-shadow で側面を描き、押している間（:active）だけ transform で下げると、沈むボタンになります。上の端を押すと click が届かないことがある理由と直し方、disabled やキーボードで ...