Redoslijed snimanja je fundamentalno važan. Prva vrijednost je uvijek pomak duž X osi, druga - duž Y osi.
Ako pomak nije potreban duž jedne od osi, postavite ga na nulu:
Class(box-shadow: 0 8px;) – pomakni sjenu samo duž Y osi
Proizlaziti
Class(box-shadow: 8px 8px;) – pomak po obje osi
Proizlaziti
Negativna vrijednost za osi okvir-sjena
Sjena će se kretati u suprotnom smjeru:
Class(box-shadow: -8px 8px;) – pomak sjene s negativnom vrijednošću duž X osi
Proizlaziti
Radijus zamućenja sjene
Treći parametar svojstva kutija-sjena. Ako nije navedeno, vrijednost je 0, a veličina sjene jednaka je veličini elementa na koji se primjenjuje.
Class(box-shadow: 0 48px 0;) – sjena duplicira dimenzije elementa na koji je primijenjena
Proizlaziti
Kada je vrijednost veća od nule, rubovi gube definiciju, sjena postaje veća i vizualno svjetlija. Zamućenje se primjenjuje sa svih strana:
Klasa (box-shadow: 0 0 8px;) – bez pomaka, samo zamućenje
Proizlaziti
Klasa (box-shadow: 0 8px 8px;) – pomak Y-osi i zamućenje
Proizlaziti
Negativna vrijednost smatra se pogreškom i sjena se uopće neće prikazati.
Radijus istezanja sjene
Četvrti parametar svojstva kutija-sjena. Mijenja veličinu sjene u odnosu na element. Proteže se u svim smjerovima:
Klasa (box-shadow: 0 0 0 8px;) – nema pomaka ili zamućenja, samo rastezanje
Proizlaziti
U u ovom slučaju sjena je 16 piksela veća od elementa u širini i visini: 8px lijevo + 8px desno i 8px gore + 8px dolje.
Negativna vrijednost istezanja sjene u CSS-u
Sjena se ne rasteže, već se sužava sa svih strana za određenu vrijednost:
Klasa (box-shadow: 0 16px 0 -8px;) – smanji sjenu s negativnom vrijednošću
Proizlaziti
Boja sjene
Prema zadanim postavkama, boja sjene duplicira boju fonta: kao u gornjim primjerima.
Boja sjene navedena je u bilo kojem dostupnom CSS formatu:
- #ff0009
- rgb(255, 0, 9)
- hsl(358, 100%, 50%);
Dajte elementu plavu sjenu:
Klasa (box-shadow: 0 8px #3a8fe7;)
Proizlaziti
Unutarnja sjena
Parametar umetnuti prikazuje sjenu unutar bloka.
Za razliku od gore navedenih opcija, ne postoji striktan redoslijed pisanja. Obje opcije će dati isti rezultat:
Sjena okvira: 0 8px #3a8fe7 umetnuta; box-shadow: umetnuti 0 8px #3a8fe7;
Proizlaziti
Drugu je opciju lakše razumjeti prilikom čitanja koda.
Nekoliko sjena
Višestruke sjene navedene su odvojene zarezima. Redoslijed prikaza od vrha prema dolje:
Klasa (box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )
Proizlaziti
Ako zamijenite mjesta, plava sjena neće biti vidljiva:
Klasa (box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )
Proizlaziti
Unutarnja i vanjska sjena postavljaju se istovremeno:
Klasa (box-shadow: 0 16px #3ae7af, umetnuta 0 8px #3a8fe7; )
Proizlaziti
Zaobljena sjena
Ako se elementu da svojstvo granični radijus, sjena će imati zaobljene kutove.
Klasa (box-shadow: 0 16px #3a8fe7; border-radius: 8px; )
Proizlaziti
Postavljanjem istezanja sjene povećavamo njezino zaokruživanje. Na primjer, radijus granice je 8 piksela, a rastezanje sjene je 4.
8+4=12px je radijus zaobljenja sjene.
Klasa (box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )
Proizlaziti
Isti princip vrijedi za smanjivanje sjene kada je vrijednost negativna.
8+(-4)=4px - dobivamo duplo manje zaokruživanje sjene.
Ako je kompresija sjene veća od graničnog polumjera, dobit ćemo sjenu s pravim kutom. Na primjer, kompresija je 16px.
8+(-16)=(-8), ali filet ne može imati negativnu vrijednost i primijenit će se nula.
Klasa (box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )
Proizlaziti
CSS svojstvo kutija-sjena Podržavaju ga svi popularni preglednici osim Opera Mini.
Danas ćemo naučiti kako napraviti CSS sjene bez slika. Nakon što završite ovaj vodič, više vam neće trebati CSS generator sjene.
Koja je glavna prednost sjena stvorenih s CSS pomoć 3, to je u jednostavnosti implementacije i smanjenju broja zahtjeva prema poslužitelju (budući da više ne koristimo slike). Za izradu CSS sjene potrebna nam je div oznaka i CSS svojstvo box-shadow. Neće vam trebati nikakve dodatne oznake jer ćemo stvoriti pseudoelemente :after i :before koje ćemo postaviti iza glavnog objekta (div s klasom blok).
Pogledajte HTML kod za koji ćemo napraviti CSS3 shadow:
Sadržaj
Zatim možete vidjeti gotove primjere i kod potreban za njihovu implementaciju. Kako bismo smanjili tekst na stranici, izostavit ćemo CSS svojstva s prefiksima preglednika. Puni kod Možete ga vidjeti klikom na poveznicu "Primjer" koja odgovara primjeru.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) umetnuto; ) .block:before, .block:after ( content:""; pozicija:apsolutno; z-index:-2; bottom:15px; lijevo:10px ; width:50%; height:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); ) .block:after ( desno :10px; lijevo:automatski; transformacija:rotacija(3deg); )
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetnuti; obrub:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:before, .block:after ( content:""; position:absolute ; z-indeks:-2; dno:12px; lijevo:10px; širina:50%; visina:55%; maksimalna širina:200px; okvir-sjena:0 8px 12px rgba(0, 0, 0, 0.5); transform:skew(-8deg) rotate(-3deg); ) .block:after (right:10px; left:auto; transform:skew(8deg) rotate(3deg); )
Korištenjem sjene možete dati blok perspektivu. Pogledajte primjer.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetak; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( left:80px; bottom:5px ; širina:50%; visina:35%; maksimalna širina:200px; box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); transform:skew(50deg); transform-origin:0 100% ; ) .block:after ( display:none; )
CSS sjena za podignuti blok. Pogledajte primjer.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetnuto; sjena okvira: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) umetak; ) .block:before, .block:after ( content:""; position:apsolute; z-index:-2; )
Primjer CSS3 sjene za okomito presavijeni blok. Pogledajte primjer.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetak; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px ; lijevo:0; desno:50%; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; )
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetak; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px ; lijevo:0; desno:0; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; )
Primjer CSS3 sjene za vodoravno presavijeni blok. Pogledajte primjer.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetak; ) .block:before, .block:after ( content:""; position:apsolute; z-index:-2; ) .block:before ( top:50%; bottom: 0px; lijevo:10px; desno:10px; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px; )
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) umetnuto; ) .block:prije, .block:nakon ( sadržaj:""; pozicija:apsolutno; z-indeks:-2; ) .block:prije ( vrh:0px; dno:0px ; lijevo:10px; desno:10px; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px; )
CSS3 sjena za rotirani blok. Pogledajte primjer.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) umetnuti; box-shadow:none; transform:rotate(-3deg); ) .block > :first-child:before ( content:""; position:absolute; z-indeks:-1; gore:0px; dolje:0; lijevo:0; desno:0px; pozadina:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) umetnuto; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50% ; visina:20%; maksimalna širina:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotirati(-3deg); ) .block:after ( desno:10px; lijevo: auto; transform:rotiraj(3deg); ) Pozdrav, dragi čitatelji. Danas ćemo raditi s vama lijepa sjena za blokove koji koriste CSS. Mislim da će vam ovo biti vrlo korisno, pogotovo ako izrađujete predloške. I blokovi sa sjenama izgledaju vrlo atraktivno i moderno.
Podrška za preglednik
U osnovi svi moderni preglednici podržavaju efekte sjene:
- Internet Explorer 9.0 i noviji;
- Firefox 3.5 i noviji;
- Chrome 1 i noviji;
- Safari 3 i noviji;
- Opera 10.5 i novije.
Također bih želio spomenuti jednu važnu točku: za neke preglednike koristit ćemo određene prefikse. Koristi se za Firefox -moz-, za Chrome i Safari trebate koristiti prefiks -webkit.
Pa, sad prijeđimo na najzanimljiviji dio. Pogledajmo sve sjene zasebno, bit će 8 efekata.
Efekt sjene 1
U ovom primjeru, sjena bloka je na dnu.
HTML
Učinak 1
CSS
poravnanje teksta: središte; položaj: relativno; gore:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*========= ================ ========== * Učinak 1 * ===================== ================= ===========*/ .effect1( -webkit-box-shadow: 0 10px 6px -6px #777; -moz- box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; )Efekt sjene 2
U ovom primjeru sjena od bloka ide lijevo i desno, ali nema je u sredini. Ispostavilo se da je to vrlo zanimljiv učinak.
HTML
Učinak 2
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 2 * == ===================================== =========================*/ .effect2 ( pozicija: relativno; ) .effect2:prije, .effect2:poslije ( z-index: - 1; položaj: apsolutni; sadržaj: ""; dolje: 15px; lijevo: 10px; širina: 50%; vrh: 80%; maks. -širina:300px; pozadina: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform : rotate(-3deg); -moz-transform: rotate(-3deg); -o -transformacija: rotacija(-3deg); -ms-transformacija: rotacija(-3deg); transformacija: rotacija(-3deg); ) . effect2:after ( -webkit-transform: rotacija(3deg); -moz-transformacija: rotacija (3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg) ; desno: 10px; lijevo: auto; )Efekt sjene 3
Ovdje je sjena od bloka samo s lijeve strane.
HTML
Učinak 3
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 3 * == ===================================== =========================*/ .effect3 ( pozicija: relativna; ) .effect3:before ( z-index: -1; pozicija: apsolutna ; sadržaj: ""; dolje: 15px; lijevo: 10px; širina: 50%; gore: 80%; maks. širina:300px; pozadina: #777; -webkit-box-shadow: 0 15px 10px #777; -moz -box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate( -3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); )Efekt sjene 4
Sjena na desnoj strani.
HTML
Učinak 4
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 4 * == ===================================== ==========================*/ .effect4 ( pozicija: relativno; ) .effect4:after ( z-index: -1; pozicija: apsolutno; sadržaj: ""; dolje: 15px; desno: 10px; lijevo: auto; širina: 50%; gore: 80%; maks. širina:300px; pozadina: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform : zakreni (3 stupnja); -ms-transformacija: zakreni (3 stupnja); transformiraj: zakreni (3 stupnja); )Efekt sjene 5
U ovom slučaju, sjena s obje strane se jače pomaknula prema dolje.
HTML
Učinak 5
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 5 * == ===================================== =========================*/ .effect5 ( pozicija: relativno; ) .effect5:prije, .effect5:poslije ( z-index: - 1; položaj: apsolutni; sadržaj: ""; dolje: 25px; lijevo: 10px; širina: 50%; vrh: 80%; maks. -širina:300px; pozadina: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform : rotate(-8deg); -moz-transform: rotate(-8deg); -o -transformacija: rotacija(-8deg); -ms-transformacija: rotacija(-8deg); transformacija: rotacija(-8deg); ) . effect5:after ( -webkit-transform: rotacija(8deg); -moz-transformacija: rotacija (8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg) ; desno: 10px; lijevo: auto; )Efekt sjene 6
Ovdje je učinak zakrivljenih sjena na dnu bloka.
HTML
Učinak 6
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 6 * == ===================================== =========================*/ .effect6 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuto; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuti; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) umetnuti; ) .effect6:before, .effect6:after ( sadržaj:""; pozicija:apsolutno; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0 ,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50% ; bottom:0; left:10px; right:10px; -moz-border-radius: 100px / 10px; border-radius:100px / 10px; ) .effect6:after (right:10px; left:auto; -webkit-transform :skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate (3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transformacija:koso(8deg) rotacija(3deg); transformacija:koso(8deg) rotacija(3deg); )Efekt sjene 7
Isti efekt je samo sjena ispod i iznad bloka.
HTML
Učinak 7
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 7 * == ===================================== =========================*/ .effect7 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuto; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuti; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) umetnuti; ) .effect7:before, .effect7:after ( sadržaj:""; pozicija:apsolutno; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0 ,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect7:after (right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:kew(8deg) rotate( 3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transformacija:koso(8deg) rotacija(3deg); transformacija:koso(8deg) rotacija(3deg); )Efekt sjene 8
Učinak zakrivljenih sjena na stranama bloka.
HTML
Učinak 8
CSS
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 8 * == ===================================== =========================*/ .effect8 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuto; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuti; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) umetnuti; ) .effect8:before, .effect8:after ( sadržaj:""; pozicija:apsolutno; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0 ,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect8:after (right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:kew(8deg) rotate( 3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transformacija:koso(8deg) rotacija(3deg); transformacija:koso(8deg) rotacija(3deg); )To je sve, dragi prijatelji. Ako vam nešto nije jasno, svakako pitajte u komentarima. Vidimo se uskoro.
Pojavom standarda CSS 3 uveo svojstvo box-shadow, koje je postalo široko korišteno među web programerima, jer olakšava dodavanje jedne ili više sjena u okvir elementa kako bi se dobio željeni vizualni učinak.
U prethodnom smo članku pogledali svojstvo border-radius; pomoću njega možete dobiti sjenu sa zaobljenim kutovima. Po analogiji s tekstualnom sjenom (text-shadow), možete stvoriti više sjena, prema kojima se primjenjuju z-os naprijed prema natrag (s prvom danom sjenom na vrhu).
Pogledajmo pobliže sintaksu ovog modernog svojstva:
Razmotrimo redom moguće vrijednosti ovog svojstva:
| Značenje | Opis |
|---|---|
| nikakav | Sjena se ne prikazuje. Ovo je zadana vrijednost. |
| umetnuti | Izborna vrijednost. Ako ova vrijednost nije određena (zadano), sjena će biti na vanjskoj strani elementa i stvorit će učinak izbočenog elementa. Ako je prisutna ključna riječ (vrijednost), sjena će pasti unutar elementa i stvoriti efekt udubljenja. Drugim riječima, to je promjena vanjske sjene u unutarnju. |
| h-sjena | Potrebna vrijednost. Postavlja položaj horizontalne sjene. Dopuštene su negativne vrijednosti. |
| v-sjena | Potrebna vrijednost. Postavlja mjesto okomite sjene. Dopuštene su negativne vrijednosti. |
| radijus zamućenja | Izborna vrijednost. Postavlja radijus zamućenja. Što je vrijednost veća, to je veće zamućenje, čineći sjenu većom i svjetlijom. Ako vrijednost nije navedena, vrijednost će biti 0 (oštre - jasne sjene). Negativne vrijednosti nisu dopuštene. |
| širenje-radijus | Izborna vrijednost. Veličina sjene (radijus istezanja sjene). S pozitivnim vrijednostima sjena će se proširiti, a s negativnim vrijednostima će se smanjiti. Ako nije navedena vrijednost, vrijednost će biti 0 (sjena odgovara veličini elementa). |
| boja | Izborna vrijednost. Definira boju sjene (HEX, RGB, RGBA, HSL, HSLA, "Unaprijed definirane boje"). Zadana vrijednost je crna. |
Glavne točke koje morate razumjeti da biste stvorili sjene za elemente su:
Želio bih vam skrenuti pozornost na činjenicu da svojstvo box-shadow trenutno podržavaju svi moderni preglednici:
| Vlasništvo | Opera | IExplorer | Rub |
|||
|---|---|---|---|---|---|---|
| kutija-sjena | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Ako želite proširiti podršku za neke preglednike, uključujući mobilne iOS 3.2 - 4.3 I Android 2.1 - 3, tada se preporučuje korištenje prefiksa proizvođača i korištenje sljedeće sintakse (u primjerima u članku, sintaksa će se koristiti samo za moderni preglednici):
-webkit-box-shadow: vrijednost; /* Safari 3.1 - 4, IOS 3.2 - 4.3 i Android 2.1 - 3 */-moz-box-shadow: vrijednost; /* Firefox 3.5 - 3.6 */ box-shadow : value ; /* tablica iznad */Prijeđimo na praksu i počnimo jednostavan primjer, u kojem dodajemo jednu sjenu elementima:
Rezultat našeg primjera:
Korištenje višestrukih sjena
U sljedećem primjeru predlažem razmotriti zanimljiv učinak miješanja boja koji se može postići korištenjem više sjena:
- Dva blokove fiksne širine i visine (15em i 10em), dodao ispunu sa svih strana (2em) i postavio da blokovi budu blok-line kako bi ih mogli poredati.
- Za prvi blok s razredom .test naznačili smo četiri sjene s različitim vodoravnim i okomitim vrijednostima sjene tako da element ima različite sjene na svim stranama. Radijus zamućenja za sve sjene postavljen je na isti. Boja svake sjene je drugačija i određena je pomoću unaprijed definiranih boja.
- Za drugi blok s razredom .test2 naznačili smo četiri sjene s različitim vodoravnim i okomitim vrijednostima sjene. Radijus zamućenja za sve sjene postavljen je na isti, dok je rastezanje sjene postavljeno na negativno, što je dovelo do smanjenja same sjene. Boja svake sjene je drugačija i određena je pomoću RGBA sustava.
Rezultat našeg primjera:
Korištenje sjena za slike
Posljednji primjer ovog članka usredotočit će se na korištenje sjena za slike. Želio bih odmah skrenuti vašu pozornost na činjenicu da izravno ukazuju na sjenu za HTML element Neće raditi, ali imamo priliku odrediti sliku kao pozadinu za element koji nas zanima, a zatim dodijeliti sjenu koja nam je potrebna ovom elementu.
Detaljno ćemo razmotriti rad s pozadinskim slikama u članku udžbenika "", a sada, da završimo proučavanje korištenja sjena, dotaknut ćemo ga se površno i koristiti sliku kao pozadinu elementa u sljedećem primjer:
- Dva blokove fiksne širine i visine (237px i 232px), dodali margine za sve strane (2em) i postavili blokove na blokove kako biste ih mogli poredati. Postavili smo veličinu bloka od 237 px x 232 px prema veličini slike, tako da u ovoj fazi obuke nismo morali skalirati sliku kako bi odgovarala elementu i utjecati na ona CSS svojstva koja se planiraju proučavati u kasnijoj fazi (u članku iz udžbenika " ").
- Za prvi blok s razredom .test Odredili smo nultu vrijednost za vodoravnu i okomitu sjenu, ali smo u isto vrijeme odredili radijus zamućenja od 50px i proširili ga postavljanjem radijusa rastezanja od 10px. Boja sjene je označena unaprijed definiranom bojom (ljubičasta). Osim toga, naveli smo u oglasu ključna riječ inset , što uzrokuje da sjena padne unutar elementa. Drugim riječima, stvorili smo unutarnju sjenu elementa.
- Za drugi blok s razredom .test2 Odredili smo nultu vrijednost za vodoravnu i okomitu sjenu, ali smo u isto vrijeme odredili radijus zamućenja od 50px i proširili ga postavljanjem radijusa rastezanja od 10px. Boja sjene određena je u RGBA načinu rada.
Rezultat našeg primjera:
Riža. 98 Primjer korištenja sjena za slike u CSS-u (svojstvo box-shadow)
Pitanja i zadaci na temu
Prije nego prijeđete na sljedeću temu, dovršite zadatak za vježbanje:
Ako imate poteškoća s dovršavanjem zadatka za vježbanje, uvijek možete otvoriti primjer u zasebnom prozoru i pregledati stranicu kako biste shvatili koji je CSS kod korišten.
2016-2020 Denis Bolshakov, komentare i prijedloge na web mjestu možete poslati na [email protected]
Sjena ispod blok elementa na stranici obično se koristi za stvaranje trodimenzionalnog efekta, za privlačenje pozornosti na element ili kao dio dizajna. Mala sjena ispod elemenata također daje stranici volumen i dubinu.
Za dodavanje sjene upotrijebite svojstvo box-shadow koje ima šest vrijednosti, od kojih su samo dvije obavezne. Na sl. Slika 1 prikazuje svojstvo box-shadow sa svim mogućim vrijednostima, označenim brojevima za njihovu identifikaciju.
Riža. 1. Vrijednosti svojstava box-shadow
- ključna riječ inset postavlja sjenu unutar elementa;
- pomaknite sjenu vodoravno (5px - desno, -5px - lijevo);
- vertikalni pomak (5px - dolje, -5px - gore);
- radijus zamućenja sjene (0 - oštra sjena);
- rastezanje sjene (5px - rastezanje, -5px - skupljanje);
- boja sjene.
Potrebno je odrediti samo vodoravni i okomiti pomak, svi ostali parametri bit će uzeti prema zadanim postavkama. U tom će slučaju sjena biti oštra bez zamućenja ili crne boje.
Kombiniranjem različitih parametara i njihovih vrijednosti, možete dobiti široku paletu vrsta sjena. U tablici 1 prikazuje kod i rezultat do kojeg vodi.
| Kodirati | Proizlaziti | Opis |
|---|---|---|
| okvir-sjena: 5px 5px; | Oštra sjena desno i dolje. | |
| okvir-sjena: -5px -5px; | Oštra sjena lijevo i gore. | |
| okvir-sjena: 0 0 5px; | Zamućena sjena oko elementa. | |
| okvir-sjena: 0 0 5px 2px; | Proširite sjenu za 2 piksela. | |
| okvir-sjena: 0 0 5px 2px crvena; | Crveni sjaj oko elementa. | |
| box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); | Prozirna sjena. | |
| box-shadow: umetnuti 0 0 6px; | Sjena iznutra. |
Kao što se može vidjeti iz tablice, pomak sjene ne mora biti naveden u pikselima, iako je to zgodno. Boja sjene može se odrediti u bilo kojem dostupnom formatu, tako da je prikladna za dobivanje prozirne sjene RGBA format, takva će sjena izgledati dobro na bilo kojoj pozadini. Primjer 1 pokazuje kako to učiniti.
Primjer 1: Sjena na pozadinskoj slici
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Ne idite protiv neprijateljskih barjaka kada jesu u savršenom redu; ne napadajte neprijateljski tabor kada je neosvojiv; ovo je upravljanje promjenama.
Sun Tzu, prev. Nikolaja Konrada
Rezultat ovog primjera prikazan je na sl. 2. Sjena prati zaobljenje uglova bloka.
Riža. 2. Pojava sjene na pozadinskoj slici
Kada dodajete "široku" sjenu, imajte na umu da se ona može proširiti izvan vidljivih granica prozora preglednika i tako rezultirati pojavom vodoravne trake za pomicanje.
Pseudoelementima se također mogu dodati sjene; to je ponekad potrebno za složene rasporede. Na sl. Slika 3 prikazuje blok zaglavlja s dodanom sjenom. Kako biste izbjegli crte na spoju, morate upotrijebiti pseudoelement ::after i dodati mu sjenu.
Riža. 3. Blok sa sjenom
Primjer 2 prikazuje izradu takvog bloka.
Primjer 2. Blok sa sjenom
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Naslov
Element može imati više od jedne sjene, ali nekoliko odjednom; njihovi parametri navedeni su odvojeni zarezima u vrijednosti svojstva box-shadow. Primjer 3 pokazuje kako dodati dvostruku sjenu svim slikama.
Primjer 2. Blok sa sjenom
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Rezultat ovog primjera prikazan je na sl. 4.
Riža. 4. Slika dvostruke sjene
Prva sjena prikazana je lijevo od slike s radijusom zamućenja od 20px, a njezina veličina smanjena je za četvrti parametar (-20px). Parametri druge sjene navedeni su nakon decimalne točke; sjena je prikazana desno od slike i također je smanjena radi simetrije.