CSS-shadow: Hvordan lage

Uten mørket er det ingen lys uten skygge ingen form. Selv grunnleggende make-up verktøy for kvinner kalt "skyggen". Hvis du ønsker å bringe skjønnhet til sidene, må du plassere riktig vekt - Add CSS-skygge der det trengs.

Materialet som presenteres nedenfor vil hjelpe deg å lære hvordan du installerer skygge eller å blokkere bilder ved hjelp av CSS-kode.

CSS-skygge. syntaks

Egentlig box-shadow, der boksen - en blokk og skygge - dette er i seg selv en skygge.

Kode skrevet i klammeparenteser:

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

Linjen forteller oss at enheten er satt til Standard med en skygge pixel radius. Dataene blir dekryptert som følger:

• 11px - skygge forskjøvet i forhold til blokken på x-aksen (positiv verdi (20 piksler) vil skifte til høyre skygge, negativ (-37px) - til venstre);
• 22 pikslene - skygge forskyvninger med hensyn på Y-aksen av blokken (positiv verdi (5 px) føre til en forskyvning av den skygge ned negativ (-17px) - up);
• 33px - Denne parameteren uskarphet, jo høyere tall, desto større er effekten;
• 44px - radius av skyggene, og er direkte proporsjonal;
• # 333333 - fargen, som er malt i skyggen.

De tre siste parametrene er valgfrie og kan rett og slett utelates i strengen, det vil si {box-shadow: 10px 13 piksler; } - .. En slik linje ikke er feilaktig (skygge farge er identisk med fargen på teksten i blokken).

Dermed skaper skygger på sidene på nettstedet ditt er ikke et problem, men mange fine leter effekter du kan lage! Gjør barnet ditt en unik, uforlignelige, fordi utformingen er viktig, hver eneste detalj, hver minste detalj. Her virker det, ikke noe spesielt, men det er mye mer interessant og attraktivt.

Vurdere noen illustrerende eksempler, det ser ut som en skygge CSS-blokken i henhold til koding:

1. {Boks-skygge: 25px 25px;} - CSS-skyggeforskyvning akser 25 piksler.
2. {Box-shadow: 25px 25px 10px;} - CSS-shadow offset akser 25 piksler og uskarphet kanter 10 piksler.
3. {Boks-skygge: 25px 25px 10px 5 px;} - CSS-skyggeforskyvning aksen av 25 piksler uskarpe kanter 10 piksler, og en på forhånd bestemt radius på 5 piksler
4. {Box-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS-shadow offset akser 25 piksler, blur kanter 10 piksler, angi en radius på 5 piksler og farge.

drop shadow

For å skape en mer vakker, elegant og original nyanser har ulike effekter. Du kan gjøre den indre skygge. Det er nok til kode for å angi parameterne for "innfelt", nærmere beskrivelse av parametrene vil gå som vanlig:

{Boks-skygge: innfelt 4px 2 piksler 6 piksler # 9e9e9e;}.

Det er mulig å sette under blokken et par skygger med helt forskjellige parametere i koden, er de (skyggene) oppført separert med komma:

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

skyggebilder

I tillegg til enhetene på nettstedet vil sikkert være bilder, bilder, bakgrunner - alle disse elementene også ser mye mer interessant med skygger. Du kan tegne bilder i pre-bilderedigeringsprogrammer og lime dem på en side som allerede er med skygger. Men for det første er det ikke alltid mulig for ulike grunner, blant annet på grunn av manglende ferdigheter i å arbeide med grafikk, for det andre, noen manipulering av bildet er lagt til ham: "vekt", og et slikt bilde kan godt tregere siden lastes. I dette tilfellet, kan du lage en CSS-skyggebilder.

Den mest enkle og syntaktisk riktig løsning på dette problemet - etableringen av enheten, vil bakgrunnen i bildet Kotormo. Deretter gjør du de nødvendige skygge for enheten og de vises på background-image:

• .block1 {box-shadow: innfelt 0 0 11px 9px # 9e9e9e; bredde: 480px; høyde: 360px; bakgrunn: url (bilder / charlize_theron_2.jpg) 0 0 no-repeat;}

I dette eksempel opprettet en indre skygge med ingen forskyvning av aksene, med sløringsradius, definert farge, høyde og bredde av blokken, og bakgrunnen (bakgrunn) nedsatte kuartinku. Som et resultat, får vi et bilde av den indre skygge.

Enige om å lage skygger ved hjelp av CSS-kode - det er ganske enkel, men spennende, og aller viktigst - nyttig øvelse.