Card Shadow CSS — Jemný kód box-shadow
Vizuálne vytvorte kód box-shadow CSS: posuvníky pre posun, rozmazanie, roztiahnutie, farbu s nepriehľadnosťou, režim vkladania a až štyri vrstvy so živým náhľadom.
Výsledok
Táto stránka otvorí generátor box-shadow prednastavený na klasický tieň karty: 2px nadol, 8px rozmazanie, 15% nepriehľadnosť čiernej. Je zámerne tichý – dosť na to, aby oddelil kartu od stránky bez toho, aby sa ohlásil – a ukážka presne ukazuje, aké tiché je.
Tento rozsah zodpovedá najnižším výškovým krokom vo väčšine návrhových systémov: zoznamové karty, rozbaľovacie ponuky, kontextové okná a riadky tabuliek pri umiestnení kurzora myši. Ak potrebujete silnejší zdvih pre modálne alebo plávajúce panely, zvýšte odsadenie Y a rozmažte spolu – mali by rásť proporcionálne, aby bol zdroj svetla vierohodný.
Skopírujte čiaru tieňa do svojich štýlov komponentov alebo ju duplikujte ako druhú vrstvu s užším rozmazaním, aby ste pridali definíciu okrajov. Nástroj je bezplatný a beží výhradne vo vašom prehliadači.