CSS-shadow: jak se dělá

Bez tmy není světlo bez stínu žádná forma. Dokonce i základní make-up nástroj pro ženy s názvem „stín“. Chcete-li přinést krásu do svých stránek, musíte umístit správný důraz - přidat CSS-shadow, kde je to potřeba.

Materiál níže vám pomůže naučit, jak nainstalovat roletu nebo blokovat obrázky pomocí CSS kódu.

CSS-shadow. syntax

Ve skutečnosti box-shadow, kde box - blok a stín - to je samo o sobě stín.

Kód napsaný ve složených závorkách:

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

Řádek nám říká, že jednotka je nastavena na normu o poloměru stín pixelu. Data jsou dešifrována takto:

• 11px - stín posunuty vzhledem k bloku na ose X (kladná hodnota (20 pixelů) se posune na pravou stín, negativní (-37px) - vlevo);
• 22px - s posuny stínové vzhledem k bloku osy Y (kladná hodnota (5px) vést k posunu ve stínu dolů, negativní (-17px) - nahoru);
• 33px - tento parametr rozostřují, čím vyšší číslo, tím silnější efekt;
• 44px - poloměr stínu, a je přímo úměrná;
• # 333333 - barva, která je malován ve stínu.

Poslední tři parametry jsou volitelné a mohou být jednoduše vynechat v řetězci, tj {box-shadow: 10px 13px; } - .. Taková linka není správné (barva stínu je shodná s barvou textu v bloku).

Tak, vytvářet stíny na stránkách vašeho webu, není obtížné, ale mnoho krásně vypadající efekty můžete vytvořit! Udělejte ze svého dítěte jedinečná, neopakovatelná, protože design je důležitý každý detail, každý detail. Zde, jak se zdá, nic zvláštního, ale je to mnohem zajímavější a atraktivnější.

Vezměme si několik ilustrativních příkladů, to vypadá jako stín CSS bloku v závislosti na kódování:

1. {Box-shadow: 25px 25px;} - CSS-shadow offset osách 25 pixelů.
2. {Box-shadow: 25px 25px 10px;} - CSS-shadow offset osy 25 pixelů a rozmazání hran 10 pixelů.
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 osách 25 pixelů, rozostření hran 10 pixelů, zadejte poloměr 5 pixelů a barvy.

vržený stín

Chcete-li vytvořit další krásné, elegantní a originální odstíny mají různé účinky. Můžete provést vnitřní stín. Je to dost kód zadat parametry „vložkou“, další popis parametrů půjde jako obvykle:

{Box-shadow: vložka 4px 2px 6px # 9e9e9e;}.

Je možné, aby v rámci bloku několik stíny s naprosto odlišnými parametry v kódu, které (stíny), jsou uvedeny oddělených čárkami:

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

shadow obrázky

Kromě jednotek na místě bude jistě obrázky, fotografie, pozadí - všechny tyto prvky se také podívat mnohem zajímavější se stíny. Můžete kreslit obrázky v pre-obrazových editorů a vložit je na straně už 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 udělat CSS-stínové obrazy.

Nejjednodušší a syntakticky správné řešení tohoto problému - vytvoření jednotky, bude pozadí v obrázku Kotormo. Dále musíte provést nezbytnou odstín pro jednotky a jsou zobrazeny na pozadí obrázku:

• .block1 {box-shadow: vložka 0 0 11px 9PX # 9e9e9e; šířka: 480px; výška: 360 pixelů; background: url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

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. Jako výsledek, dostaneme obraz vnitřního stínu.

Dohodly, že vytvoří stíny pomocí CSS kódu - je to docela jednoduché, ale vzrušující, a co je nejdůležitější - užitečné cvičení.