CSS-shadow: kako napraviti

Bez tame nema svjetla bez hlad ne forma. Čak je i osnovni alat za žene pod nazivom make-up "u sjeni". Ako želite da donijeti ljepotu na svoje stranice, potrebno je da postavite pravo naglasak - Dodaj CSS-shadow, gdje je to potrebno.

Materijal predstavljeni u nastavku će vam pomoći da naučite kako da instalirate hladu ili da blokira slika pomoću CSS-koda.

CSS-shadow. sintaksa

Zapravo box-shadow, gdje je kutija - blok i sjene - to je samo po sebi sjena.

Kod napisan u zagradi

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

Linija nam govori da je uređaj postavljen na Standard radijusa senka piksela. Podaci se dešifruje kako slijedi:

• 11px - shadow pomak u odnosu na blok na X osi (pozitivnu vrijednost (20px) će prebaciti na pravo sjena, negativna (-37px) - lijevo);
• 22px - shadow pomaci u odnosu na Y-osi bloka (pozitivnu vrijednost (5PX) dovesti do smjene u hladu niz negativnih (-17px) - do);
• 33px - ovo zamućenja parametar, što je veći broj, jači učinak;
• 44px - radijus senke, i direktno je proporcionalna;
• # 333333 - boja, koja je obojena u hladu.

Posljednje tri parametra su opcionalni i mogu jednostavno biti izostavljen u nizu, tj {box-shadow: 10px 13px; } - .. Takva linija nije neispravna (sjena boja je identičan na boju teksta u bloku).

Tako, stvarajući sjene na stranicama vaše stranice nije teško, ali mnogi lijepo efekte tražim možete kreirati! Učinite vaš dijete jedinstven, neponovljiv, jer je dizajn važan, svaki detalj, svaki detalj. Evo, čini se, ništa posebno, ali je mnogo više zanimljiv i atraktivan.

Razmotrimo neke ilustrativne primjere, izgleda kao sjena CSS-blok prema kodiranja:

1. {Box-shadow: 25px 25px;} - CSS-shadow pomak osi 25 piksela.
2. {Box-shadow: 25px 25px 10px;} - CSS-shadow pomak osi 25 piksela i zamagljivanje ivica 10 piksela.
3. {Box-shadow: 25px 25px 10px 5px;} - CSS-shadow pomak osi 25 piksela, zamućenje rubova 10 piksela i unapred radijus od 5 piksela
4. {Box-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS-shadow pomak osi 25 piksela, zamućenje rubova 10 piksela, odredite radijus od 5 piksela i boja.

senke

Da stvori lijepa, elegantna i originalne nijanse imaju različite efekte. Možete napraviti unutarnji sjena. Dovoljno je kod navesti parametre "umetak", dalje opis parametara će se, kao i obično:

{Box-shadow: umetak 4PX 2px 6PX # 9e9e9e;}.

Moguće je da se stavi pod blok nekoliko sjene s potpuno različitim parametrima u kodu, oni (senke) navedene su razdvojene zarezima:

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

shadow slike

Pored jedinice na sajtu će sigurno biti slike, fotografije, pozadina - Svi ovi elementi također izgledaju mnogo zanimljiviji s sjene. Možete crtati slike u urednicima unaprijed sliku i zalijepiti ih na stranici već sa sjene. Ali, prvo, to nije uvijek moguće zbog različitih razloga, uključujući i zbog nedostatka vještina u radu s grafikom, drugo, bilo manipulacije slike se dodaje da mu, "težinu", a takva slika može dobro usporiti stranica učita. U tom slučaju, možete napraviti CSS-shadow slika.

Najjednostavniji i sintaksički ispravan rješenje ovog problema - stvaranje jedinice, pozadine u svoju sliku će Kotormo. Zatim, napravite potrebne hlad za jedinicu i oni su prikazani na pozadini slike:

• .block1 {box-shadow: umetak 0 0 11px 9px # 9e9e9e; Širina: 480px; visina: 360px; background: url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

U ovom primjeru, mi stvaramo unutarnji sjena bez pomak osi, sa zamućenja radijus, definirane boje, visine i širine bloka, i pozadine (background) imenovan kuartinku. Kao rezultat toga, dobijamo sliku unutrašnjeg sjeni.

Slažem se da se stvori sjene pomoću CSS-kod - to je prilično jednostavan, ali uzbudljiv, i što je najvažnije - korisne vježbe.