Galite pridėti šešėlį prie elementų ir pakeisti jo išvaizdą naudodami CSS ypatybę box-shadow. Šis stilius leidžia realizuoti įdomius efektus, pavyzdžiui, bloko garsumą ir trimatį. Nuosavybę palaiko visos šiuolaikinės naršyklės. Išimtys yra IE8 ir Opera Mini.

langelio šešėlio savybė: sintaksė

Šis stilius parašytas taip:

Dėžutė-šešėlis: inset 4px 4px 8px 5px #333333;

Apsvarstykite eilės tvarka, už ką atsakingas kiekvienas parametras (iš kairės į dešinę):

• raktinis žodis inset: parametras, kurio nereikia nurodyti; piešia šešėlį viduje elementas.
• X poslinkis: nurodo šešėlio horizontalaus poslinkio laipsnį elemento atžvilgiu. Teigiama reikšmė reiškia poslinkį į dešinę, neigiama – į kairę. 0 reikšmė reiškia, kad šešėlis nėra poslinkis.
• Y Shift: nurodo šešėlio vertikalaus poslinkio dydį. Teigiama reikšmė reiškia poslinkį žemyn, neigiama – poslinkį aukštyn. 0 reikšmė yra šešėlis be poslinkio.
• Suliejimo spindulys: Tai yra šešėlių suliejimo laipsnis. Kuo didesnė vertė, tuo labiau neryškus šešėlis. Jei parametras nenurodytas, numatytoji reikšmė yra 0. Tokiu atveju šešėlis bus visiškai skaidrus.
• Pratęsimas: pasirenkamas parametras, atsakingas už šešėlio ištempimą išilgai abiejų ašių; kuo didesnė vertė, tuo didesnis tempimas. Plėtinys veikia tik tuo atveju, jei yra ankstesnis parametras. Numatytoji reikšmė yra 0.
• Šešėlių spalva: su šiuo parametru viskas aišku – jis nustato elemento šešėlio spalvą. Numatytoji spalva yra juoda.

Pastaba.„Android“ naršyklėms ir senesnėms „iPhone Safari“ versijoms reikalingas priešdėlis -webkit-, kad CSS ypatybė „box-shadow“ veiktų tinkamai.

Ši savybė gali užimti kelias verčių grupes (sudaryti kelis šešėlius vienu metu). Norėdami tai padaryti, turėsite išvardyti šias parametrų grupes, atskirtas kableliais. Pavyzdžiui:

Dėžutė-šešėlis: 15px 15px 20px #8b0163, įdėtas 15px 15px 20px #630046;

Dėžutės šešėlių pavyzdžiai

Kad padėtume geriau suprasti CSS dėžutės šešėlio savybės galią ir grožį, parodysime keletą pavyzdžių, kuriuos galite saugiai pritaikyti praktikoje. Ši savybė gali labai pakeisti įprastą bloką!

Šviesus šešėlis

Box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Popieriaus efektas

Lauko šešėlis: 0 1 piks. 4 piks. rgba(0, 0, 0, .3), -23 piks. 0 20 piks. -23 piks. rgba (0, 0, 0, .6), 23 piks. 0 20 piks. -23 piks. rgba (0, 0, 0, .6), įterpimas 0 0 40 piks. rgba(0, 0, 0, .1);

Keli sluoksniai

Dėžutės šešėlis: 6 piks. 6 piks. #ccc, 12 piks. 12 piks. #a3a3a3;

Trigubas rėmelis

Lauko šešėlis: 0 0 0 7 piks. rgb(118, 46, 177), 0 0 0 14 piks. rgba(118, 46, 177, 0,6), 0 0 0 21 piks. rgba(118, 46, 177, 0.4);

Kampai

Dėžutės šešėlis: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

Kaip matote, dėžutės šešėlis palieka daug erdvės vaizduotei. Galite transformuoti blokus taip, kaip jums patinka - svarbiausia turėti saiko jausmą! 😉

Kitame skyriuje išnagrinėsite pločio ir aukščio ypatybes, kurios lemia elementų dydį.

