Elementima možete dodati sjenu i promijeniti je 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 iPhone verzije Safari zahtijeva prefiks -webkit- da bi ispravno radio CSS svojstva box-shadow.

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.

Redoslijed snimanja je suštinski važan. Prva vrijednost je uvijek pomak duž X ose, druga - duž Y ose.

Ako pomak nije potreban duž jedne od osi, postavite ga na nulu:

Class(box-shadow: 0 8px;) – pomaknite senku samo duž Y ose

Rezultat

Class(box-shadow: 8px 8px;) – pomak duž obje ose

Rezultat

Negativna vrijednost za ose senke okvira

Senka će se kretati u suprotnom smeru:

Class(box-shadow: -8px 8px;) – pomaknite senku sa negativnom vrijednošću duž X ose

Rezultat

Radijus zamućenja senke

Treći parametar svojstva box-shadow. 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 duplira dimenzije elementa na koji je primijenjena

Rezultat

Kada je vrijednost veća od nule, rubovi gube definiciju, sjena postaje veća i vizualno svjetlija. Zamućenje se primjenjuje sa svih strana:

Class(box-shadow: 0 0 8px;) – bez pomaka, samo zamućenje

Rezultat

Class(box-shadow: 0 8px 8px;) – pomak Y-ose i zamućenje

Rezultat

Negativna vrijednost se smatra greškom i sjena se uopće neće prikazati.

Radijus rastezanja sjene

Četvrti parametar svojstva box-shadow. Mijenja veličinu sjene u odnosu na element. Proteže se u svim smjerovima:

Class(box-shadow: 0 0 0 8px;) – bez pomaka ili zamućenja, samo rastezanje

Rezultat

U ovom slučaju, sjena je 16 piksela veća od elementa po širini i visini: 8px lijevo + 8px desno i 8px gore + 8px dolje.

Negativna vrijednost rastezanja sjene u CSS-u

Sjena se ne rasteže, već se sužava sa svih strana za određenu vrijednost:

Class(box-shadow: 0 16px 0 -8px;) – smanjite sjenu negativnom vrijednošću

Rezultat

Boja senke

Podrazumevano, boja senke duplira boju fonta: kao u gornjim primerima.

Boja senke je navedena u bilo kom dostupnom CSS formatu:

• #ff0009
• rgb(255, 0, 9)
• hsl(358, 100%, 50%);

Dajte elementu plavu sjenu:

Class(box-shadow: 0 8px #3a8fe7;)

Rezultat

Unutrašnja sjena

Parametar umetnuti prikazuje senku unutar bloka.

Za razliku od gore navedenih opcija, ne postoji strogi redoslijed pisanja. Obje opcije će dati isti rezultat:

Box-shadow: 0 8px #3a8fe7 inset; box-shadow: umetnuti 0 8px #3a8fe7;

Rezultat

Druga opcija je lakša za razumijevanje kada čitate kod.

Nekoliko senki

Više senki je navedeno odvojeno zarezima. Prikaži redoslijed od vrha do dna:

Class( box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )

Rezultat

Ako zamijenite mjesta, plava senka neće biti vidljiva:

Class( box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )

Rezultat

Unutrašnja i vanjska senka se postavljaju istovremeno:

Class( box-shadow: 0 16px #3ae7af, umetnuti 0 8px #3a8fe7; )

Rezultat

Zaobljena senka

Ako je elementu dato svojstvo granica-radijus, senka će imati zaobljene uglove.

Class( box-shadow: 0 16px #3a8fe7; border-radius: 8px; )

Rezultat

Postavljanjem rastezanja sjene povećavamo njeno zaokruživanje. Na primjer, radijus granice je 8 piksela, a rastezanje sjene je 4.

8+4=12px je radijus zaokruživanja sjene.

Class( box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )

Rezultat

Isti princip vrijedi i za smanjenje sjene kada je vrijednost negativna.

8+(-4)=4px - dobijamo duplo manje zaokruživanje senke.

Ako je kompresija senke veća od radijusa granice, dobićemo senku sa pravim uglovima. Na primjer, kompresija je 16px.

8+(-16)=(-8), ali file ne može imati negativnu vrijednost i nula će biti primijenjena.

Class( box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )

Rezultat

CSS svojstvo box-shadow Podržavaju svi popularni pretraživači osim Opera Mini.

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 morate dodati još malo HTML markup i CSS. Drugi način je da postavite sliku kao pozadinu željeni blok:

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

Da implementirate unutrašnju sjenku teksta, jednostavno dodajte kodu umetnuti ne radi:

Da biste riješili, prvo primijenite na zaglavlje h1 instalirati tamna pozadina i lagana senka:

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; sjena 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:

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:

Dalje možete vidjeti gotovi primjeri 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 kod podignutog bloka. 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); )

Block shadow je odličan trodimenzionalni efekat koji blokovima web stranicama daje realističnost i volumen. Kada sam počeo da studiram (prije nekih 5-6 godina), nisam imao pojma o postojanju, a prilikom kreiranja sajta morao sam napraviti sliku od senke blokova. Bilo je veoma nezgodno, i nije uvek išlo onako kako sam želeo. Zahvaljujući snazi ​​CSS-a, koji je olakšao rad web dizajnerima. Danas ću vam pokazati kako napraviti sjenu za blokove u CSS-u.

Da biste dodali sjenu u CSS, koristite svojstvo box-shadow .

1. pomaknite sjenu horizontalno (do 100px udesno, do -100px ulijevo);
2. vertikalni pomak (do 100px dolje, do -100px gore);
3. zamućenje senke (0 - čista senka, 100 - veoma mutna senka);
4. rastezanje senke (do 100px - rastezanje, do -100px - kompresija);
5. boja senke;
6. umetak - sjena je unutar elementa, bez umetanja sjena će biti van.

Rezultat :

Sto sa senkama:

kod	primjer:
box-shadow: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
box-shadow: 10px 13px 0px -6px #000000;
box-shadow: 1px 1px 32px -6px #000000;
box-shadow: -1px 23px 41px -25px #000000;
box-shadow: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 umetnuti;
box-shadow: 7px 10px 23px -8px #92a9e7;

Koristeći senku možete kreirati trodimenzionalni blok:

Kod	Primjer
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), 31px,31px,31px,31px,31px 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(189,164,4), 5px 5px rgb(189,164,4), 5px 5px rgb(189,164,4) 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), 8g16px,985px 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), -31px 92px(191,166,6), -3px32px ,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), -5gb61px(216,191,31), -5gb31px ,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), -8rgb (7px 7px1 px ,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,19,116 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(185,160,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), 3px1,391px -2px ,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), 5gb631px (5gb631px ,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), 8rg1px -78px ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 ( širina: 70%; maksimalna širina: 550px; margina: 10px auto; padding: 1em; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0 , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) umetnuti; )

Rezultat :

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

Rezultat :

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; )

Rezultat :

Koristeći senku možete napraviti prekrasan okvir.

Prekrasan okvir koji koristi svojstvakutija- senka

Blok1 ( širina: 20%; maksimalna širina: 250px; margina: 0 auto; padding: 1em; granica: 2px isprekidana #999; sjena okvira: 0 0 0 1px #999, umetnuti 0 0 0 1px #999; )
Rezultat
:

Blok1 ( širina: 30%; maksimalna širina: 250px; margina: 2em auto; padding: 4em; pozadina: #dcc005; sjena okvira: 0 0 4em 4em #fff umetnuti; )
Rezultat
:

Blok1 (maksimalna širina: 250px; margina: 0 auto; padding: 1em; radijus granice: 10px; pozadina: rgb(100,100,100) radijalni gradijent (krug na 0 0, rgba(255,255,255,.65,255,255,25rg .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; )
Rezultat
:


 
 
 
 
 
 
 

 

 
web stranica
 

 

Rezultat
:

Ovo su oni prelepi efekti može se postići korištenjem senki u CSS-u.  Smislite nešto novo i originalno, sve je u vašim rukama.  Imate znanja i sposobnosti. 
A jednog od ovih dana objavit ću članak o tome kako možete kreirati bez korištenja Photoshopa.  Dakle, budite u centru stvari i pretplatite se na ažuriranja mog bloga.  Ne propustite temu koja vas zanima.  E, to je to, sretno!!!