CSS-shadow: ako sa robí

Bez tmy nie je svetlo bez tieňa žiadna forma. Dokonca aj hlavný nástroj make-up pre ženy s názvom "tieň". Ak chcete priniesť krásu do svojich stránok, musíte umiestniť správny dôraz - pridať CSS-shadow, kde je to potrebné.

Materiál nižšie vám pomôže naučiť, ako nainštalovať roletu alebo blokovať obrázky pomocou CSS kódu.

CSS-shadow. syntax

V skutočnosti box-shadow, kde box - blok a tieň - to je samo o sebe tieň.

Kód napísaný v rovnátka:

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

Riadok nám hovorí, že jednotka je nastavená na normu s polomerom tieň pixelu. Dáta sú dešifrované takto:

• 11px - tieň posunuté vzhľadom k bloku na osi x (pozitívna hodnota (20 pixlov) sa posunie na pravú tieň, negatívne (-37px) - vľavo);
• 22px - s posuny tieňovej vzhľadom k bloku osi Y (kladná hodnota (5px) viesť k posunu v tieni dole, negatívny (-17px) - hore);
• 33px - tento parameter rozostřují, čím vyššie číslo, tým silnejší efekt;
• 44px - polomer tiene, a je priamo úmerný;
• # 333333 - farba, ktorá je maľovaný v tieni.

Posledné tri parametre sú voliteľné a môžu byť jednoducho vynechať v reťazci, tj {box-shadow: 10px 13px; } - .. Takáto linka nie je správne (farba tieňa je zhodná s farbou textu v bloku).

Tak, vytvárať tiene na stránkach vášho webu, nie je ťažké, ale mnoho krásne vyzerajúce efekty môžete vytvoriť! Urobte zo svojho dieťaťa jedinečná, neopakovateľná, pretože dizajn je dôležitý každý detail, každý detail. Tu, ako sa zdá, nič zvláštne, ale je to oveľa zaujímavejšie a atraktívnejšie.

Zoberme si niekoľko ilustratívnych príkladov, to vyzerá ako tieň CSS bloku v závislosti na kódovanie:

1. {Box-shadow: 25px 25px;} - CSS-shadow offset osiach 25 pixelov.
2. {Box-shadow: 25px 25px 10px;} - CSS-shadow offset osi 25 pixelov a rozmazanie okrajov 10 pixelov.
3. {Box-shadow: 25 pixelov 25 pixelov 10px 5px;} - CSS tieň odsadenie osiach 25 pixelov, rozostrenie hrán 10 pixelov a vopred stanovenom polomeru 5 pixelov
4. {Box-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS-shadow offset osiach 25 pixelov, rozostrenie hrán 10 pixelov, zadajte polomer 5 pixelov a farby.

vrhnutý tieň

Ak chcete vytvoriť ďalšie krásne, elegantné a originálne odtiene majú rôzne účinky. Môžete vykonať vnútorný tieň. Je to dosť kód zadať parametre "vložkou", ďalší popis parametrov pôjde ako zvyčajne:

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

Je možné, aby v rámci bloku niekoľko tiene s úplne odlišnými parametrami v kóde, ktoré (tiene), sú uvedené oddelených čiarkami:

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

tieňovej obrázky

Okrem jednotiek na mieste bude iste obrázky, fotografie, pozadia - všetky tieto prvky sa tiež pozrieť oveľa zaujímavejšie sa tiene. Môžete kresliť obrázky v pre-image editorov a vložiť ich na stránku už sa tiene. Ale za prvé, že nie je vždy možné z rôznych dôvodov, vrátane kvôli nedostatku vedomostí a zručností v práci s grafikou, po druhé, akákoľvek manipulácia obrazu sa pridá k nemu, "váhu", a taký obraz môže tiež spomaľovať načítanie stránky. V tomto prípade môžete urobiť CSS-tieňovej obrazmi.

Najjednoduchšie a syntakticky správne riešenie tohto problému - vytvorenie jednotky, bude pozadie v obrázku Kotormo. Ďalej musíte vykonať nevyhnutnú odtieň pre jednotky a sú zobrazené na pozadí obrázku:

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

V tomto príklade vytvoríme vnútorný tieň sa žiadny posun osí, s polomerom rozostrenie, definovanej farby, výšky a šírky bloku, a na pozadí (background) menovaný kuartinku. Ako výsledok, dostaneme obraz vnútorného tieňa.

Dohodli, že vytvoria tiene pomocou CSS kódu - je to celkom jednoduché, ale vzrušujúce, a čo je najdôležitejšie - užitočné cvičenie.