Kako uporabiti CSS box-shadow: 13 trikov in primerov

CSS je jezik, ki ga razvijalci uporabljajo za oblikovanje spletne strani. Nadzira, kako so elementi HTML prikazani na zaslonu, na papirju ali v kateri koli drugi obliki medija. CSS zagotavlja popolno moč prilagajanja, da spletno stran oblikujete v svojo sliko.

Z uporabo CSS lahko spremenite barvo ozadja elementa, slog pisave, barvo pisave, senco polja, rob in številne druge lastnosti. V tem priročniku vas bomo vodili skozi nekaj učinkovitih načinov uporabe box-shadow.

Kaj je CSS box-shadow?

The škatla-senca lastnost se uporablja za uporabo sence za elemente HTML. To je ena najpogosteje uporabljenih lastnosti CSS za oblikovanje polj ali slik.

Sintaksa CSS:

box-shadow: [vodoravni odmik] [navpični odmik] [polmer zameglitve] [poljuben polmer širjenja] [barva];

1. vodoravni odmik: Če je vodoravni odmik pozitiven, bo senca na desni strani polja. In če je vodoravni odmik negativen, bo senca levo od polja.
2. navpični odmik: Če je navpični odmik pozitiven, bo senca pod poljem. In če je navpični odmik negativen, bo senca nad poljem.
instagram viewer
3. polmer zameglitve: Višja kot je vrednost, bolj zamegljena bo senca.
4. polmer širjenja: Označuje, kako močno naj se širi senca. Pozitivne vrednosti povečajo širjenje sence, negativne vrednosti zmanjšajo širjenje.
5. Barva: Označuje barvo sence. Podpira tudi kateri koli barvni format, kot je rgba, hex ali hsla.

Parametri zamegljenosti, širjenja in barve niso obvezni. Najbolj zanimiv del box-shadow je, da lahko z vejico ločite vrednosti box-shadow poljubno številokrat. To lahko uporabimo za ustvarjanje več obrob in senc na elementih.

1. Na levi, desni in spodnji del polja dodajte senco polja Dim

Na tri strani (levo, desno in spodaj) polja lahko dodate zelo zatemnjene sence z uporabo naslednjega CSS-ja s ciljnim elementom HTML:

box-shadow: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Izhod:

2. V vse strani dodajte senco polja Dim

Lahko dodate svetle sence na vse strani polja s pomočjo naslednjega CSS-ja s ciljnim elementom HTML:

box-shadow: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Izhod:

3. Na spodnjo in desno stran dodajte tanko škatlasto senco

Na spodnjo in desno stran polja lahko dodate sence s pomočjo naslednjega CSS-ja s ciljnim elementom HTML:

box-shadow: rgba (0, 0, 0, 0,15) 1,95 slikovnih pik 1,95 slikovnih pik 2,6 slikovnih pik;

Izhod:

4. Temni škatli dodajte senco All Sides

Temno senco lahko dodate na vse strani polja z uporabo naslednjega CSS-ja s ciljnim elementom HTML:

box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Izhod:

5. Dodajte Spread Shadow na vse strani

S pomočjo naslednjega ukaza lahko s ciljnim elementom HTML dodate razširjeno senco na vse strani polja:

box-shadow: rgba (0, 0, 0, 0.25) 0px 54px 55px, rgba (0, 0, 0, 0.12) 0px -12px 30px, rgba (0, 0, 0, 0.12) 0px 4px 6px, rgba (0, 0, 0, 0,17) 0px 12px 13px, rgba (0, 0, 0, 0,09) 0px -3px 5px;

Izhod:

6. Na vse strani dodajte senco s tanko obrobo

Preprosto senco obrob lahko dodate na vse strani polja z uporabo naslednjega CSS-ja z vašim ciljnim elementom HTML:

box-shadow: rgba (6, 24, 44, 0,4) 0px 0px 0px 2px, rgba (6, 24, 44, 0,65) 0px 4px 6px -1px, rgba (255, 255, 255, 0,08) 0px 1px 0px vložek;

Izhod:

7. Na spodnji in levi strani dodajte škatlasto senco

Na spodnji in levi strani polja lahko dodate senco s pomočjo naslednjega CSS-ja s ciljnim elementom HTML:

box-shadow: rgba (0, 0, 0, 0,1) -4px 9px 25px -6px;

Izhod:

8. Na zgornji in levi strani dodajte temno senco, na spodnjo in desno stran pa temno senco

Na zgornjo in levo stran polja lahko dodate svetlo senco, na spodnjo in desno stran polja pa temno senco z naslednjim CSS-jem z vašim ciljnim elementom HTML:

box-shadow: rgba (136, 165, 191, 0,48) 6px 2px 16px 0px, rgba (255, 255, 255, 0,8) -6px -2px 16px 0px;

Izhod:

9. Na vse strani dodajte tanko obarvano obrobo

Na naslednji strani polja lahko dodate preprosto barvno senco obrobja z uporabo naslednjega CSS-ja s ciljnim elementom HTML:

box-shadow: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

Izhod:

10. Na spodnjo in levo stran polja dodajte večbarvne obrobne sence

Na spodnjo in levo stran polja lahko dodate več barvnih senčnih obrob z naslednjim CSS-jem s ciljnim elementom HTML:

