CSS sjena: kako nacrtati

Bez tame, nema svjetla, nema oblika bez sjene. Čak i glavni šminka za žene naziva se "sjena". Ako želite uložiti ljepotu na stranice vaše web stranice, trebate organizirati ispravne akcente - dodajte CSS-sjenu gdje je to potrebno.

Donji materijal će vam pomoći da naučite postaviti sjenu blok ili sliku pomoću CSS-a.

CSS-sjena. sintaksa

Zapravo box-shadow, gdje je kutija blok, a sjena je sama sjena.

Kôd je napisan u kovčeg zagrada:

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

Niz nam govori da bloku daje standardnu ​​sjenu s radijusom piksela. Podaci se dešifriraju kako slijedi:

• 11px - Shadow shift u odnosu na blok uz X os (pozitivna vrijednost (20px) uzrokovat će pomicanje sjene na desno, negativno (-37px) lijevo);
• 22px - sSjenčanje u odnosu na blok uzduž Y os (pozitivna vrijednost (5px) uzrokuje da se sjena pomakne prema dolje, negativno (-17px) - gore);
• 33px - ovo je parametar zamućenja, veći broj, jači učinak;
• 44px - radijus sjene je također izravno proporcionalan;
• # 333333 - boja u kojoj je oslikana sjena.

Posljednja tri parametra su opcionalna i jednostavno se ne mogu označiti u retku, tj. {Box-shadow: 10px 13px-} - ova linija nije pogrešna (boja sjene bit će identična bojama teksta u bloku).

Dakle, stvaranje sjene na stranicama vaše web stranice nije teško, ali koliko očnih učinaka možete stvoriti! Učinite vašim djetetom jedinstvenijim, jedinstvenim, jer svaki mali detalj, svaki detalj je važan u dizajnu. Ovdje, čini se, ništa posebno, ali je mnogo zanimljivije i atraktivnije.

Pogledajmo neke primjere kako izgleda CSS-sjena blokova, ovisno o kodu:

1. {box-shadow: 25px 25px;} - CSS-sjena s pomakom od 25 piksela.
2. {box-shadow: 25px 25px 10px;} - CSS-sjena s pomakom od 25 piksela i smeđim od 10 piksela.
3. {Box-sjene: 25 piksela 25 piksela 10px 5px;} - CSS-sjena pomak osima 25 piksela, zamućenja rubovi 10 piksela i unaprijed određenog polumjera 5 piksela
4. {Box-sjene: 25 piksela 25 piksela 10px 5px # 9e9e9e-} - CSS-sjena pomak osi 25 piksela, zamućenja rubovi 10 piksela, odrediti promjer od 5 piksela i boje.

Efekti sjena

Da biste stvorili više lijepih, elegantnih, originalnih sjena, postoje različite efekte. Možete napraviti unutarnju sjenu. Za to je dovoljno odrediti "umetnuti" prije parametara prije parametara, a zatim opis parametara će ići kao i obično:

{box-shadow: umetnite 4px 2px 6px # 9e9e9e-}.

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

{Box-sjene: -20px -10px 11px 15px # 800,08 tisuća, -50px -40px 5px 10px # daa520, 20px 10px 11px 15px # 0700f9, 50 piksela 40px 5px 10px # ffa500}.

Sjene slike

Osim blokova na mjestu zasigurno će biti slika, fotografija, pozadina - svi ti elementi izgledaju zanimljivo sjenama. Možete nacrtati slike u pre-slike urednici i zalijepiti ih na stranici već sjena. Ali, kao prvo, to nije uvijek moguće zbog različitih razloga, uključujući i zbog nedostatka vještina u radu s grafikom, drugo, bilo manipulacija slike je dodao da mu „težinu”, a takva slika može dobro usporiti stranica učita. U tom slučaju možete napraviti CSS-sjenu.

Najjednostavniji i naj sintaktički ispravniji rješenje ovog problema je stvoriti blok, pozadinu u kojoj je vaša slika. Zatim izvršite potrebne sjene za blok i prikazuju se na pozadini slike:

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

U ovom primjeru, mi stvaramo unutarnji sjena bez ikakvog pomaka osi, s zamućenja radijus, definirana boje, visine i širine bloka, a pozadina (background) imenovan kuartinku. Kao rezultat toga, imamo sliku s unutarnjom sjenom.

Slažem se, stvaranje sjene uz pomoć CSS kodova je vrlo jednostavna, istodobno fascinantna i najvažnije - korisna lekcija.