Kako se koristi CSS okvir-sjena: 13 trikova i primjera

CSS je jezik koji programeri koriste za oblikovanje web stranice. Ona kontrolira kako se HTML elementi prikazuju na zaslonu, na papiru ili u bilo kojem drugom obliku medija. CSS pruža punu moć prilagodbe kako biste oblikovali web stranicu na svoju sliku.

Pomoću CSS-a možete promijeniti boju pozadine, stil fonta, boju fonta, sjene okvira, marginu i brojna druga svojstva elementa. Provest ćemo vas kroz neke učinkovite upotrebe box-shadowa u ovom vodiču.

Što je CSS okvir-sjena?

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: [vodoravni pomak] [vertikalni pomak] [radijus zamućenja] [opcionalni radijus širenja] [boja];

1. vodoravni pomak: Ako je horizontalni pomak pozitivan, sjena će biti s desne strane okvira. A ako je vodoravni pomak negativan, sjena će biti lijevo od okvira.
2. vertikalni pomak: Ako je vertikalni pomak pozitivan, sjena će biti ispod okvira. A ako je vertikalni pomak negativan, sjena će biti iznad okvira.
instagram viewer
3. polumjer zamućenja: Što je vrijednost veća, sjena će biti zamućenija.
4. polumjer š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 boja poput rgba, hex ili hsla.

Parametri zamućenja, širenja i boje nisu obvezni. Najzanimljiviji dio okvira-sjena je taj da zarezom možete odvojiti vrijednosti bilo kojeg broja puta. To se može koristiti za stvaranje više obruba i sjena na elementima.

1. Dodajte mutnu sjenu okvira lijevo, desno i dno okvira

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

kutija-sjena: rgba (149, 157, 165, 0,2) 0px 8px 24px;

Izlaz:

2. Dodajte zatamnjenu okvir-sjenu na Sve strane

Možete dodati svijetle sjene na sve strane okvira pomoću sljedećeg CSS s okvirnim sjenama s vašim ciljnim HTML elementom:

kutija-sjena: rgba (100, 100, 111, 0,2) 0px 7px 29px 0px;

Izlaz:

3. Na donju i desnu stranu dodajte tanku kutiju-sjenu

Sjene možete dodati na donju i desnu stranu okvira pomoću sljedećeg CSS-a s okvirnim sjenama s ciljnim HTML elementom:

sjena okvira: rgba (0, 0, 0, 0,15) 1,95 piksela 1,95 piksela 2,6 piksela;

Izlaz:

4. Dodajte tamnu kutiju-sjenu na Sve strane

Možete dodati tamnu sjenu na sve strane okvira pomoću sljedećeg CSS s okvirnim sjenama s ciljnim HTML elementom:

sjena okvira: rgba (0, 0, 0, 0,35) 0px 5px 15px;

Izlaz:

5. Dodajte Spread Shadow na sve strane

Sjenku za širenje možete dodati na sve strane okvira pomoću sljedeće naredbe s 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 Sjenku tanke ivice na sve strane

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

sjena okvira: 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 umetak;

Izlaz:

7. Dodajte donju i lijevu stranu okvira-sjene

Možete dodati sjenu na donju i lijevu stranu okvira pomoću sljedećeg CSS s okvirnim sjenama s ciljnim HTML elementom:

sjena okvira: rgba (0, 0, 0, 0,1) -4px 9px 25px -6px;

Izlaz:

8. Na gornju i lijevu stranu dodajte tamnu kutiju sjene, donju i desnu stranu Tamnu sjenu

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 s ciljnim HTML elementom:

kutija-sjena: rgba (136, 165, 191, 0,48) 6 piksela 2 piksela 16 piksela 0 piksela, rgba (255, 255, 255, 0,8) -6 piksela -2 piksela 16 piksela 0 piksela;

Izlaz:

9. Dodajte tanku, obojenu rubnu sjenu na sve strane

Možete dodati jednostavnu sjenku obruba u boji na sve strane okvira pomoću sljedećeg CSS-a s okvirom s ciljnim HTML elementom:

kutija-sjena: rgba (3, 102, 214, 0.3) 0px 0px 0px 3px;

Izlaz:

10. Dodajte više obojenih rubnih sjena na donju i lijevu stranu okvira

Na donju i lijevu stranu okvira možete dodati više obojenih sjena obruba pomoću sljedećeg CSS-a s ciljnim HTML elementom:

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

Izlaz:

11. Dno dodajte više obojenih rubnih sjena

Možete dodati više obojenih sjena obruba na dno okvira pomoću sljedećeg CSS okvira-sjene s ciljnim 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 obojenih rubnih sjena na donju i desnu stranu okvira

Možete dodati više obojenih sjena obruba na donju i desnu stranu okvira pomoću sljedećeg CSS-a s 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, širite sjenu na dno

Možete dodati svjetlosne sjene na lijevu i desnu stranu i širiti sjenu na dno okvira pomoću sljedećeg CSS-a s okvirnim okvirom s vašim ciljnim 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

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

Povezano: 11 korisnih alata za provjeru, čišćenje i optimizaciju CSS datoteka

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

Interni CSS

Umetnuti ili ugrađeni listovi stilova umetnuti su u odjeljak HTML dokumenta pomoću element. Možete stvoriti bilo koji broj elementi u HTML dokumentu, ali moraju biti zatvoreni između i oznake. Evo primjera koji pokazuje kako koristiti Interni CSS s HTML dokumentom:

Stil 4

Ugrađeni CSS

Ugrađeni CSS koristi se za dodavanje jedinstvenih pravila stila HTML elementu. Može se koristiti s HTML elementom putem stil atribut. Atribut style sadrži CSS svojstva u obliku "svojstvo: vrijednost" odvojeno zarezom (;).

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

Sva svojstva CSS-a moraju biti u jednom retku, tj. Između CSS svojstava ne bi trebalo biti prijeloma crta. Evo primjera koji pokazuje kako se koristi ugrađeni CSS s HTML dokumentom:

Stil 4

Vanjski CSS

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

Stvorite novu CSS datoteku pomoću .css produženje. Sada dodajte sljedeći CSS kôd u tu datoteku:

.heading {
poravnanje teksta: središte;
}
.image-box {
prikaz: blok;
margina-lijevo: auto;
margina-desno: auto;
sjena okvira: rgba (0, 0, 0, 0,35) 0px 5px 15px;
}

Na kraju, izradite HTML dokument i dodajte sljedeći kôd u taj dokument:

Stil 4

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

Sve gore navedene tri metode (Interni CSS, Inline 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 i to čine od njegovog izdavanja 1996. Kao takvi, početnici moraju puno naučiti!

Srećom, CSS je prilagođen početnicima. Možete se izvrsno uvježbati započinjanjem s nekoliko jednostavnih naredbi i uvidom kamo vas vodi vaša kreativnost.

10 jednostavnih primjera CSS koda koje možete naučiti u 10 minuta

Želite li znati više o korištenju CSS-a? Isprobajte ove osnovne primjere CSS koda za početak, a zatim ih primijenite na vlastitim web stranicama.

Pročitajte Dalje

O autoru