CSSを作る

box-shadow は、カンマで区切っていくつも重ねられます。よく見かける「軽く浮いている感じ」は、ぼかしの小さい影と大きい影を重ねて作られています。1枚の影を濃くするのではなく、近い影と遠い影に分けるのが、自然に見せるこつです。

border-radius は最大で8つの値を持てます。スラッシュの前が横方向、後ろが縦方向の半径で、別々に指定すると円ではなく楕円の角になります。柔らかい有機的な形を作りたいときに使われるのはこの書き方です。つまみを動かすと、数字と形の対応がそのまま見えます。

文字と背景の明るさの比は、本文なら4.5対1以上が目安とされています。グラデーションの上に文字を置くと、位置によって比が変わります。いちばん条件の悪いところで測らないと、通ったつもりで通っていない、ということが起きます。

動きにも同じ話があります。回り続けるローディングや点滅する演出は、人によっては気分が悪くなります。OS 側に「動きを減らす」設定があり、CSS からは prefers-reduced-motion で読み取れます。動きを足したら、止める道も一緒に用意するのが今の作法です。