CSS3 i senke (shadow) - box shadow - senke na objektima
Senke (shadow) pre i posle pojave CSS3
Kao i kod teksta, senke objektima daju utisak dubine, odnosno stvaraju privid trodimenzionalnosti. Znamo da je to prirodnije za naše oko. Pored toga što je CSS3 omogućio dodavanje senke na tekst, omogućio je i dodavanje senki na objektima.
Ovde sam upotrebio reč "objekti" jer box shadow se može upotrebiti na većini HTML elemenata (<div>, <span>, <p>, <img>......).
Do pojave CSS3 senke na objektima radile su se kao slike.
Senke na objektu mogle su se izvesti pravljenjem prirodne senke u nekom programu za obradu slika (na primer Photo Shop). Ali često je bilo potrebno tu sliku podeliti na 3 nove slike gde je prva predstavljala gornji deo objekta, zatim središnji deo koji će se ponavljati po y osi i na kraju donji deo. Prilično komplikovano, zar ne?
Uvođenjem CSS3 pravljenje senki na objektima postalo je veoma jednostavno, brže za realizaciju i nesumnjivo brže za učitavanje. Istini za volju, neke senke ni pomoću CSS3 ne mogu se napraviti kao što je to moguće u Photo Shop-u.
Senke na objektu - box shadow
Senka objekta može se definisati kao posebna klasa ili kao deo većine HTML tagova. Mogu se definisati vrednosti koje označavaju razmak senke od objekta po horizoltali, razmak po vertikali, vrednost blur-a (zamućenja), veli;ina senke, boja senke i određivanje da senka bude unutar objekta. Kao i tekst, senka objekta može imate i više od jedne senke na taj način što se definicije odvajaju zarezom.
Sintaksa:
.senka {
-moz-box-shadow:2px 2px 3px 5px #ff0000 inset;
-webkit-box-shadow:2px 2px 3px 5px #ff0000 inset;
box-shadow:2px 2px 3px 5px #ff0000 inset;
}
Tu je senka naziv klase, prvi broj je udaljenost senke po horizontali, drugi broj je udaljenost senke po vertikali, treći broj je veličina blur-a (zamućenja), četvrti broj je uvećanje senke (spread), zatim ide heksadecimalni broj koji definiše boju senke i na kraju reč "inset" koja definiše da je senka u unutrašnjosti objekta.
/* Sintaksa box shadow sa rgba definicijom boje*/
.senka {
box-shadow:2px 2px 3px 5px rgba(0,255,255,0.65) inset;
}
Definisanje boje senke mo\e se uraditi na više načina. Preporučujem upotrebu heksadecimalnog koda boje ili RGB definiciju. Načine na koje se mogu definisati boje opisaćemo u nekom drugom postu, ali sada da na kratko objasnim RGB i RGBA metod. RGBA metoda definicije boje koristi po jedan broj za svaku boju: R za crvenu (Red), G za zelenu (Green) i B za plavu (Blue). Brojevi se u rasponu od 0 do 255 gde 0 predstavlja potpino odsustvo boje na koju se odnosi,, a 255 je maksimalno prisustvo te boje. Tako je na primer rgb(0,0,0) odsustvo svih boja, što znači crna boja, odnosno rgb(255,255,255) je maksimalno prisustvo svih boja, što daje belu boju.
RGBA definicija boja dodaje boji još jedno svojstvo, a to je providnost (Alpha). To je broj od 0 do 1, gde je 0 potpuna providnost, odnosno 1 je potpuna neprozirnost. Vodite računa da u decimalnom broju za određivanje providnosti uvek upotrebit decimalnu tačku.
Definicije udaljenosti senke od teksta (prve dve cifre) su obavezne, dok se sve ostale vrenosti mogu izostaviti.
/* Sintaksa box shadow sa HEX definicijom boje*/
.senka {
box-shadow:2px 2px 3px 5px #ff0000 inset;
}
Mi ćemo iz praktičnih razloga izostavljati -moz-box-shadow i -webkit-box-shadow. Pri pisanju CSS koda Vi ih nemojte izostavljati. Oni su inače namenjeni za starije verzije browsera: -moz-box-shadow za Mozilu, odnosno -webkit-box-shadow za Chrome i Safari. Najnovije verzije svih browsera podržavaju definiciju senke objekta samo sa box-shadow:
Važno je znati:
- Definicije udaljenosti senke boksa mogu biti i negativni brojevi, čime se određuje smer udaljenosti. Prva cifra pomera senku za određeni broj piksela po x osi (po horizontali). Ako je pozitivna u desno, a ako je negativna u levo.
- Druga cifra pomera senku za određeni broj piksela po y osi (po vertikali). Ako je pozitivna na dole, a ako je negativna na gore.
- Ukoliko izostavimo definiciju boje, senka će biti crne boje. Boje se mogu definisati i na druge načine, ali preporuka je da to ipak radite pomoću heksadecimalnog broja, kako je to i u donjim primerima urađeno ili RGBA definicijom boje.
- Ukoliko izostavimo definiciju blur-a, podrazumevana vrednost je 0, odnosno, nema zamućenja.
- Ukoliko izostavimo definiciju uvećanja (spread-a), podrazumevana vrednost je takođe 0, odnosno nema uvećanja. Senka je iste veličine kao i objekat.
- Ukoliko izostavimo definiciju inset, podrazumevano, senka će biti sa spoljašnje strane boksa. Definicija inset može biti prva ili poslednja, ali nikako između drugih definicija.
- Ukoliko za neku vrednost želimo da bude 0px, možemo izostaviti i meru (u našem slučaju to je px).
Primeri senke na objektima - box shadow
<!DOCTYPE html>
<html>
<head>
<style>
/* Ovde idu sve definicije stilova */
</style>
</head>
<body>
<!-- Ovde ide sadržaj stranice -->
</body>
</html>
U donjem HTML editoru u levom, plavom bloku prikazan je CSS i HTML kod za primere u desnom, belom bloku. HTML i CSS kod u levom bloku možete po svojoj volji menjati, a rezultat ćete odmah videti u desnom bloku. Ekspeimentišite malo i možete dobiti vrlo interesantne efekte.
Editor radi u realnom vremenu, odnosno, svaka promena u kodu levog boxa odmah prikazuje rezultat te promene u desnom boxu. Takđe iz praktičnih razloga u editoru su izostavljeni neki elementi. Naravno, Vi ih nemojte izostavljati. Podrazumeva se da CSS definicije (<style> .......... < /stzle> postavite unutar head elemenata (između <head> i </head> elemenata).
Tekst unutar <style> elementa postavljen između /* i */ je komentar koji svi browseri ignorišu. Drgim rečima, sve napisano između /* i */ nema nikakvog uticaja na izgled stranice. Isto važi i za tekst između <!-- i -->, samo što ovaj primer pisanja komentara važi unutar <body> elementa. Ali o tome u nekom drugom postu.
U primeru petog bloka vidimo da se box shadow može definisati i za pseudo klase. U ovom primeru definisana je pseudo klasa hover (.senka5:hover) koja se izvršava kada je miš iznad objekta.
CSS i HTML Rezultat
Komentari
Trenutno nema komentara.Dodajte komentar