CSS šešėlis: kaip piešti

Be tamsos nėra šviesos, nėra formos be šešėlio. Net pagrindinis makiažo įrankis moterims vadinamas "šešėliu". Jei norite savo svetainės puslapius atkurti grožio, turite surengti tinkamus akcentus - prireikus pridėkite CSS shadow.

Toliau pateikta medžiaga padės sužinoti, kaip nustatyti šešėlį blokui ar paveikslėliui naudojant CSS.

CSS-šešėlis. Sintaksė

Iš tikrųjų dėžutė-šešėlis, kur dėžutė yra blokas, o šešėlis yra pats šešėlis.

Kodas parašytas garbanotose skliaustuose:

{dėžutė-šešėlis: 11 pikselių 22 pikselių 33 pikselių 44 pikselių # 333333;}.

Styga mums sako, kad blokui suteikiamas standartinis šešėlis su pikselio spinduliu. Duomenys yra iššifruoti taip:

11px - Šešėlių poslinkis nuo bloko X ašyje (teigiama vertė (20 pikselių) sukels šešėlį į dešinę, neigiamą (-37 piks.) į kairę);
22 piks. - sUždegimas, susijęs su bloku išilgai Y ašies (teigiama vertė (5 piksel.), Užtruks šešėlis, neigiamas (-17 piks.) - aukštyn);
33px - tai yra užblokavimo parametras, tuo didesnis skaičius, tuo stipresnis poveikis;
44 piks - šešėlio spindulys taip pat yra tiesiogiai proporcingas;
# 333333 - spalva, kurioje šešėlis yra nudažytas.

Paskutiniai trys parametrai yra neprivalomi ir gali būti tiesiog nenurodyti eilutėje, t. Y. {Box-shadow: 10 ir 13 taškų;} - tokia eilutė nėra klaidinga (šešėlio spalva bus identiška teksto spalvai bloke).

Taigi, sukurkite šešėlį savo puslapiuoseSvetainė nėra sudėtinga, bet kiek gražaus efekto jūs galite sukurti! Padarykite savo idėją labiau unikali, unikali, nes pagal kiekvieną detalę kiekviena detalė yra svarbi. Čia atrodo, nieko ypatingo, ir su juo daug įdomiau ir patraukliau.

Pažvelkime į keletą iliustruotų pavyzdžių, kaip CSS šešėlis bloko atrodo, priklausomai nuo to, kaip parašytas kodas:

{box-shadow: 25px 25px;} - CSS šešėlis su poslinkiu ašimis 25 pikselių.
{box-shadow: 25px 25px 10px;} - CSS-šešėlis su poslinkiu išilgai ašių 25 pikseliais ir nulaužant kraštus 10 pikselių.
{box-shadow: 25px 25px 10px 5px;} - CSS-šešėlis su poslinkiu išilgai ašių 25 taškais, nulaužant kraštus 10 pikselių ir 5 pikselių spinduliu
{box-shadow: 25px 25px 10px 5px # 9e9e9e;} - CSS šešėlis su poslinkiu išilgai ašių 25 pikseliais, nulūžus kraštus 10 pikselių, atsižvelgiant į 5 pikselių ir spalvos spindulį.

Šešėlis poveikis

Norėdami sukurti daugiau gražių, grakščių,Originalūs šešėliai turi įvairius efektus. Galite sukurti vidinį šešėlį. Šiuo tikslu pakanka nurodyti "įterpimą" kode prieš parametrus, tada parametrų aprašymas vyks kaip įprasta:

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

Į bloką galima įdėti kelis šešėliai su visiškai skirtingais parametrais, kodą jie (šešėliai) yra išvardyti atskirti kableliais:

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

Shadow Pictures

Be to, svetainės puslapių blokai tikrai busPaveikslėliai, nuotraukos, fonai - visi šie elementai taip pat atrodo daug įdomesni su šešėliais. Galite piešti paveikslėlius iš anksto grafiniuose redaktoriuose ir įklijuoti juos į puslapį jau su šešėliais. Tačiau, pirma, tai ne visada įmanoma dėl įvairių priežasčių, be kita ko, dėl to, kad trūksta įgūdžių dirbant su grafikais, antra, bet kokia manipuliacija vaizdais daro "svorį", ir tokia nuotrauka gali sulėtinti puslapių įkėlimą. Tokiu atveju galite sukurti CSS šešėlinį vaizdą.

Paprasčiausias ir sintaksiškai teisingas šios problemos sprendimas yra bloko kūrimas, kuriame bus jūsų nuotrauka. Tada jūs sukursite būtinus bloko šešėliai ir jie bus rodomi fono paveikslėlyje:

.block1 {box-shadow: inset 0 0 11px 9px # 9e9e9e; plotis: 480px; aukštis: 360 px; background: url (images / charlize_theron_2.jpg) 0 0 no-repeat;}

Šiame pavyzdyje mes sukūrėme vidinį šešėlį beposlinkiai išilgai ašių, su neryškumu ir spinduliu, nustatė bloko spalvą, aukštį ir plotį, o fone buvo priskirta kvartika. Todėl mes turime nuotrauką su vidiniu šešėliu.

Jūs turite sutikti, kad šešėlių kūrimas naudojant CSS kodą yra gana paprastas, kartu patraukliai ir, svarbiausia, naudinga veikla.