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.

Kombiniranjem različitih parametara i njihovih vrijednosti, možete dobiti široku paletu vrsta sjena. U tablici 1 prikazuje kod i rezultat do kojeg vodi.

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

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

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.

Pozdrav, dragi čitatelji. Danas ćemo raditi s vama lijepa sjena za blokove kada CSS pomoć . 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

CSS

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

CSS

Efekt sjene 3

Ovdje je sjena od bloka samo s lijeve strane.

HTML

CSS

Efekt sjene 4

Sjena na desnoj strani.

HTML

CSS

Efekt sjene 5

U ovom slučaju, sjena s obje strane se jače pomaknula prema dolje.

HTML

CSS

Efekt sjene 6

Ovdje je učinak zakrivljenih sjena na dnu bloka.

HTML

CSS

Efekt sjene 7

Isti efekt je samo sjena ispod i iznad bloka.

HTML

CSS

Efekt sjene 8

Učinak zakrivljenih sjena na stranama bloka.

HTML

CSS

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 kojeg možete dobiti sjenu zaobljeni kutovi. 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:

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:

Ako želite proširiti podršku za neke preglednike, uključujući mobilne iOS 3.2 - 4.3 I Android 2.1 - 3, tada je preporučljivo koristiti prefikse proizvođača i koristiti sljedeću sintaksu (u primjerima u članku, sintaksa će se koristiti samo za moderne preglednike):

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 vam odmah skrenuti pozornost na činjenicu da možete izravno odrediti 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 237 px sa 232 px na veličinu slike, tako da u ovoj fazi obuke nismo morali skalirati sliku kako bi odgovarala elementu i utjecati na one CSS svojstva, koji se planiraju proučavati u kasnijoj fazi (u članku 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 ključnu riječ inset u deklaraciji, koja 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]

Block shadow izvrstan je trodimenzionalni efekt koji blokovima web stranica daje realizam i volumen. Kada sam počeo studirati (prije nekih 5-6 godina), nisam imao pojma o postojanju, a prilikom izrade stranice morao sam sjenu blokova učiniti slikom. Bilo je vrlo nezgodno i nije uvijek išlo kako sam želio. Zahvaljujući snazi ​​CSS-a koji je olakšao rad web dizajnerima. Danas ću vam pokazati kako stvoriti sjenu za blokove u CSS-u.

Da biste dodali sjenu u CSS, upotrijebite svojstvo kutija-sjena .

1. pomaknite sjenu vodoravno (do 100px udesno, do -100px ulijevo);
2. vertikalni pomak (do 100px prema dolje, do -100px prema gore);
3. zamućenje sjene (0 - jasna sjena, 100 - vrlo mutna sjena);
4. rastezanje sjene (do 100px - rastezanje, do -100px - kompresija);
5. boja sjene;
6. umetnuti - sjena je unutar elementa, bez umetnutog sjena će biti prema van.

Proizlaziti :

Stol sa sjenama:

kodirati	Primjer:
okvir-sjena: 0px 13px 17px -6px #000000;
okvir-sjena: 10px -10px 0px -6px #000000;
okvir-sjena: 10px 13px 0px -6px #000000;
okvir-sjena: 1px 1px 32px -6px #000000;
okvir-sjena: -1px 23px 41px -25px #000000;
okvir-sjena: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 umetnuto;
okvir-sjena: 7px 10px 23px -8px #92a9e7;

Pomoću sjene možete stvoriti trodimenzionalni blok:

Kodirati	Primjer
okvir-sjena: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px rgb(188,163,3), 6px 5px rgb(215,190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 8px 8px rgb(185,160,0), 9px 8px rgb(212,187,27), 9px 9px rgb(184,159,0);
box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193) ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163) ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188) ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px rgb(216,191, 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), -7px - 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px rgb(184,159,0) );
okvir-sjena: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193) ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 5px -5px rgb(188,163) ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), 8px -7px rgb(213,188) ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 ( širina: 70%; maks. širina: 550 px; margina: 10 px automatski; ispuna: 1em; sjena okvira: 0 1 px 4 px rgba(0, 0, 0, .3), -23 px 0 20 px -23 px rgba (0) , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) umetnuto; )

Proizlaziti :

