Unutarnje sjene u CSS-u. Unutarnje sjene u radijusu rastezanja sjene u CSS-u
Uobičajene sjene lako je implementirati korištenjem box-shadow ili text-shadow. Ali što ako trebate napraviti unutarnje sjene? Ovaj članak opisuje kako napraviti te sjene sa samo nekoliko redaka koda.
Sintaksa
Prvo, pogledajmo dva glavna načina za implementaciju sjena u CSS.kutija-sjena
Oblikovati kutija-sjena sadrži nekoliko različitih značenja:
Horizontalni pomak I vertikalni pomak- horizontalni, odnosno vertikalni pomak. Ove vrijednosti pokazuju u kojem će smjeru objekt bacati svoju sjenu:
Radijus zamućenja I radijus širenja malo kompliciranije. Koja je razlika? Pogledajmo primjer s dva elementa, gdje su vrijednosti radijus zamućenja razlikovati se:
Rub sjene jednostavno je zamagljen. S 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.
tekst-sjena
Sintaksa je vrlo slična kutija-sjena:
Značenja su slična, ali ne širenje-sjena. Primjer upotrebe:
Umetak u box-shadow
Da biste "okrenuli" sjenu unutar objekta, morate dodati umetnuti u CSS-u:
Nakon što shvatite osnovnu sintaksu box-shadow, vrlo je lako razumjeti kako implementirati unutarnje sjene. Vrijednosti su i dalje iste, možete dodati boju (RGB u hex):
Boja je u RGB formatu, alfa vrijednost je odgovorna za transparentnost sjene:
Slike sa sjenama
Dodavanje unutarnje sjene slici malo je teže nego dodavanje obične sjene div. Za početak, ovdje je uobičajeni kod slike: 
Logično je pretpostaviti da možete dodati sjenu ovako:
Img (box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )
Ali sjena 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 omotati sliku u redovnu div:
Div (visina: 200px; širina: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img (visina: 200px; širina: 400px; položaj: relativan; z-index: -2 ;)
Sve radi, ali moramo dodati malo dodatnih HTML i CSS oznaka. Drugi način je postaviti sliku kao pozadinu željenog bloka:
Div (visina: 200px; širina: 400px; pozadina: url(http://lorempixum.com/400/200/transport/2); box-shadow: umetnuto 0px 0px 10px rgba(0,0,0,0.9); )
Ovo se može dogoditi kada koristite unutarnje sjene:
Umetak u sjenu teksta
Da biste implementirali unutarnju sjenku 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 što se događa:
Dodavanje tajnog sastojka pozadinski isječak koji odsijeca sve što se proteže izvan teksta (na tamnu pozadinu):
H1 (boja-pozadine: #565656; boja: prozirna; sjena teksta: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: tekst; -moz-background-clip: tekst; background-clip: tekst ;)
Ispalo je gotovo točno ono što nam je trebalo. Sada samo malo potamnimo tekst (alfa), a rezultat je:
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; na primjer, za dobivanje prozirne sjene prikladan je RGBA format; takva sjena će 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 su 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.
Uobičajene sjene lako je implementirati korištenjem box-shadow ili text-shadow. Ali što ako trebate napraviti unutarnje sjene? Ovaj članak opisuje kako napraviti te sjene sa samo nekoliko redaka koda.
Sintaksa
Prvo, pogledajmo dva glavna načina za implementaciju sjena u CSS.kutija-sjena
Oblikovati kutija-sjena sadrži nekoliko različitih značenja:
Horizontalni pomak I vertikalni pomak- horizontalni, odnosno vertikalni pomak. Ove vrijednosti pokazuju u kojem će smjeru objekt bacati svoju sjenu:
Radijus zamućenja I radijus širenja malo kompliciranije. Koja je razlika? Pogledajmo primjer s dva elementa, gdje su vrijednosti radijus zamućenja razlikovati se:
Rub sjene jednostavno je zamagljen. S 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.
tekst-sjena
Sintaksa je vrlo slična kutija-sjena:
Značenja su slična, ali ne širenje-sjena. Primjer upotrebe:
Umetak u box-shadow
Da biste "okrenuli" sjenu unutar objekta, morate dodati umetnuti u CSS-u:
Nakon što shvatite osnovnu sintaksu box-shadow, vrlo je lako razumjeti kako implementirati unutarnje sjene. Vrijednosti su i dalje iste, možete dodati boju (RGB u hex):
Boja je u RGB formatu, alfa vrijednost je odgovorna za transparentnost sjene:
Slike sa sjenama
Dodavanje unutarnje sjene slici malo je teže nego dodavanje obične sjene div. Za početak, ovdje je uobičajeni kod slike:
Logično je pretpostaviti da možete dodati sjenu ovako:
Img (box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )
Ali sjena 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 omotati sliku u redovnu div:
Div (visina: 200px; širina: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img (visina: 200px; širina: 400px; položaj: relativan; z-index: -2 ;)
Sve radi, ali moramo dodati malo dodatnih HTML i CSS oznaka. Drugi način je postaviti sliku kao pozadinu željenog bloka:
Div (visina: 200px; širina: 400px; pozadina: url(http://lorempixum.com/400/200/transport/2); box-shadow: umetnuto 0px 0px 10px rgba(0,0,0,0.9); )
Ovo se može dogoditi kada koristite unutarnje sjene:
Umetak u sjenu teksta
Da biste implementirali unutarnju sjenku 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 što se događa:
Dodavanje tajnog sastojka pozadinski isječak koji odsijeca sve što se proteže izvan teksta (na tamnu pozadinu):
H1 (boja-pozadine: #565656; boja: prozirna; sjena teksta: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: tekst; -moz-background-clip: tekst; background-clip: tekst ;)
Ispalo je gotovo točno ono što nam je trebalo. Sada samo malo potamnimo tekst (alfa), a rezultat je:
Elementima možete dodati sjenu i promijeniti njihov izgled pomoću CSS svojstva box-shadow. Ovaj stil vam omogućuje da ostvarite zanimljive efekte, na primjer, volumen i trodimenzionalnost bloka. Svojstvo podržavaju svi moderni preglednici. Iznimke su IE8 i Opera Mini.
svojstvo box-shadow: sintaksa
Ovaj stil je napisan na sljedeći način:
Okvir-sjena: umetnuti 4px 4px 8px 5px #333333;
Razmotrimo redom za što je odgovoran svaki parametar (s lijeva na desno):
- Ključna riječ umetak: parametar koji se ne mora navesti; crta sjenu iznutra element.
- X pomak: Određuje stupanj do kojeg je sjena vodoravno pomaknuta u odnosu na element. Pozitivna vrijednost znači pomak udesno, negativna - ulijevo. Vrijednost 0 znači da sjena nije pomaknuta.
- Y pomak: Određuje količinu okomitog pomaka sjene. Pozitivna vrijednost znači pomak prema dolje, negativna vrijednost znači pomak prema gore. Vrijednost 0 je sjena bez pomaka.
- Radijus zamućenja: Ovo je stupanj zamućenja sjene. Što je vrijednost veća, to je sjena mutnija. Ako parametar nije naveden, zadana vrijednost je 0. U ovom slučaju, sjena će biti savršeno jasna.
- Proširenje: izborni parametar odgovoran za rastezanje sjene duž obje osi; što je veća vrijednost, veće je rastezanje. Proširenje radi samo ako je prisutan prethodni parametar. Zadana vrijednost je 0.
- Boja sjene: sve je jasno s ovim parametrom - postavlja boju sjene elementa. Zadana boja je crna.
Bilješka. Android preglednici i starije verzije iPhone Safarija zahtijevaju prefiks -webkit- za ispravno funkcioniranje CSS svojstva box-shadow.
Ovo svojstvo može uzeti nekoliko grupa vrijednosti (napraviti nekoliko sjena u isto vrijeme). Da biste to učinili, morat ćete navesti ove grupe parametara odvojene zarezima. Na primjer:
Okvir-sjena: 15px 15px 20px #8b0163, umetnuti 15px 15px 20px #630046;
Box-shadow primjeri
Kako bismo vam pomogli da bolje razumijete snagu i ljepotu CSS svojstva box-shadow, pokazat ćemo vam nekoliko primjera koje možete sigurno primijeniti u praksi. Ovo svojstvo može uvelike transformirati običan blok!
Svjetla sjena
Sjena okvira: 0 2px 4px rgba(0, 0, 0, .25);
Efekt papira
Sjena okvira: 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), umetnuto 0 0 40px rgba(0, 0, 0, .1); 
Više slojeva
Okvir-sjena: 6px 6px #ccc, 12px 12px #a3a3a3; 
Trostruki okvir
Sjena okvira: 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); 
Kutovi
Okvir-sjena: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385; 
Kao što vidite, svojstvo box-shadow ostavlja puno prostora za maštu. Možete transformirati blokove kako želite - glavna stvar je imati osjećaj za mjeru! 😉
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 sjene.
Glavna prednost sjena kreiranih pomoću CSS3 je jednostavnost implementacije i smanjenje 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. Cijeli kod možete 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); )