Stíny

Díky jemnému stínu vypadá karta, jako by se vznášela kousek nad stránkou. V CSS se stín vytváří vlastností box-shadow (stín boxu), kterou kurz CSS neprobíral. Její hodnota stín popisuje:

box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);

• 0: o kolik se stín posune doprava (záporná hodnota ho posune doleva);
• 10px: o kolik se posune dolů (záporná hodnota nahoru). Stín pod prvkem působí, jako by světlo svítilo shora;
• 15px: rozmazání: čím větší hodnota, tím měkčí okraj stínu;
• -3px: roztažení: kladná hodnota udělá stín větší než prvek, záporná menší;
• rgb(0 0 0 / 0.1): barva, tady černá s alfou 0.1, tedy z 90 % průhledná. Je to novější zápis s lomítkem, který jste viděli v kurzu CSS.

Stínů můžete napsat i víc, oddělených čárkami, a většina stínů Tailwindu používá dva najednou, aby vypadaly přirozeněji. Hodnoty si pamatovat nemusíte: vyberete jen velikost. Takhle vypadají:

Třída shadow-lg například znamená tohle (Tailwind to zapisuje pomocí proměnných, aby šel stín kombinovat s dalšími třídami, ale výsledek je stejný):

.shadow-lg {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

Stejně jako u zaoblených rohů se v Tailwindu 4 změnily názvy: ve starších příkladech je shadow-sm dnešní shadow-xs a shadow dnešní shadow-sm. Třída shadow-none stín odstraní.

Stín je ve výchozím stavu černý, ale můžete mu dát barvu z palety: shadow-lg shadow-orange-200 vytvoří světle oranžovou záři. Na světlé stránce volte spíš jemné stíny: velké tmavé stíny působí těžkopádně. Naše karta už má světlý rámeček a spolu se stínem se od stránky pěkně odliší.