When you hide an interactive element, make sure you choose a hiding technique that keeps it screen reader-accessible, position it on top of whatever is visually replacing it so that a user navigating by touch can find it where they expect to, and then make it transparent.

This technique explores using: animation with CSS transition and transform, using the :focus-within pseudo-class, CSS grid, and accessibility considerations for dropdown menus.

Dieter Rams, Vitsœ's furniture designer. Ten principles for good design (sometimes referred to as the ‘Ten commandments’).

Follow along with the examples in this in-depth guide to learn how to draw SVG icons and simple shapes by hand.

Make a smooth css shadow

https://tobiasahlin.com/blog/layered-smooth-box-shadows/

But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control over how shadows are rendered: