Kako koristiti CSS box-shadow: 13 trikova i primjera

Kako koristiti CSS box-shadow: 13 trikova i primjera

CSS je jezik koji programeri koriste za oblikovanje web stranice. On kontrolira način prikaza HTML elemenata na ekranu, papiru ili bilo kojem drugom mediju. CSS pruža potpunu moć prilagodbe za oblikovanje web stranice po vašoj slici.





Pomoću CSS-a možete promijeniti boju pozadine, stil fonta, boju fonta, sjenu okvira, marginu i brojna druga svojstva. U ovom vodiču ćemo vas provesti kroz neke učinkovite primjene okvira-sjene.



Što je CSS box-shadow?

The kutija-sjena svojstvo se koristi za primjenu sjene na HTML elemente. To je jedno od najčešće korištenih CSS svojstava za oblikovanje okvira ili slika.





CSS sintaksa:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. horizontalni pomak: Ako je horizontalni pomak pozitivan, sjena će biti desno od okvira. A ako je horizontalni pomak negativan, sjena će biti lijevo od okvira.
  2. okomiti pomak: Ako je okomiti pomak pozitivan, sjena će biti ispod okvira. A ako je okomiti pomak negativan, sjena će biti iznad okvira.
  3. radijus zamućenja: Što je veća vrijednost, sjena će biti zamućenija.
  4. radijus širenja: Označava koliko bi se sjena trebala širiti. Pozitivne vrijednosti povećavaju širenje sjene, negativne vrijednosti smanjuju širenje.
  5. Boja: Označava boju sjene. Također, podržava bilo koji format boje poput rgba, hex ili hsla.

Parametri zamućenja, širenja i boje nisu obavezni. Najzanimljiviji dio okvira-sjene je da možete koristiti zarez za odvajanje vrijednosti sjene okvira neograničeni broj puta. To se može koristiti za stvaranje više rubova i sjena na elementima.



1. Dodajte Dim-box-shadow u lijevu, desnu i donju stranu okvira

Možete dodati vrlo prigušene sjene na tri strane (lijevo, desno i dno) okvira pomoću sljedećeg CSS-sjene CSS-a sa vašim ciljnim HTML elementom:

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

Izlaz:



2. Dodajte Dim Shadow-shadow na sve strane

Možete dodati svijetle sjene na sve strane okvira pomoću sljedećeg CSS-sjene s ciljanim HTML elementom:



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

Izlaz:

3. Dodajte Tanku sjenu okvira na donju i desnu stranu

Sjene možete dodati na donju i desnu stranu okvira pomoću sljedećeg CSS-sjene CSS-a sa vašim ciljnim HTML elementom:

kako pronaći povijest kuće
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Izlaz:

4. Dodajte tamnu okvirnu sjenu na sve strane

Možete dodati tamnu sjenu na sve strane okvira pomoću sljedećeg CSS-sjene s ciljanim HTML elementom:

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

Izlaz:

5. Dodajte Spread Shadow na sve strane

Sjenku za proširenje možete dodati na sve strane okvira pomoću sljedeće naredbe sa ciljnim HTML elementom:

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;

Izlaz:

6. Dodajte tanku rubnu sjenu na sve strane

Možete dodati jednostavnu sjenu ivice na sve strane okvira koristeći sljedeći CSS sa svojim ciljnim HTML elementom:

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;

Izlaz:

7. Dodajte sjenu okvira na donju i lijevu stranu

Možete dodati sjenu na donju i lijevu stranu okvira koristeći sljedeći CSS-sjenu CSS-a sa svojim ciljnim HTML elementom:

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

Izlaz:

8. Dodajte Dim-box-shadow na gornju i lijevu stranu, Dark Shadow na donju i desnu stranu

Možete dodati svijetlu sjenu na gornju i lijevu stranu okvira, kao i tamnu sjenu na donju i desnu stranu okvira koristeći sljedeći CSS sa ciljanim HTML elementom:

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

Izlaz:

9. Dodajte tanku, obojenu sjenu ivice na sve strane

Možete dodati jednostavnu obrubljenu sjenu u boji na sve strane okvira pomoću sljedećeg CSS-sjene s ciljanim HTML elementom:

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

Izlaz:

10. Dodajte više sjena obruba u boji na donju i lijevu stranu okvira

Možete dodati više sjena s rubom u boji na donju i lijevu stranu okvira koristeći sljedeći CSS sa svojim ciljnim HTML elementom:

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

Izlaz:

kako vidjeti tko gleda vaše videozapise na instagramu

11. Na dno dodajte više ivica u boji

Na dno okvira možete dodati više sjena s rubom u boji pomoću sljedećeg CSS-sjene s ciljanim HTML elementom:

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;

Izlaz:

12. Dodajte više sjena obruba u boji na donju i desnu stranu okvira

Možete dodati više sjena s rubom u boji na donju i desnu stranu okvira koristeći sljedeći CSS sa svojim ciljnim HTML elementom:

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;

Izlaz:

13. Dodajte svjetlosne sjene na lijevu i desnu stranu, raširite sjenu na dno

S lijeve i desne strane možete dodati svijetle sjene i raširiti sjenu na dno okvira pomoću sljedećeg CSS-sjene s ciljanim HTML elementom:

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;

Izlaz:

Integrirajte CSS s HTML stranicom

Sada znate dodati hladne efekte sjena okvira pomoću CSS-a, možete ih jednostavno integrirati s HTML elementima na više načina.

Povezano: 11 Korisni alati za provjeru, čišćenje i optimizaciju CSS datoteka

Možete ga ugraditi u samu HTML stranicu ili priložiti kao zaseban dokument. Postoje tri načina za uključivanje CSS -a u HTML dokument:

Interni CSS

Ugrađeni ili interni stilski listovi umetnuti su u odjeljak HTML dokumenta pomoću element. Možete stvoriti bilo koji broj elemenata u HTML dokumentu, ali moraju biti zatvoreni između i oznake. Evo primjera koji pokazuje kako se koristi interni CSS s HTML dokumentom:





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





Ugrađeni CSS

Ugrađeni CSS koristi se za dodavanje jedinstvenih stilskih pravila HTML elementu. Može se koristiti s HTML elementom putem stil atribut. Atribut style sadrži CSS svojstva u obliku 'svojstvo: vrijednost' odvojene točkom -zarezom ( ; ).

Povezano: Saznajte kako izgraditi dvodimenzionalne web stranice pomoću CSS mreže

Sva svojstva CSS -a moraju biti u jednom retku, tj. Ne smije biti prijeloma redaka između svojstava CSS -a. Evo primjera koji pokazuje kako se koristi ugrađeni CSS s HTML dokumentom:





CSS box-shadow



Style 4





Vanjski CSS

Vanjski CSS je najidealniji način primjene stilova na HTML dokumente. Vanjska stilska tablica sadrži sva pravila stila u zasebnom dokumentu (.css datoteka), koji je tada povezan s HTML dokumentom pomoću označiti. Ova je metoda najbolja metoda za definiranje i primjenu stilova na HTML dokumente jer zahvaćena HTML datoteka zahtijeva minimalne promjene u oznakama. Evo primjera koji pokazuje kako koristiti vanjski CSS s HTML dokumentom:

Izradite novu CSS datoteku s .css produžetak. Sada dodajte sljedeći CSS kod u tu datoteku:

.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;
}

Na kraju, stvorite HTML dokument i dodajte sljedeći kod u taj dokument:

što znači stiskanje datoteke




CSS box-shadow




Style 4





Imajte na umu da je CSS datoteka povezana s HTML dokumentom putem oznaka i href atribut.

Sve tri gore navedene metode (unutarnji CSS, ugrađeni CSS i vanjski CSS) prikazat će isti izlaz-

Učinite svoju web stranicu elegantnom pomoću CSS -a

Korištenjem CSS -a imate potpunu kontrolu nad stilom vaše web stranice. Svaki HTML element možete prilagoditi pomoću različitih CSS svojstava. Razvojni programeri iz cijelog svijeta doprinose ažuriranjima CSS -a, a to čine od svog objavljivanja 1996. Kao takvi, početnici imaju puno toga za naučiti!

Srećom, CSS je prilagođen početnicima. Možete steći izvrsnu praksu tako što ćete započeti s nekoliko jednostavnih naredbi i vidjeti kamo vas odvodi vaša kreativnost.

Udio Udio Cvrkut E -pošta 10 jednostavnih primjera CSS koda koje možete naučiti za 10 minuta

Trebate pomoć s CSS -om? Isprobajte ove osnovne primjere CSS koda za početak, a zatim ih primijenite na svoje web stranice.

Pročitajte Dalje Povezane teme
  • Programiranje
  • Web dizajn
  • CSS
O autoru Yuvraj Chandra(Objavljeno 60 članaka)

Yuvraj je student preddiplomskog studija Računarstva na Sveučilištu u Delhiju u Indiji. Oduševljen je Full Stack web razvojem. Kad ne piše, istražuje dubinu različitih tehnologija.

Više od Yuvraja Chandre

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu