Što se može stvoriti u javascriptu. Čemu služi Javascript i čemu služi? Primjeri. Operatori odabira petlje i akcije

Obične sjene lako je implementirati koristeći box-shadow ili tekst-sjena. 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 u RGB format, alfa vrijednost je odgovorna za prozirnost sjene:

Slike sa sjenama

Dodati unutarnja sjena slika je malo teža od uobičajene 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 instalirati tamna pozadina i svijetla sjena:

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:

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 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.

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

1. ključna riječ inset postavlja sjenu unutar elementa;
2. pomaknite sjenu vodoravno (5px - desno, -5px - lijevo);
3. vertikalni pomak (5px - dolje, -5px - gore);
4. radijus zamućenja sjene (0 - oštra sjena);
5. rastezanje sjene (5px - rastezanje, -5px - skupljanje);
6. 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.

Zbog kombinacija različite parametre i njihova značenja, može se dobiti širok izbor vrsta sjena. U tablici 1 prikazuje kod i rezultat do kojeg vodi.

Stol 1. Kombinacije parametara sjene

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

Proizlaziti ovaj primjer prikazano 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

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.