box-shadow: rgba (50, 50, 93, 0,25) 0px 30px 60px -12px vložek, rgba (0, 0, 0, 0,3) 0px 18px 36px -18px vložek;

Izhod:

11. Spodaj dodajte večbarvne obrobne sence

Na spodnji del polja lahko dodate več barvnih obrobnih senc z naslednjim CSS-jem s ciljnim elementom HTML:

box-shadow: rgba (240, 46, 170, 0,4) 0px 5px, rgba (240, 46, 170, 0,3) 0px 10px, rgba (240, 46, 170, 0,2) 0px 15px, rgba (240, 46, 170, 0,1) 0px 20px, rgba (240, 46, 170, 0,05) 0px 25px;

Izhod:

12. Na spodnjo in desno stran polja dodajte večbarvne obrobne sence

Na spodnjo in desno stran polja lahko dodate več barvnih senc obrob z uporabo naslednjega CSS-ja z vašim ciljnim elementom HTML:

box-shadow: rgba (240, 46, 170, 0,4) 5px 5px, rgba (240, 46, 170, 0,3) 10px 10px, rgba (240, 46, 170, 0,2) 15px 15px, rgba (240, 46, 170, 0,1) 20px 20px, rgba (240, 46, 170, 0,05) 25px 25px;

Izhod:

13. Na levo in desno stran dodajte svetle sence, na spodnji del razprite senco

Lahko dodate svetle sence na levo in desno stran ter razširite senco na dno polja z naslednjim CSS-om s ciljnim elementom HTML:

box-shadow: rgba (0, 0, 0, 0.09) 0px 2px 1px, rgba (0, 0, 0, 0.09) 0px 4px 2px, rgba (0, 0, 0, 0.09) 0px 8px 4px, rgba (0, 0, 0, 0,09) 0px 16px 8px, rgba (0, 0, 0, 0,09) 0px 32px 16px;

Izhod:

Integrirajte CSS s stranjo HTML

Zdaj veste, kako z uporabo CSS-ja dodate kul učinke senc v polju, jih lahko enostavno vključite v elemente HTML na več načinov.

Sorodno: 11 uporabnih orodij za preverjanje, čiščenje in optimizacijo datotek CSS

Lahko ga vdelate v samo stran HTML ali priložite kot ločen dokument. CSS lahko v dokument HTML vključite na tri načine:

Notranji CSS

Vdelani ali notranji slogovni listi so vstavljeni v odsek dokumenta HTML z uporabo element. Ustvarite lahko poljubno število elementi v dokumentu HTML, vendar morajo biti zaprti med in oznake. Tu je primer, ki prikazuje, kako uporabljati interni CSS z dokumentom HTML:

Slog 4.

Vstavljeni CSS

Vstavljeni CSS se uporablja za dodajanje edinstvenih slogovnih pravil elementu HTML. Lahko se uporablja z elementom HTML prek slog atribut. Atribut slog vsebuje lastnosti CSS v obliki "lastnost: vrednost" ločena s podpičjem (;).

Sorodno: Naučite se ustvariti dvodimenzionalne spletne strani z mrežo CSS

Vse lastnosti CSS morajo biti v eni vrstici, torej med lastnostmi CSS ne sme biti nobenih prelomov. Tu je primer, ki prikazuje, kako uporabljati vdelani CSS z dokumentom HTML:

Slog 4.

Zunanji CSS

Zunanji CSS je najbolj idealen način za uporabo slogov v dokumentih HTML. Zunanji slogovni list vsebuje vsa pravila slogov v ločenem dokumentu (.css datoteka), ta dokument se nato poveže z dokumentom HTML z uporabo oznaka. Ta metoda je najboljša metoda za določanje in uporabo slogov v dokumentih HTML, saj prizadeta datoteka HTML zahteva minimalne spremembe v označevanju. Tu je primer, ki prikazuje, kako uporabljati zunanji CSS z dokumentom HTML:

Ustvarite novo datoteko CSS z .css podaljšanje. Zdaj v to datoteko dodajte naslednjo kodo CSS:

.heading {
poravnava besedila: sredina;
}
.image-box {
zaslon: blok;
rob-levo: samodejno;
rob desno: samodejno;
box-shadow: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Na koncu ustvarite dokument HTML in v ta dokument dodajte naslednjo kodo:

Slog 4.

Upoštevajte, da je datoteka CSS povezana z dokumentom HTML prek oznaka in href atribut.

Vsi zgornji trije načini (notranji CSS, vstavljeni CSS in zunanji CSS) bodo prikazali enake izhodne

Naj bo vaša spletna stran elegantna s CSS

Z uporabo CSS imate popoln nadzor nad oblikovanjem vaše spletne strani. Vsak element HTML lahko prilagodite z različnimi lastnostmi CSS. Razvijalci z vsega sveta prispevajo k posodobitvam CSS in to že od izdaje leta 1996. Kot taki se morajo začetniki veliko naučiti!

Na srečo je CSS prijazen do začetnikov. Odlično vadite lahko tako, da začnete z nekaj preprostimi ukazi in vidite, kam vas vodi vaša ustvarjalnost.

10 preprostih primerov kode CSS, ki se jih lahko naučite v 10 minutah

Bi radi izvedeli več o uporabi CSS? Za začetek preizkusite te osnovne primere kode CSS, nato jih uporabite na svojih spletnih straneh.

Preberite Naprej

O avtorju