Įrašymo tvarka yra iš esmės svarbi. Pirmoji vertė visada yra poslinkis išilgai X ašies, antroji - išilgai Y ašies.

Jei poslinkis išilgai vienos iš ašių nereikalingas, nustatykite jį į nulį:

Class(box-shadow: 0 8px;) – perkelkite šešėlį tik išilgai Y ašies

Rezultatas

Class (box-shadow: 8px 8px;) – poslinkis išilgai abiejų ašių

Rezultatas

Neigiama langelio šešėlių ašių reikšmė

Šešėlis judės priešinga kryptimi:

Klasė (dėžutės šešėlis: -8px 8px;) – perkelkite šešėlį su neigiama reikšme išilgai X ašies

Rezultatas

Šešėlių suliejimo spindulys

Trečiasis nuosavybės parametras dėžutė-šešėlis. Jei nenurodyta, reikšmė yra 0, o šešėlio dydis yra lygus elemento, kuriam jis taikomas, dydžiui.

Klasė (dėžutės šešėlis: 0 48 piks. 0;) – šešėlis dubliuoja elemento, kuriam jis taikomas, matmenis

Rezultatas

Kai reikšmė didesnė už nulį, kraštai praranda ryškumą, šešėlis tampa didesnis ir vizualiai šviesesnis. Suliejimas taikomas iš visų pusių:

Klasė (dėžutės šešėlis: 0 0 8 piks.;) – nėra poslinkio, tik suliejimas

Rezultatas

Klasė (dėžutės šešėlis: 0 8 piks. 8 piks.;) – Y ašies poslinkis ir suliejimas

Rezultatas

Neigiama reikšmė laikoma klaida ir šešėlis iš viso nebus rodomas.

Šešėlio tempimo spindulys

Ketvirtasis nuosavybės parametras dėžutė-šešėlis. Keičia šešėlio dydį elemento atžvilgiu. Tempiasi visomis kryptimis:

Klasė (dėžutės šešėlis: 0 0 0 8 piks.;) – nėra poslinkio ar suliejimo, tik tempimas

Rezultatas

Šiuo atveju šešėlis yra 16 pikselių didesnis už elementą pločio ir aukščio atžvilgiu: 8 pikseliai kairėje + 8 pikseliai dešinėje ir 8 pikseliai viršuje + 8 pikseliai apačioje.

Neigiama šešėlio tempimo vertė CSS

Šešėlis neišsitempia, o susiaurėja iš visų pusių nurodyta verte:

Class(box-shadow: 0 16px 0 -8px;) – sumažinti šešėlį su neigiama reikšme

Rezultatas

Šešėlių spalva

Pagal numatytuosius nustatymus šešėlio spalva dubliuoja šrifto spalvą: kaip ir anksčiau pateiktuose pavyzdžiuose.

Šešėlio spalva nurodoma bet kuriuo turimu CSS formatu:

• #ff0009
• rgb(255, 0, 9)
• hsl(358, 100%, 50%);

Suteikite elementui mėlyną šešėlį:

Klasė (dėžutės šešėlis: 0 8px #3a8fe7;)

Rezultatas

Vidinis šešėlis

Parametras intarpas bloko viduje rodomas šešėlis.

Skirtingai nuo aukščiau išvardytų parinkčių, nėra griežtos rašymo tvarkos. Abi parinktys duos tą patį rezultatą:

Dėžutė-šešėlis: 0 8px #3a8fe7 intarpas; langelis-šešėlis: inset 0 8px #3a8fe7;

Rezultatas

Antrasis variantas lengviau suprantamas skaitant kodą.

Keli šešėliai

Keli šešėliai nurodomi atskirti kableliais. Rodyti tvarką iš viršaus į apačią:

Klasė (dėžutės šešėlis: 0 8px #3a8fe7, 0 16px #3ae7af;)

Rezultatas

Jei sukeisite vietomis, mėlynas šešėlis nebus matomas:

Klasė (dėžutės šešėlis: 0 16 piks. #3ae7af, 0 8px #3a8fe7; )

Rezultatas

Vidinis ir išorinis šešėlis nustatomi tuo pačiu metu:

Klasė (dėžutės šešėlis: 0 16 piks. #3ae7af, įdėtas 0 8px #3a8fe7; )

Rezultatas

Apvalus šešėlis

Jei elementui suteikiama savybė pasienio spindulys, šešėlis turės užapvalintus kampus.

Klasė (dėžutės šešėlis: 0 16 pikselių #3a8fe7; kraštinės spindulys: 8 pikseliai; )

Rezultatas

Nustatydami šešėlio tempimą padidiname jo apvalinimą. Pavyzdžiui, kraštinės spindulys yra 8 pikseliai, o šešėlio ruožas yra 4.

8+4=12px yra šešėlio apvalinimo spindulys.

Klasė (dėžutės šešėlis: 0 16 piks. 0 4 piks. #3a8fe7; kraštinės spindulys: 8 piks.; )

Rezultatas

Tas pats principas taikomas ir šešėlio mažinimui, kai reikšmė yra neigiama.

8+(-4)=4px – gauname dvigubai mažesnį šešėlių apvalinimą.

Jei šešėlio suspaudimas yra didesnis nei kraštinės spindulys, gausime šešėlį su stačiais kampais. Pavyzdžiui, suspaudimas yra 16 pikselių.

8+(-16)=(-8), bet filė negali turėti neigiamos reikšmės ir bus taikomas nulis.

Klasė (dėžutės šešėlis: 0 24 piks. 0 -16 piks. #3a8fe7; kraštinės spindulys: 8 piks.; )

Rezultatas

CSS nuosavybė dėžutė-šešėlis Palaikomos visose populiariose naršyklėse, išskyrus „Opera Mini“.

Įprastus šešėlius lengva įdiegti naudojant langelį šešėlį arba teksto šešėlį. Bet ką daryti, jei reikia sukurti vidinius šešėlius? Šiame straipsnyje aprašoma, kaip sukurti šiuos šešėlius naudojant tik kelias kodo eilutes.

Sintaksė

dėžutė-šešėlis

Horizontalus poslinkis Ir vertikalus poslinkis- atitinkamai horizontalus ir vertikalus poslinkis. Šios reikšmės rodo, kuria kryptimi objektas mess šešėlį:

Suliejimo spindulys Ir plitimo spindulysšiek tiek sudėtingesnis. Koks skirtumas? Pažvelkime į pavyzdį su dviem elementais, kur reikšmės suliejimo spindulys skiriasi:

Šešėlio kraštas tiesiog neryškus. Su skirtingomis vertybėmis plitimo spindulys matome štai ką:

Tokiu atveju matome, kad šešėlis išsibarstę dideliame plote. Jei nenurodote reikšmės suliejimo spindulys Ir plitimo spindulys, tada jie bus lygūs 0.

tekstas-šešėlis

Reikšmės panašios, bet ne sklaida-šešėlis. Naudojimo pavyzdys:

Įdėta į dėžutės šešėlį

Kai suprantate pagrindinę langelio šešėlių sintaksę, labai lengva suprasti, kaip įdiegti vidinius šešėlius. Vertės vis dar tos pačios, galite pridėti spalvą (RGB šešioliktainiu):

Spalva yra RGB formato, alfa reikšmė yra atsakinga už šešėlio skaidrumą:

Vaizdai su šešėliais

Logiška manyti, kad galite pridėti tokį šešėlį:

Img (box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);)

Bet šešėlio nesimato:

Yra keletas šios problemos sprendimo būdų, kurių kiekvienas turi savo privalumų ir trūkumų. Pažvelkime į du iš jų. Pirmasis yra apvynioti vaizdą įprastu div:

Div (aukštis: 200 piks.; plotis: 400 tšk.; langelio šešėlis: įdėtas 0 piks. 0 piks. 10 piks. rgba(0,0,0,0,9); ) img ( aukštis: 200 piks.; plotis: 400 piks.; padėtis: santykinis; z indeksas: -2 ;)

Viskas veikia, bet turime pridėti šiek tiek papildomo HTML ir CSS žymėjimo. Antrasis būdas yra nustatyti vaizdą kaip norimo bloko foną:

Div (aukštis: 200 pikselių; plotis: 400 pikselių; fonas: url (http://lorempixum.com/400/200/transport/2); laukelis šešėlis: įterptas 0px 0px 10px rgba(0,0,0,0,9); )

Štai kas gali atsitikti naudojant vidinius šešėlius:

Įterptas į teksto šešėlį

Norėdami išspręsti, pirmiausia pritaikykite antraštę h1 Nustatykite tamsų foną ir šviesų šešėlį:

H1 (fono spalva: #565656; spalva: skaidri; teksto šešėlis: 0px 2px 3px rgba(255,255,255,0,5);)

Štai kas nutinka:

Pridedamas slaptas ingredientas fono klipas kuris nupjauna viską, kas yra už teksto ribų (tamsiame fone):

H1 ( fono spalva: #565656; spalva: skaidri ;)

Išėjo beveik būtent tai, ko mums reikėjo. Dabar mes tiesiog šiek tiek patamsiname tekstą (alfa), o rezultatas yra:

Atsiradus standartui CSS 3 pristatė „box-shadow“ savybę, kuri tapo plačiai naudojama žiniatinklio kūrėjų tarpe, nes leidžia lengvai pridėti vieną ar daugiau šešėlių prie elemento dėžutės, kad būtų suteiktas norimas vizualinis efektas.

Ankstesniame straipsnyje apžvelgėme kraštinės spindulio ypatybę; naudodami ją galite gauti šešėlį su užapvalintais kampais. Pagal analogiją su teksto šešėliu (teksto šešėlis) galite sukurti kelis šešėlius, jie taikomi pagal z ašis iš priekio į nugarą (su pirmuoju duotu šešėliu viršuje).

Pažvelkime atidžiau į šios modernios nuosavybės sintaksę:

Iš eilės panagrinėkime galimas šio turto vertes:

Pagrindiniai dalykai, kuriuos turite suprasti, kad sukurtumėte elementų šešėlius, yra šie:

Norėčiau atkreipti jūsų dėmesį į tai, kad „box-shadow“ ypatybę šiuo metu palaiko visos šiuolaikinės naršyklės:

Jei norite išplėsti kai kurių naršyklių, įskaitant mobiliuosius, palaikymą iOS 3.2–4.3 Ir Android 2.1–3, tuomet rekomenduojama naudoti gamintojo priešdėlius ir naudoti tokią sintaksę (straipsnio pavyzdžiuose sintaksė bus naudojama tik šiuolaikinėms naršyklėms):

Pereikime prie praktikos ir pradėkime nuo paprasto pavyzdžio, kuriame prie elementų pridedame vieną šešėlį:

Mūsų pavyzdžio rezultatas:

Naudojant kelis šešėlius

Šiame pavyzdyje siūlau apsvarstyti įdomų spalvų maišymo efektą, kurį galima pasiekti naudojant kelis šešėlius:

• Du fiksuoto pločio ir aukščio blokai (15em ir 10em), iš visų pusių pridėtas paminkštinimas (2em) ir nustatykite blokelius, kad būtų galima juos išdėstyti.
• Dėl Pirmas blokas su klase .testas nurodėme keturišešėliai su skirtingomis horizontaliomis ir vertikaliomis šešėlių reikšmėmis, kad elementas turėtų skirtingus šešėlius iš visų pusių. Visų šešėlių suliejimo spindulys buvo nustatytas į tą patį. Kiekvieno šešėlio spalva yra skirtinga ir nurodoma naudojant iš anksto nustatytas spalvas.
• Dėl antra blokas su klase .test2 nurodėme keturišešėliai su skirtingomis horizontalių ir vertikalių šešėlių reikšmėmis. Visų šešėlių suliejimo spindulys buvo nustatytas į tą patį, o šešėlio ruožas – neigiamas, todėl sumažėjo pats šešėlis. Kiekvieno šešėlio spalva yra skirtinga ir nurodoma naudojant RGBA sistemą.

Mūsų pavyzdžio rezultatas:

Šešėlių naudojimas vaizdams

Paskutinis šio straipsnio pavyzdys bus skirtas šešėlių naudojimui vaizdams. Iš karto norėčiau atkreipti jūsų dėmesį į tai, kad galite tiesiogiai nurodyti HTML elemento šešėlį Tai neveiks, bet turime galimybę nurodyti vaizdą kaip mus dominančio elemento foną, o tada priskirti šiam elementui reikalingą šešėlį.

Išsamiai apžvelgsime darbą su fono paveikslėliais vadovėlio straipsnyje „“, o dabar, norėdami užbaigti šešėlių naudojimo tyrimą, paliesime jį paviršutiniškai ir naudosime vaizdą kaip elemento foną toliau. pavyzdys:

• Du fiksuoto pločio ir aukščio blokai (237 pikseliai ir 232 pikseliai), visoms kraštinėms buvo pridėtos paraštės (2 em) ir blokai turi būti blokuojami, kad būtų galima juos sustatyti. Bloko dydį nustatėme 237 x 232 pikselius pagal vaizdo dydį, kad šiame mokymo etape nereikėtų keisti vaizdo mastelio, kad jis atitiktų elementą ir paveiktų tas CSS savybes, kurias planuojama ištirti vėliau ( vadovėlio straipsnyje "").
• Dėl Pirmas blokas su klase .testas Nurodėme nulinę horizontalaus ir vertikalaus šešėlio reikšmę, tačiau kartu nurodėme 50 pikselių suliejimo spindulį ir išplėtėme jį nustatydami 10 pikselių ištempimo spindulį. Šešėlio spalva buvo nurodyta iš anksto nustatyta spalva (violetinė). Be to, deklaracijoje nurodėme įterptinį raktinį žodį, dėl kurio elemento viduje patenka šešėlis. Kitaip tariant, sukūrėme vidinį elemento šešėlį.
• Dėl antra blokas su klase .test2 Nurodėme nulinę horizontalaus ir vertikalaus šešėlio reikšmę, tačiau kartu nurodėme 50 pikselių suliejimo spindulį ir išplėtėme jį nustatydami 10 pikselių ištempimo spindulį. Šešėlio spalva nurodoma RGBA režimu.

Mūsų pavyzdžio rezultatas:

Ryžiai. 98 Šešėlių naudojimo vaizdams CSS (dėžutės šešėlio savybė) pavyzdys

Klausimai ir užduotys šia tema

Prieš pereidami prie kitos temos, atlikite praktikos užduotį:

Jei kyla sunkumų atliekant praktikos užduotį, visada galite atidaryti pavyzdį atskirame lange ir apžiūrėti puslapį, kad suprastumėte, koks CSS kodas buvo naudojamas.

2016-2020 Denisas Bolšakovas, komentarus ir pasiūlymus svetainėje galite siųsti adresu [email protected]

Paaiškinimai:

1. , - CSS kalbos ypatybės, naudojamos šešėliams kurti.
2. , , — šešėlinių savybių parametrai.
3. , , , — CSS savybės, atsakingos už elementų dydžio ir vietos keitimą.
4. — žyma, atsakinga už nuorodų kūrimą.
5. Selektoriai yra tam tikros nuorodos, kurių pagalba CSS nustato, kurie elementai turi taikyti tam tikrus stilius.
6. Užvedimas yra būsenos parinkiklis.
7. — animacinio objekto pasikeitimo savybė.

Šešėliai dažnai naudojami trimačiui efektui pasiekti. Jie leidžia tekstams ir blokams suteikti unikalų stilių, o kartu su specialiais šriftais galite gauti puikų efektą.

CSS suteikia tiek daug erdvės vaizduotei ir eksperimentams, kad prireiks metų, kol juos išbandysite.

Šiame straipsnyje mes išsamiai aptarsime šešėlių kūrimą CSS. Be įprastų išorinių šešėlių, parodysime, kaip sukurti vidinius ir būsenos šešėlius.

CSS – dėžutės šešėlis. dėžutė-šešėlinė nuosavybė

html(fonas: #fff; ) body(plotis: 80%; paraštė: 0 automatinis; fono spalva: rgba(150,60,60,0,54) langelio šešėlis: -1px 5px 5px 5px rgba(77,63,63) ,0,88) )

Įrankis leidžia sukurti vieną ar daugiau šešėlių aplink bloką bet kokia spalva.

Iš esmės, kas yra šešėlis? Tai tiksli elemento srities kopija, kuri turi konkrečią spalvą ir vietą. Šiuos parametrus galima nustatyti naudojant box-shadow ypatybę.

Šešėlių savybės naudojamos tokia tvarka:

1. Perkelkite horizontaliai.
2. Perkelkite vertikaliai.
3. Neaiškumo lygis.
4. Tempimas.
5. Šešėlių spalva.

Tokia tvarka turėtų būti nurodyti šešėlio parametrai. Svarbiausia nesupainioti reikšmės, nes pirmosios 4 nustatomos taip pat, naudojant skaitines reikšmes - , , ir taip toliau.

Pirmasis parametras, kuris vadinamas — perkelia šešėlį horizontaliai bloko atžvilgiu. Priima bet kokias vertybes, įskaitant neigiamas.

Neigiamos vertės perkelia šešėlį į kairę, o teigiamos vertės – į dešinę. Parametro reikšmė gali būti lygi 0, kai suliejami šešėliai išilgai vertikalios ašies.

Toliau eilėje yra turtas . Atsakingas už šešėlio perkėlimą vertikaliai. Jis taip pat priima bet kokias vertybes - teigiamas ir neigiamas. Neigiamos vertės perkelia šešėlį aukštyn, o teigiamos – žemyn.

Šį parametrą galima nustatyti į 0. Paprastai naudojamas horizontaliam šešėlių suliejimui.

Dėmesio! Rekomenduojame reikšmę nurodyti pikseliais. Galite naudoti kitas vertes - , , % ir kt., tačiau tai nerekomenduojama. Visos šios vertės yra gana didelės šešėliams kurti. Nurodydami juos galite persistengti su dydžiais.

3 vertė - arba sulieti. Šios reikšmės įvesti nebūtina, jos nenurodžius, šešėliai vis tiek veiks.

Nurodyta vertė nustato spindulį, kuriuo šešėlis bus neryškus. Neigiamos reikšmės nenurodomos.

Čia taip pat galima naudoti didesnes reikšmes. Stiprus suliejimas padės sukurti spalvingą efektą, tačiau tik kai kuriose situacijose.

Priešpaskutinė reikšmė, atsakinga už šešėlio ištempimą. Tai taip pat neprivaloma, bet gali suteikti šešėliui šiek tiek spalvos.

Išsiplėtimas atsiranda dėl centrinės kietos šešėlio dalies, esančios tarp neryškių kraštų, tempimo.

Šis parametras gali priimti bet kokias reikšmes, tiek teigiamas, tiek neigiamas. Teigiamos vertės ištempia šešėlį, o neigiamos – mažina.

Ir paskutinis parametras - . Taip pat nebūtina jo nurodyti, nes pagal nutylėjimą dėžutės šešėlis turi savo spalvą - juodą.

Norint pakeisti spalvą, tinka bet kokia spalvų sistema – kaip ir standartinės spalvos.

Dėmesio! Jei norite, kad nuosavybė veiktų „Safari“, šį parametrą reikia nurodyti, net jei naudojate standartinę juodą spalvą.

Vidinis šešėlis – CSS

html(fonas: #fff; ) body(plotis: 80%; paraštė: 0 automatinis; fono spalva: rgba(150,60,60,0,54) langelio šešėlis: -1px 5px 5px 5px rgba(77,63,63) ,0,88) įdėta;)

Taigi pažvelkime į pirmąjį šešėlių naudojimo pavyzdį. Čia mes pažvelgsime į vidinio šešėlio kūrimą kūno blokui.

Norėdami pradėti, atidarykite HTML dokumentą ir užpildykite jį. Nereikia nurodyti jokių žymų, nepildyti turinio, svarbiausia yra sukurti žymą .

Atidarykite mūsų CSS dokumentą ir parašykite žymą , tai bus pagrindinis mūsų parinkėjas.

Tada atidarykite garbanotas petnešas ir parašykite savybę . Nustatykite vietą, suliekite, ištempkite. Jūs jau žinote, kaip nustatyti šias reikšmes. Po to nusistatėme šešėlio spalvą, pasidarėme baltą, bet galite nusistatyti pagal savo skonį.

Dabar svarbiausia. Norėdami sukurti vidinį bloko šešėlį CSS, turite nurodyti įterptąją reikšmę. Jį galite nurodyti iš karto po spalvos apibrėžimo.

Dėl to mes gavome šį bloką:

HTML/CSS – teksto šešėlis

html(fonas: #fff; ) body(plotis: 80%; paraštė: 0 automatinis; fono spalva: rgba(150,60,60,0,54) langelio šešėlis: -1px 5px 5px 5px rgba(77,63,63) ,0,88) intarpas; ) div( paraštė: 150 tšk.; langelio šešėlis: -1 piks. 5 piks. 5 piks. 5 piks. rgba(77,63,63,0,88); šrifto dydis: 25 piks.; )

Sukurta panašiai, bet vietoj langelio šešėlio naudojant nuosavybę . Savybės parametrai yra tokia tvarka.

1. Horizontalus poslinkis.
2. Vertikalus poslinkis.
3. Suliejimo spindulys. Nereikalinga.
4. Spalva.

Kaip matote, šioje nuosavybėje nėra tempimo galimybės. Šešėlio dydis visada bus identiškas teksto dydžiui; to ištaisyti negalima.

Labai patogu šešėlius tepti vieną ant kito. Norėdami tai padaryti, turite išvardyti keletą parametrų grupių

Pirmasis šešėlis bus arčiau teksto, o antrasis - virš jo. Primena darbą su kontūro ir kraštinės ypatybėmis, bet čia galite sukurti 2, 3 ar daugiau šešėlių.

„Hover Shadows“ – CSS

Dabar pažiūrėkime, kaip sukurti šešėlių konkrečiai būsenai. Mūsų pavyzdyje naudosime mygtuką.

Norėdami sukurti mygtuko šešėlį, pirmiausia turite jį įdėti. Atidarykite žymą, užsirašykite mygtuko klasę ir bet kokią teksto reikšmę, kad būtų geriau rodoma.

Pirmiausia nustatykime vietą naudodami paraštės ypatybę ir padidinkime mygtuką iki tam tikro dydžio. Norėdami jį padidinti, galite naudoti pločio ir aukščio ypatybes arba užpildymo ypatybes.

Dabar nustatome fono spalvą, tekstą ir rėmelį. Mūsų mygtukas paruoštas, pradėkime kurti šešėlį.

Pirmiausia sukurkime įprastą mažo dydžio šešėlį naudodami langelį šešėlį. Jis bus matomas pagal numatytuosius nustatymus, neužvedus pelės žymeklio virš mygtuko.

Padarykime patį paprasčiausią efektą – padidinkime šešėlį. Galite padaryti jį neryškų arba pakeisti tempimą pagal savo skonį.

Norėdami gauti geriausią efektą, nustatykime įprastos nuorodos perėjimo ypatybę ir nustatykime laiką į 0,5 s.

Dabar turime puikų mygtuką su gražiu šešėliu, kuris sklandžiai išsiplės užvedus pelės žymeklį.

Išvada

Šiame straipsnyje mes sužinojome apie visus pagrindinius šešėlių kūrimo būdus. Aptarėme visas šešėlių savybes ir parametrus.

Visus elementus, kurie buvo pateikti ekrano kopijose, galite rasti šaltinio aplanke. Jei norite, galite patys jas tyrinėti ir eksperimentuoti su vertybėmis. Galbūt jums seksis daug geriau nei mums.