Kako uporabljati CSS box-shadow: 13 trikov in primerov

Kako uporabljati 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 ponuja vso moč prilagajanja za oblikovanje spletne strani po vaši podobi.





S pomočjo 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 sence škatle.



Kaj je CSS box-shadow?

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





Sintaksa CSS:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. vodoravni odmik: Če je vodoravni odmik pozitiven, bo senca desno od 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.
  3. polmer zameglitve: Višja kot je vrednost, bolj bo zamegljena senca.
  4. polmer širjenja: Pomeni, koliko se mora senca širiti. Pozitivne vrednosti povečajo širjenje sence, negativne vrednosti zmanjšajo širjenje.
  5. Barva: Označuje barvo sence. Prav tako podpira kateri koli barvni format, kot so rgba, hex ali hsla.

Parametri zamegljenosti, širjenja in barve so neobvezni. Najbolj zanimiv del sence polja je, da lahko z vejico poljubno število ločite vrednosti sence škatle. To lahko uporabite za ustvarjanje več robov in senc na elementih.



1. Levo, desno in dno polja dodajte zatemnjeno polje

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

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

Izhod:



2. Dodajte Dim Shadow-shadow na All Sides

Svetle sence lahko dodate na vse strani polja s pomočjo naslednjega CSS-senčila polja 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 senco okvirja

Na spodnji in desni strani polja lahko dodate sence z naslednjim CSS-senco polja s ciljnim elementom HTML:

kako se vrniti na klasični gmail
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Izhod:

4. Dodajte temno polje-senco na vse strani

Temno senco lahko dodate na vse strani škatle z naslednjim CSS-senco polja s ciljnim elementom HTML:

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

Izhod:

5. Dodajte Spread Shadow na vse strani

Na vse strani polja lahko dodate razširjeno senco z naslednjim ukazom s ciljnim elementom HTML:

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. Dodajte tanko obrobno senco na vse strani

Enostavno obrobno senco lahko dodate na vse strani polja z uporabo naslednjega CSS -ja s 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 inset;

Izhod:

7. Na spodnjo in levo stran dodajte senco okvirja

Na spodnjo in levo stran polja lahko dodate senco z naslednjim CSS-senco polja s ciljnim elementom HTML:

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

Izhod:

8. Na zgornjo in levo stran dodajte zatemnjeno okvirno senco, na spodnjo in desno stran temno senco.

Na zgornjo in levo stran polja lahko dodate svetlo senco, na spodnjo in desno stran polja pa temno senco z uporabo naslednjega CSS -ja s 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. Dodajte tanko, barvno obrobno senco na vse strani

Na vse strani škatle lahko dodate preprosto barvno senco obrobe z naslednjim CSS-senco polja s ciljnim elementom HTML:

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

Izhod:

10. Na spodnjo in levo stran škatle dodajte več barvnih obrobnih senc

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

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Izhod:

aplikacije za uporabo v razredu

11. Spodaj dodajte več barvnih obrobnih senc

Na dno polja lahko dodate več barvnih obrobnih senc z naslednjim CSS-senco polja 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 škatle dodajte več barvnih obrobnih senc

Na spodnjo in desno stran polja lahko dodate več barvnih obrobnih senc z naslednjim CSS -jem s 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. Dodajte svetlo senco na levo in desno stran, senco razširite na spodnjo stran

Na levo in desno stran lahko dodate svetle sence in razširite senco na dno polja z naslednjim CSS-senco polja 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

Sedaj veste, kako z uporabo CSS dodati kul učinke senc škatle, jih lahko preprosto integrirate z elementi HTML na več načinov.

Povezano: 11 Uporabna orodja 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

Vdelane ali notranje slogovne liste so vstavljene v razdelku dokumenta HTML z uporabo element. Ustvarite lahko poljubno število elementov v dokumentu HTML, vendar morajo biti zaprti med in oznake. Tukaj je primer, ki prikazuje uporabo notranjega CSS z dokumentom HTML:





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





Inline CSS

Inline CSS se uporablja za dodajanje edinstvenih slogovnih pravil elementu HTML. Uporablja se lahko z elementom HTML prek slog atribut. Atribut style vsebuje lastnosti CSS v obliki 'lastnost: vrednost' ločene s podpičjem ( ; ).

Povezano: Naučite se graditi dvodimenzionalna spletna mesta z mrežo CSS

Vse lastnosti CSS morajo biti v eni vrstici, kar pomeni, da med lastnostmi CSS ne sme biti prelomov vrstic. Tukaj je primer, ki prikazuje uporabo vgrajenega CSS z dokumentom HTML:





CSS box-shadow



Style 4





Zunanji CSS

Zunanji CSS je najbolj idealen način za uporabo slogov v dokumentih HTML. Zunanji slog sloga vsebuje vsa pravila sloga v ločenem dokumentu (datoteka .css), ta dokument je nato povezan z dokumentom HTML z uporabo oznaka. Ta metoda je najboljša metoda za opredelitev in uporabo slogov v dokumentih HTML, saj prizadeta datoteka HTML zahteva minimalne spremembe v oznakah. Tukaj je primer, ki prikazuje, kako uporabljati zunanji CSS z dokumentom HTML:

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

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Nazadnje ustvarite dokument HTML in v ta dokument dodajte naslednjo kodo:

ki je hitrejši chrome ali firefox




CSS box-shadow




Style 4





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

Vse zgornje tri metode (notranji CSS, vgrajeni CSS in zunanji CSS) bodo prikazovale isti izhod-

Naredite svojo spletno stran elegantno 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 počnejo že od njene izdaje leta 1996. Tako se morajo začetniki še veliko naučiti!

Na srečo je CSS prijazen začetnikom. Odlične vaje lahko dobite tako, da začnete z nekaj preprostimi ukazi in ugotovite, kam vas popelje vaša ustvarjalnost.

Deliti Deliti Cvrkutati E-naslov 10 preprostih primerov kode CSS, ki se jih lahko naučite v 10 minutah

Potrebujete pomoč pri CSS? Za začetek preizkusite te osnovne primere kode CSS, nato pa jih uporabite na svojih spletnih straneh.

Preberite Naprej Sorodne teme
  • Programiranje
  • Oblikovanje spletnih strani
  • CSS
O avtorju Yuvraj Chandra(Objavljenih 60 člankov)

Yuvraj je dodiplomski študent računalništva na Univerzi v Delhiju v Indiji. Navdušen je nad spletnim razvojem Full Stack. Ko ne piše, raziskuje globino različnih tehnologij.

Več od Yuvraja Chandre

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite