Generátor CSS Box Shadow a Border Radius

Jak box shadow generator použít

1. Nastavte posun stínu vodorovně a svisle. Kladné hodnoty posunou stín doprava a dolů.
2. Doladěte rozostření (blur) a rozšíření (spread). Vyšší blur stín změkčí, spread ho zvětší nebo zmenší.
3. Vyberte barvu stínu a její průhlednost. Přepínačem inset přepnete na vnitřní stín.
4. Přidejte další vrstvy stínu, pokud chcete hloubku. Živý náhled reaguje okamžitě.
5. Zkopírujte hotový CSS nebo Tailwind kód a vložte ho do svého projektu.

Jak funguje CSS vlastnost box-shadow

Vlastnost box-shadow přidává stín kolem rámečku libovolného prvku. Zápis má až pět hodnot v pevném pořadí: vodorovný posun, svislý posun, rozostření, rozšíření a barva. Klíčové slovo inset na začátku obrátí stín dovnitř prvku.

Konkrétní příklad: box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15). Stín nemá vodorovný posun, klesá o 4 pixely dolů, má rozostření 12 pixelů, nulové rozšíření a černou barvu s 15% krytím. Právě průhledná barva dělá stín věrohodným. Plná černá působí tvrdě a nepřirozeně.

Vrstvení stínů pro realistickou hloubku

Jeden stín působí ploše. Reálný předmět vrhá stín, který je u okraje ostrý a se vzdáleností se rozpíjí. Tohle napodobíte tak, že do jedné vlastnosti box-shadow vložíte několik stínů oddělených čárkou. Generátor stínů vám vrstvy skládá vizuálně, takže nemusíte kód psát ručně.

Osvědčený postup je začít blízkým a nevýrazným stínem, na něj přidat vzdálenější a měkčí. Například 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08). První vrstva definuje okraj karty, druhá dodá dojem, že prvek se vznáší nad podkladem. Prohlížeč vrstvy vykreslí odshora dolů, takže první stín v seznamu je nejblíž povrchu.

Vnitřní stín inset versus vnější stín

Bez klíčového slova inset stín obepíná prvek zvenku a vytváří dojem, že se prvek zdvihá nad plochu. S inset se stín vykreslí uvnitř rámečku a prvek naopak vypadá zapuštěně nebo prohloubeně. Hodí se na vstupní pole, přepínače nebo stisknutá tlačítka.

Rozšíření (spread) funguje u obou typů podobně. Kladná hodnota stín zvětší za hranici rozostření, záporná ho stáhne dovnitř. Jemný záporný spread u vnějšího stínu pomáhá držet stín kompaktní pod prvkem místo toho, aby vytékal do stran. Border-radius generátoru navíc zaoblí rohy, aby stín kopíroval reálný tvar prvku.

Časté otázky

Jak udělat jemný a realistický stín?

Použijte nižší krytí barvy (kolem 8 až 15 %), větší rozostření a malý svislý posun. Ještě lepší je poskládat dvě až tři vrstvy stínu na sebe. Tvrdý stín s plnou černou barvou skoro vždy vypadá lacině.

Kolik stínů můžu na jeden prvek dát?

CSS počet vrstev neomezuje, stačí je oddělit čárkou. V praxi ale stačí dvě až čtyři. Víc vrstev už výkonu ani vzhledu nepomůže a jen zesložití kód.

Jaký je rozdíl mezi blur a spread?

Blur určuje, jak moc se okraj stínu rozpije do ztracena. Spread mění velikost stínu ještě předtím, než se rozostření použije. Kladný spread stín roztáhne, záporný ho zúží.