Blok1 (širina: 30%; maksimalna širina: 550px; margina: 2em auto; padding: 1em; pozadina: #DADADA; okvir-sjena: 6px 6px #BBBBBB, 12px 12px #919191; )

Proizlaziti :

Blok1 ( širina: 30%; margina: 0 auto; padding: 2em; box-shadow: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399; )

Proizlaziti :

Pomoću sjene možete napraviti prekrasan okvir.

Prekrasan okvir koristeći svojstvakutija- sjena

Blok1 ( širina: 20%; maks. širina: 250 px; margina: 0 automatski; ispuna: 1em; obrub: 2 px isprekidana #999; sjena okvira: 0 0 0 1px #999, umetnuti 0 0 0 1px #999; )
Proizlaziti
:

Blok1 (širina: 30%; maksimalna širina: 250 px; margina: 2em auto; padding: 4em; pozadina: #dcc005; box-shadow: 0 0 4em 4em #fff umetnut; )
Proizlaziti
:

Blok1 (max-width: 250px; margin: 0 auto; padding: 1em; border-radius: 10px; background: rgb(100,100,100) radial-gradient(krug na 0 0, rgba(255,255,255,.65), rgba(255,255,255, .35)); box-shadow: umetnuti rgba(0,0,0,.5) -3px -3px 8px, umetnuti rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
Proizlaziti
:


 
 
 
 
 
 
 

 

 
web stranica
 

 







Proizlaziti
:

Ovi prekrasni efekti mogu se postići korištenjem sjena u CSS-u.  Smislite nešto novo i originalno, sve je u vašim rukama.  Imate znanje i sposobnosti. 
A ovih dana ću objaviti članak o tome kako možete stvarati bez Photoshopa.  Dakle, budite u središtu događaja i pretplatite se na ažuriranja mog bloga.  Ne propustite temu koja vas zanima.  E pa to je to, sretno!!!
Objašnjenja:
, - Svojstva CSS jezika koja se koriste za stvaranje sjena.
, , — parametri svojstva sjene.
, , , — CSS svojstva, odgovorna za promjenu veličine i lokacije elemenata.
— oznaka, odgovorna za stvaranje veza.

Selektori su svojevrsne poveznice uz pomoć kojih CSS određuje koji elementi trebaju primijeniti određene stilove.
Hover je birač stanja.
— svojstvo promjene animiranog objekta.
Sjene se često koriste za postizanje trodimenzionalnog učinka.  Omogućuju vam da tekstovima i blokovima date jedinstveni stil, au kombinaciji s posebnim fontovima možete postići izvrstan učinak.

CSS nam nudi toliko prostora za maštu i eksperimentiranje da će vam trebati godine da ih sve isprobate.
U ovom ćemo članku detaljno opisati stvaranje sjena u CSS-u.  Uz uobičajene vanjske sjene, pokazat ćemo vam kako izraditi unutarnje i državne sjene.
CSS - sjena okvira.  box-shadow svojstvo

html( pozadina: #fff; ) tijelo (širina: 80%; margina: 0 automatski; boja pozadine: rgba(150,60,60,0.54) sjena okvira: -1px 5px 5px 5px rgba(77,63,63) ,0,88) ) 
Alat nam omogućuje stvaranje jedne ili više sjena oko bloka, bilo kojom bojom.
U biti, što je sjena?  Ovo je točna kopija područja elementa, koja ima određenu boju i položaj.  Ovi se parametri mogu postaviti pomoću svojstva box-shadow.
Svojstva sjene koriste se ovim redoslijedom:
Pomaknite se vodoravno.
Kreći se okomito.
Razina nejasnoće.
Istezanje.
Boja sjene.
Ovo je redoslijed kojim treba navesti parametre sjene.  Glavna stvar je ne brkati vrijednost, budući da su prva 4 postavljena na isti način, koristeći numeričke vrijednosti - , , i tako dalje.

Prvi parametar, koji se zove — pomiče sjenu vodoravno u odnosu na blok.  Prihvaća sve vrijednosti, uključujući negativne.
Negativne vrijednosti pomiču sjenu ulijevo, a pozitivne vrijednosti pomiču sjenu udesno.  Vrijednost parametra može biti jednaka 0 kada se zamućuju sjene duž okomite osi.
Sljedeća po redu je imovina .  Odgovoran za okomito pomicanje sjene.  Također prihvaća sve vrijednosti - pozitivne i negativne.  Negativne vrijednosti pomiču sjenu gore, a pozitivne vrijednosti pomiču sjenu prema dolje.
Ovaj se parametar može postaviti na 0. Obično se koristi za horizontalno zamućenje sjene.
Pažnja!  Preporučujemo da vrijednost navedete u pikselima.  Možete koristiti druge vrijednosti - , , % i drugi, ali to se ne preporučuje.  Sve ove vrijednosti su prilično velike za stvaranje sjena.  Njihovim određivanjem možete pretjerati s veličinama.

3 vrijednost - ili zamutiti.  Nije potrebno unijeti ovu vrijednost; bez navođenja, sjene će i dalje raditi.
Navedena vrijednost određuje radijus duž kojeg će sjena biti zamućena.  Negativne vrijednosti nisu naznačene.
Ovdje se mogu koristiti i veće vrijednosti.  Jako zamućenje pomoći će u stvaranju šarenog efekta, ali samo u nekim situacijama.
Pretposljednja vrijednost, koja je odgovorna za rastezanje sjene.  Ovo također nije obavezno, ali može dodati malo boje vašoj sjeni.
Širenje se događa zbog istezanja središnjeg čvrstog dijela sjene koji se nalazi između zamućenih rubova.
Ovaj parametar može prihvatiti bilo koje vrijednosti, pozitivne i negativne.  Pozitivne vrijednosti rastežu sjenu, dok je negativne vrijednosti skupljaju.
I posljednji parametar - .  Također ga nije potrebno specificirati, jer sjena okvira prema zadanim postavkama ima vlastitu boju - crnu.
Za promjenu boje prikladan je bilo koji sustav boja - kao i standardne boje.
Pažnja!  Ako želite da svojstvo radi u Safariju, tada ovaj parametar mora biti naveden, čak i ako koristite standardnu ​​crnu boju.
Unutarnja sjena - CSS

html( pozadina: #fff; ) tijelo (širina: 80%; margina: 0 automatski; boja pozadine: rgba(150,60,60,0.54) sjena okvira: -1px 5px 5px 5px rgba(77,63,63) ,0.88) umetak; ) 
Dakle, pogledajmo prvi primjer korištenja sjena.  Ovdje ćemo pogledati stvaranje unutarnje sjene za blok tijela.
Za početak otvorite naš HTML dokument i ispunite ga.  Ne morate navesti nikakve oznake, nemojte ispunjavati sadržaj, glavna stvar je stvoriti oznaku .
Otvorite naš CSS dokument i napišite oznaku , to će biti naš glavni izbornik.
Dalje otvaramo naramenice i zapišite nekretninu .  Postavite lokaciju, zamutite, rastegnite.  Već znate kako postaviti ove vrijednosti.  Nakon toga smo postavili boju sjene, učinili smo je bijelom, ali možete je postaviti po svom ukusu.
Sada ono najvažnije.  Kako biste stvorili unutarnju sjenu bloka u CSS-u, trebate navesti umetnutu vrijednost.  Možete je odrediti odmah nakon definiranja boje.
Kao rezultat toga, završili smo s ovim blokom:
HTML/CSS - sjena teksta

html( pozadina: #fff; ) tijelo (širina: 80%; margina: 0 automatski; boja pozadine: rgba(150,60,60,0.54) sjena okvira: -1px 5px 5px 5px rgba(77,63,63) ,0.88) umetak; ) div( margina: 150px; box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88); veličina fonta: 25px; ) 
Stvoreno na sličan način, ali umjesto box-shadowa korištenjem svojstva .  Parametri svojstva su sljedećim redoslijedom.
Horizontalni pomak.
Vertikalni pomak.
Radijus zamućenja.  Nije potrebno.
Boja.
Kao što vidite, u ovoj nekretnini nema mogućnosti rastezanja.  Veličina sjene uvijek će biti identična veličini teksta; to se ne može ispraviti.
Vrlo je prikladno nanositi sjene jednu na drugu.  Da biste to učinili, morate navesti nekoliko skupina parametara
Prva sjena će se nalaziti bliže tekstu, a druga iznad njega.  Podsjeća na rad sa svojstvima obrisa i obruba, ali ovdje možete stvoriti 2, 3 ili više sjena.
Hover Shadows - CSS
Sada pogledajmo stvaranje sjena za određeno stanje.  U našem primjeru koristit ćemo gumb.
Kako biste stvorili sjenu za gumb, prvo ga morate postaviti.  Otvorite oznaku a, napišite klasu gumba za nju i bilo što tekstualna vrijednost, za bolji prikaz.

Prvo, postavimo položaj pomoću svojstva margine i povećajmo gumb na određenu veličinu.  Da biste ga povećali, možete koristiti svojstva širine i visine ili koristiti svojstvo padding.
Sada postavljamo boju pozadine, tekst i okvir.  Naš gumb je spreman, počnimo stvarati sjenu.
Prvo, stvorimo običnu sjenu, male veličine, koristeći box-shadow.  Bit će vidljiv prema zadanim postavkama, bez zadržavanja pokazivača iznad gumba.


Napravimo najjednostavniji učinak - povećajte sjenu.  Možete ga učiniti mutnim ili promijeniti rastezanje prema svom ukusu.
Za najbolji učinak, postavimo svojstvo prijelaza za običnu vezu i postavimo vrijeme na 0,5 s.
Sada imamo sjajan gumb s prekrasnom sjenom koja će se glatko proširiti kada lebdite.

Zaključak
U ovom smo članku naučili o svim osnovnim načinima stvaranja sjena.  Raspravljali smo o svim svojstvima i parametrima sjena.
Sve elemente koji su prikazani na snimkama zaslona možete pronaći u izvornoj mapi.  Ako želite, možete ih sami istražiti i eksperimentirati s vrijednostima.  Možda ćete vi proći puno bolje nego mi.