CSS Shadow: jak kreslit

Bez tmy není světlo, bez stínu není forma. Dokonce i hlavní nástroj pro make-up pro ženy se nazývá "stín". Pokud chcete přinést krásu na stránky vašeho webu, je třeba zajistit správné akcenty - v případě potřeby přidejte stín CSS.

Níže uvedený materiál vám pomůže zjistit, jak nastavit stín pro blok nebo obrázek pomocí CSS.

CSS-stín. Syntaxe

Ve skutečnosti box-shadow, kde box je blok, a stín je stín sám.

Kód je v závorkách:

{box-shadow: 11px 22px 33px 44px # 333333-}.

Řetězec nám říká, že blok má standardní stín s poloměrem pixelů. Data jsou dešifrována následovně:

• 11px - Shadow posun vztažený k bloku podél osy X (pozitivní hodnota (20px) způsobí, že stín posune doprava, záporný (-37px) doleva);
• 22px - sStínování relativně k bloku podél osy Y (kladná hodnota (5 pixelů) způsobí, že stín bude posunut dole, záporný (-17px) - nahoru);
• 33px - to je parametr rozostření, čím větší je číslo, tím silnější je efekt;
• 44px - poloměr stínu je také přímo úměrný;
• # 333333 - barva, ve které je stín malován.

Poslední tři parametry jsou volitelné a nemusí být v řádku uvedeny, tj. {Box-shadow: 10px 13px-} - tento řádek není špatný (barva stínu bude shodná s barvou textu v bloku).

Takže vytváření stínu na stránkách vašeho webu není obtížné, ale kolik efektů na oko můžete vytvořit! Vaše dítě je jedinečné, jedinečné, protože každý malý detail, každý detail je v designu důležitý. Zde se zdá, že není nic zvláštního, ale je mnohem zajímavější a přitažlivější.

Podívejme se na některé příklady toho, jak vypadá CSS stín bloku, v závislosti na kódu:

1. {box-shadow: 25px 25px;} - CSS-shadow s posunutím 25 pixelů.
2. {box-shadow: 25px 25px 10px;} - CSS-shadow s 25-pixelovým posunem a 10-pixelovým rozostřením.
3. {Box-shadow: 25 pixelů 25 pixelů 10px 5px;} - CSS stín odsazení osách 25 pixelů, rozostření hran 10 pixelů a předem stanoveném poloměru 5 pixelů
4. {Box-shadow: 25px 25px 10px 5px # 9e9e9e-} - CSS-shadow offset osy 25 pixelů, rozostření hran 10 pixelů, určete poloměr 5 pixelů a barvy.

Stínové efekty

Chcete-li vytvořit krásnější, elegantní, původní stíny, máte různé efekty. Můžete vytvořit vnitřní stín. Pro to stačí specifikovat parametry "před vložením" před parametry, pak popis parametrů bude vypadat jako obvykle:

{box-shadow: vložte 4px 2px 6px # 9e9e9e-}.

Je možné umístit několik stínů pod blok s absolutně jinými parametry, v kódu jsou (stíny) uvedeny za čárkou:

{Box-shadow: -20px -10px 11px 15px # 800080, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50 pixelů 40px 5px 10px # ffa500}.

Stínové obrázky

Kromě bloků na místě budou jistě fotky, fotografie, pozadí - všechny tyto prvky vypadají mnohem zajímavěji se stíny. Předběžně můžete vytvářet snímky v grafických editorech a vkládat je na stránku se stíny. Ale za prvé, že není vždy možné z různých důvodů, včetně kvůli nedostatku znalostí a dovedností v práci s grafikou, zadruhé, jakákoliv manipulace obrazu se přidá k němu, „váhu“, a takový obraz může také zpomalovat načtení stránky. V tomto případě můžete vytvořit stínový obrázek CSS.

Nejjednodušším a nejvíce syntakticky správným řešením tohoto problému je vytvoření bloku, kterým je pozadí vašeho obrazu. Dále vytvoříte potřebné stíny pro blok a zobrazí se na pozadí obrázku:

• .blok1 {box-shadow: vložka 0 0 11px 9px # 9e9e9e- šířka: 480px; výška: 360px; pozadí: url (images / charlize_theron_2.jpg) 0 0 neopakovat-}

V tomto příkladu vytvoříme vnitřní stín se žádný posun os, s poloměrem rozostření, definované barvy, výšky a šířky bloku, a na pozadí (background) jmenován kuartinku. Výsledkem je snímek s vnitřním stínem.

Souhlasíte, vytvářet stíny pomocí kódu CSS je poměrně jednoduchý, zároveň fascinující a nejdůležitější - užitečná lekce.