Elementima možete dodati sjenu i promijeniti ih izgled koristeći CSS svojstvo 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 iPhone verzije Safari zahtijeva prefiks -webkit- za ispravan rad CSS svojstva kutija-sjena.

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.

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.

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 morate dodati malo više HTML označavanje i CSS. Drugi način je postaviti sliku kao pozadinu željeni blok:

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:

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:

Dalje možete vidjeti gotove primjere i kôd 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 kod podignutog bloka. 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); )

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 zamućena 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
:

Ovo su oni prekrasni efekti može 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!!!