Unutrašnje sjene u CSS-u. Unutrašnje sjene u CSS-u Radijus rastezanja sjene
Uobičajene senke se lako implementiraju pomoću senke okvira ili senke teksta. Ali šta ako trebate napraviti unutrašnje sjene? Ovaj članak opisuje kako napraviti ove sjene sa samo nekoliko linija koda.
Sintaksa
Prvo, pogledajmo dva glavna načina implementacije senki u CSS.box-shadow
Dizajn box-shadow sadrži nekoliko različitih značenja:
Horizontalni pomak I vertikalni pomak- horizontalni i vertikalni pomak. Ove vrijednosti pokazuju u kojem smjeru će objekt baciti svoju sjenu:
Radijus zamućenja I radijus širenja malo komplikovanije. Koja je razlika? Pogledajmo primjer sa dva elementa, gdje su vrijednosti radijus zamućenja razlikovati:
Rub sjene je jednostavno zamagljen. Sa različitim vrijednostima radijus širenja vidimo sljedeće:
U ovom slučaju vidimo da je sjena raspršena na velikom području. Ako ne navedete vrijednost radijus zamućenja I radijus širenja, tada će biti jednaki 0.
text-shadow
Sintaksa je vrlo slična box-shadow:
Značenja su slična, ali ne rasprostranjena senka. Primjer upotrebe:
Inset in box-shadow
Da biste "okrenuli" senku unutar objekta, potrebno je da dodate umetnuti u CSS-u:
Jednom kada shvatite osnovnu sintaksu box-shadow, vrlo je lako razumjeti kako implementirati unutrašnje sjene. Vrijednosti su i dalje iste, možete dodati boju (RGB u heksadecima):
Boja je u RGB formatu, alfa vrijednost je odgovorna za transparentnost sjene:
Slike sa senkama
Dodavanje unutrašnje sjene slici je malo teže od dodavanja obične sjene div. Za početak, evo uobičajenog koda slike: 
Logično je pretpostaviti da možete dodati senku ovako:
Img (sjena okvira: umetnuti 0px 0px 10px rgba(0,0,0,0.5); )
Ali senka se ne vidi:
Postoji nekoliko načina za rješavanje ovog problema, od kojih svaki ima svoje prednosti i nedostatke. Pogledajmo dva od njih. Prvi je da umotate sliku u regularnu div:
Div (visina: 200px; širina: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img (visina: 200px; širina: 400px; pozicija: relativna; z-indeks: -2 ; )
Sve radi, ali moramo dodati malo dodatnih HTML i CSS oznaka. Drugi način je da postavite sliku kao pozadinu željenog bloka:
Div (visina: 200px; širina: 400px; pozadina: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )
Ovo se može dogoditi kada koristite unutrašnje sjene:
Umetnuti u sjenku teksta
Za implementaciju unutrašnje sjene teksta, jednostavno dodajte kodu umetnuti ne radi:
Da biste riješili, prvo primijenite na zaglavlje h1 Postavite tamnu pozadinu i svijetlu sjenu:
H1 (boja pozadine: #565656; boja: prozirna; sjena teksta: 0px 2px 3px rgba(255,255,255,0.5); )
Evo šta se dešava:
Dodavanje tajnog sastojka background-clip koji odsijeca sve što se proteže izvan teksta (do tamne pozadine):
H1 (boja pozadine: #565656; boja: prozirna; senka teksta: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: tekst; -moz-background-clip: tekst; background-clip: tekst ; )
Ispalo je skoro tačno ono što nam je trebalo. Sada samo malo potamnimo tekst (alfa), a rezultat je:
Sjena ispod blok elementa na stranici se obično koristi za stvaranje trodimenzionalnog efekta, za privlačenje pažnje na element ili kao dio dizajna. Mala senka ispod elemenata takođe daje volumen i dubinu stranice.
Za dodavanje sjene koristite svojstvo box-shadow, koje ima šest vrijednosti, od kojih su samo dvije potrebne. Na sl. Slika 1 prikazuje svojstvo box-shadow sa svim mogućim vrijednostima, numeriranim da ih identifikuje.
Rice. 1. Vrijednosti svojstva senke okvira
- ključna riječ inset postavlja senku unutar elementa;
- pomaknite sjenu horizontalno (5px - desno, -5px - lijevo);
- vertikalni pomak (5px - dolje, -5px - gore);
- radijus zamućenja senke (0 - oštra senka);
- rastezanje sjene (5px - rastezanje, -5px - smanjivanje);
- boja senke.
Potrebno je navesti samo horizontalni i vertikalni pomak, svi ostali parametri će biti uzeti po defaultu. U ovom slučaju, sjena će biti oštra bez zamućenja ili crne boje.
Kombinacijom različitih parametara i njihovih vrijednosti možete dobiti široku paletu vrsta sjenki. U tabeli 1 prikazuje kod i rezultat do kojeg vodi.
| Kod | Rezultat | Opis |
|---|---|---|
| box-shadow: 5px 5px; | Oštra senka desno i ispod. | |
| box-shadow: -5px -5px; | Oštra sjena lijevo i iznad. | |
| box-shadow: 0 0 5px; | Zamućena sjena oko elementa. | |
| box-shadow: 0 0 5px 2px; | Proširite sjenu za 2 piksela. | |
| box-shadow: 0 0 5px 2px crvena; | Crveni sjaj oko elementa. | |
| box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); | Translucent shadow. | |
| box-shadow: umetnuti 0 0 6px; | Senka unutra. |
Kao što se može vidjeti iz tabele, pomak sjene ne mora biti specificiran u pikselima, iako je to zgodno. Boja sjene može se odrediti u bilo kojem dostupnom formatu; na primjer, za dobivanje prozirne sjene, prikladan je RGBA format; takva sjena će izgledati dobro na bilo kojoj pozadini. Primjer 1 pokazuje kako se to radi.
Primjer 1: Sjena na pozadinskoj slici
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Ne idite protiv neprijateljskih zastava kada su u savršenom redu; ne napadajte neprijateljski logor kada je neosvojiv; ovo je upravljanje promjenama.
Sun Tzu, trans. Nikolaj Konrad
Rezultat ovog primjera prikazan je na sl. 2. Sjena prati zaokruživanje uglova bloka.
Rice. 2. Pojava sjene na pozadinskoj slici
Kada dodajete "široku" sjenku, imajte na umu da se ona može proširiti izvan vidljivih granica prozora pretraživača i tako rezultirati pojavom horizontalne trake za pomicanje.
Sjene se također mogu dodati pseudoelementima; to je ponekad potrebno za složene rasporede. Na sl. Slika 3 prikazuje blok zaglavlja sa dodanom sjenom. Da biste izbjegli bilo kakve linije na spoju, morate koristiti pseudoelement ::after i dodati mu sjenu.
Rice. 3. Blok sa sjenom
Primjer 2 prikazuje kreiranje 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 su navedeni 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.
Rice. 4. Slika dvostruke sjene
Prva senka se prikazuje levo od slike sa radijusom zamućenja od 20px, čija je veličina smanjena za četvrti parametar (-20px). Parametri druge sjene su naznačeni nakon decimalne točke; sjena se prikazuje desno od slike i također je smanjena radi simetrije.
Uobičajene senke se lako implementiraju pomoću senke okvira ili senke teksta. Ali šta ako trebate napraviti unutrašnje sjene? Ovaj članak opisuje kako napraviti ove sjene sa samo nekoliko linija koda.
Sintaksa
Prvo, pogledajmo dva glavna načina implementacije senki u CSS.box-shadow
Dizajn box-shadow sadrži nekoliko različitih značenja:
Horizontalni pomak I vertikalni pomak- horizontalni i vertikalni pomak. Ove vrijednosti pokazuju u kojem smjeru će objekt baciti svoju sjenu:
Radijus zamućenja I radijus širenja malo komplikovanije. Koja je razlika? Pogledajmo primjer sa dva elementa, gdje su vrijednosti radijus zamućenja razlikovati:
Rub sjene je jednostavno zamagljen. Sa različitim vrijednostima radijus širenja vidimo sljedeće:
U ovom slučaju vidimo da je sjena raspršena na velikom području. Ako ne navedete vrijednost radijus zamućenja I radijus širenja, tada će biti jednaki 0.
text-shadow
Sintaksa je vrlo slična box-shadow:
Značenja su slična, ali ne rasprostranjena senka. Primjer upotrebe:
Inset in box-shadow
Da biste "okrenuli" senku unutar objekta, potrebno je da dodate umetnuti u CSS-u:
Jednom kada shvatite osnovnu sintaksu box-shadow, vrlo je lako razumjeti kako implementirati unutrašnje sjene. Vrijednosti su i dalje iste, možete dodati boju (RGB u heksadecima):
Boja je u RGB formatu, alfa vrijednost je odgovorna za transparentnost sjene:
Slike sa senkama
Dodavanje unutrašnje sjene slici je malo teže od dodavanja obične sjene div. Za početak, evo uobičajenog koda slike:
Logično je pretpostaviti da možete dodati senku ovako:
Img (sjena okvira: umetnuti 0px 0px 10px rgba(0,0,0,0.5); )
Ali senka se ne vidi:
Postoji nekoliko načina za rješavanje ovog problema, od kojih svaki ima svoje prednosti i nedostatke. Pogledajmo dva od njih. Prvi je da umotate sliku u regularnu div:
Div (visina: 200px; širina: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img (visina: 200px; širina: 400px; pozicija: relativna; z-indeks: -2 ; )
Sve radi, ali moramo dodati malo dodatnih HTML i CSS oznaka. Drugi način je da postavite sliku kao pozadinu željenog bloka:
Div (visina: 200px; širina: 400px; pozadina: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )
Ovo se može dogoditi kada koristite unutrašnje sjene:
Umetnuti u sjenku teksta
Za implementaciju unutrašnje sjene teksta, jednostavno dodajte kodu umetnuti ne radi:
Da biste riješili, prvo primijenite na zaglavlje h1 Postavite tamnu pozadinu i svijetlu sjenu:
H1 (boja pozadine: #565656; boja: prozirna; sjena teksta: 0px 2px 3px rgba(255,255,255,0.5); )
Evo šta se dešava:
Dodavanje tajnog sastojka background-clip koji odsijeca sve što se proteže izvan teksta (do tamne pozadine):
H1 (boja pozadine: #565656; boja: prozirna; senka teksta: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: tekst; -moz-background-clip: tekst; background-clip: tekst ; )
Ispalo je skoro tačno ono što nam je trebalo. Sada samo malo potamnimo tekst (alfa), a rezultat je:
Možete dodati sjenu elementima i promijeniti njen izgled koristeći CSS svojstvo box-shadow. Ovaj stil vam omogućava da ostvarite zanimljive efekte, na primjer, volumen i trodimenzionalnost bloka. Nekretnina je podržana od strane svih modernih pretraživača. Izuzetak su IE8 i Opera Mini.
box-shadow svojstvo: sintaksa
Ovaj stil je napisan na sljedeći način:
Box-shadow: umetnuti 4px 4px 8px 5px #333333;
Razmotrimo redom za šta je svaki parametar odgovoran (s lijeva na desno):
- Ključna riječ umetnuti: parametar koji ne mora biti specificiran; crta senku unutra element.
- X offset: Određuje stepen do kojeg se senka pomera horizontalno u odnosu na element. Pozitivna vrijednost znači pomak udesno, negativna - ulijevo. Vrijednost 0 znači da senka nije pomaknuta.
- Y Shift: Određuje količinu vertikalnog pomaka sjene. Pozitivna vrijednost znači pomak naniže, negativna vrijednost znači pomak naviše. Vrijednost 0 je sjena bez pomaka.
- Radijus zamućenja: Ovo je stepen zamućenja senke. Što je vrijednost veća, sjena je zamućenija. Ako parametar nije naveden, zadana vrijednost je 0. U ovom slučaju, sjena će biti savršeno jasna.
- Produžetak: opcioni parametar odgovoran za rastezanje sjene duž obje ose; što je veća vrijednost, to je veće rastezanje. Proširenje radi samo ako je prisutan prethodni parametar. Zadana vrijednost je 0.
- Boja senke: sa ovim parametrom je sve jasno - postavlja boju sjene elementa. Zadana boja je crna.
Bilješka. Android pretraživači i starije verzije iPhone Safarija zahtijevaju prefiks -webkit- za CSS svojstvo box-shadow da bi ispravno funkcionisalo.
Ovo svojstvo može uzeti nekoliko grupa vrijednosti (napraviti nekoliko sjenki u isto vrijeme). Da biste to učinili, morat ćete navesti ove grupe parametara odvojene zarezima. Na primjer:
Box-shadow: 15px 15px 20px #8b0163, umetnuti 15px 15px 20px #630046;
Primjeri senke kutije
Da bismo vam pomogli da bolje razumete snagu i lepotu svojstva CSS box-shadow, pokazaćemo vam nekoliko primera koje možete bezbedno primeniti u praksi. Ovo svojstvo može uvelike transformirati običan blok!
Lagana senka
Box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
Efekat papira
Box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), umetnuti 0 0 40px rgba(0, 0, 0, .1); 
Više slojeva
Box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3; 
Trostruki okvir
Box-shadow: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4); 
Uglovi
Box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385; 
Kao što vidite, svojstvo senke kutije ostavlja puno prostora za maštu. Možete transformirati blokove kako želite - glavna stvar je imati osjećaj za proporciju! 😉
U sljedećem poglavlju istražit ćete svojstva širine i visine, koja određuju veličinu elemenata.
Danas ćemo naučiti kako napraviti CSS sjene bez slika. Nakon što završite ovaj vodič, više vam neće trebati CSS generator senki.
Glavna prednost senki kreiranih sa CSS3 je lakoća implementacije i smanjenje broja zahteva ka serveru (pošto više ne koristimo slike). Da bismo napravili CSS sjenu, potrebna nam je div oznaka i CSS box-shadow svojstvo. Neće vam trebati nikakve dodatne oznake jer ćemo kreirati :after i :before pseudo elemente koje ćemo postaviti iza glavnog objekta (div sa klasom blok).
Pogledajte HTML kod za koji ćemo kreirati CSS3 sjenu:
Sadržaj
Zatim možete vidjeti gotove primjere i kod potreban za njihovu implementaciju. Da bismo minimizirali tekst na stranici, izostavićemo CSS svojstva sa prefiksima pretraživača. Cijeli kod se može vidjeti klikom na link "Primjer" koji 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) umetnuti; ) .block:prije, .block:after ( content:""; position:apsolute; z-index:-2; bottom:15px; lijevo:10px ; širina:50%; visina:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); ) .block:after (desno). :10px; lijevo:auto; transform:rotirati(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) inset; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:pre, .block:after ( content:""; position:apsolute ; z-indeks:-2; dno:12px; lijevo:10px; širina:50%; visina:55%; max-width:200px; box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); transform:kosi(-8deg) rotate(-3deg); ) .block:after (desno:10px; lijevo:auto; transform:koso(8deg) rotate(3deg); )
Koristeći senku možete dati blok perspektivu. Vidi 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) umetnuti; ) .block:prije, .block:after ( content:""; position:apsolute; z-index:-2; ) .block:before (lijevo:80px; dolje:5px ; širina:50%; visina:35%; max-width:200px; box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4); transform:skew(50deg); transform-origin:0 100% ; ) .blok:posle (prikaz:nema; )
CSS senka za podignuti blok. Vidi 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) umetnuti; box-shadow: 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) umetnuti; ) .block:pre, .block:posle (sadržaj:""; pozicija:apsolutna; z-indeks:-2; )
Primjer CSS3 sjene za okomito presavijeni blok. Vidi 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) umetnuti; ) .block:prije, .block:after ( content:""; position:apsolute; z-index:-2; ) .block:before (vrh:10px; dolje: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) umetnuti; ) .block:prije, .block:after ( content:""; position:apsolute; z-index:-2; ) .block:before (vrh:10px; dolje:10px ; lijevo:0; desno:0; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; )
Primjer CSS3 sjene za horizontalno presavijeni blok. Vidi 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) umetnuti; ) .block:prije, .block:nakon (sadržaj:""; pozicija:apsolutna; z-indeks:-2; ) .block:prije (gore:50%; dolje: 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) umetnuti; ) .block:prije, .block:after ( content:""; position:apsolute; z-index:-2; ) .block:before (top:0px; bottom:0px ; lijevo:10px; desno:10px; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px; )
CSS3 senka za rotirani blok. Vidi 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:apsolute; z-index:-1; top:0px; bottom:0; lijevo:0; desno:0px; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) umetnuti; ) .block:prije, .block:posle ( sadržaj:""; pozicija:apsolutna; z-index:-2; dolje:15px; lijevo:10px; širina:50% ; visina:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); ) .block:after (desno:10px; lijevo: auto; transform:rotate(3deg); )