Css ravna sjena. Unutarnje sjene u CSS-u. Pomaknite se malo prema dolje i snažno zamutite

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 u ovom primjeru Sjena bloka je ispod.

HTML

Učinak 1

CSS

poravnanje teksta: središte; položaj: relativno; gore:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*========= ================ ========== * Učinak 1 * ===================== ================= ===========*/ .effect1( -webkit-box-shadow: 0 10px 6px -6px #777; -moz- box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; )

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

Učinak 2

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 2 * == ===================================== =========================*/ .effect2 ( pozicija: relativno; ) .effect2:prije, .effect2:poslije ( z-index: - 1; položaj: apsolutni; sadržaj: ""; dolje: 15px; lijevo: 10px; širina: 50%; vrh: 80%; maks. -širina:300px; pozadina: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform : rotate(-3deg); -moz-transform: rotate(-3deg); -o -transformacija: rotacija(-3deg); -ms-transformacija: rotacija(-3deg); transformacija: rotacija(-3deg); ) . effect2:after ( -webkit-transform: rotacija(3deg); -moz-transformacija: rotacija (3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg) ; desno: 10px; lijevo: auto; )

Efekt sjene 3

Ovdje je sjena od bloka samo s lijeve strane.

HTML

Učinak 3

CSS

Efekt sjene 4

Sjena na desnoj strani.

HTML

Učinak 4

CSS

Efekt sjene 5

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

HTML

Učinak 5

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 5 * == ===================================== =========================*/ .effect5 ( pozicija: relativno; ) .effect5:prije, .effect5:poslije ( z-index: - 1; položaj: apsolutni; sadržaj: ""; dolje: 25px; lijevo: 10px; širina: 50%; vrh: 80%; maks. -širina:300px; pozadina: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform : rotate(-8deg); -moz-transform: rotate(-8deg); -o -transformacija: rotacija(-8deg); -ms-transformacija: rotacija(-8deg); transformacija: rotacija(-8deg); ) . effect5:after ( -webkit-transform: rotacija(8deg); -moz-transformacija: rotacija (8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg) ; desno: 10px; lijevo: auto; )

Efekt sjene 6

Ovdje je učinak zakrivljenih sjena na dnu bloka.

HTML

Učinak 6

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 6 * == ===================================== =========================*/ .effect6 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuto; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuti; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) umetnuti; ) .effect6:before, .effect6:after ( sadržaj:""; pozicija:apsolutno; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0 ,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50% ; bottom:0; left:10px; right:10px; -moz-border-radius: 100px / 10px; border-radius:100px / 10px; ) .effect6:after (right:10px; left:auto; -webkit-transform :skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate (3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transformacija:koso(8deg) rotacija(3deg); transformacija:koso(8deg) rotacija(3deg); )

Efekt sjene 7

Isti efekt je samo sjena ispod i iznad bloka.

HTML

Učinak 7

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 7 * == ===================================== =========================*/ .effect7 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuto; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuti; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) umetnuti; ) .effect7:before, .effect7:after ( sadržaj:""; pozicija:apsolutno; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0 ,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect7:after (right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:kew(8deg) rotate( 3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transformacija:koso(8deg) rotacija(3deg); transformacija:koso(8deg) rotacija(3deg); )

Efekt sjene 8

Učinak zakrivljenih sjena na stranama bloka.

HTML

Učinak 8

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 8 * == ===================================== =========================*/ .effect8 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuto; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuti; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) umetnuti; ) .effect8:before, .effect8:after ( sadržaj:""; pozicija:apsolutno; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0,0.8); -moz-box-shadow:0 0 20px rgba(0 ,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect8:after (right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:kew(8deg) rotate( 3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transformacija:koso(8deg) rotacija(3deg); transformacija:koso(8deg) rotacija(3deg); )

To je sve, dragi prijatelji. Ako vam nešto nije jasno, svakako pitajte u komentarima. Vidimo se uskoro.

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. Vlasništvo podržano od svih 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- da bi CSS svojstvo box-shadow radilo ispravno.

Ova nekretnina može uzeti nekoliko skupina 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 biste bolje razumjeli snagu i ljepotu CSS svojstva box-shadow, pokazat ćemo nekoliko primjera koji se mogu sigurno koristiti 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.

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

html (

pozadina : #fff ;

tijelo(

širina: 80%;

margina: 0 auto;

box-shadow: -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? Ovaj točna kopija područje elementa koji 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. Ova vrijednost Nije ga potrebno unijeti; 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 prihvaća sve 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; )

html (
pozadina : #fff ;
tijelo(
širina: 80%;
margina: 0 auto;
boja pozadine: rgba (150,60,60,0.54)
box-shadow : -1px 5px 5px 5px rgba (77,63,63,0.88 ) umetnuti ;

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

html (
pozadina : #fff ;
tijelo(
širina: 80%;
margina: 0 auto;
boja pozadine: rgba (150,60,60,0.54)
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, zapišite klasu gumba za nju i bilo koju tekstualnu 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.

kratka informacija

CSS verzije

CSS 1 CSS 2 CSS 2.1 CSS 3

Opis

Dodaje sjenu elementu. Moguće je koristiti nekoliko sjena, navodeći njihove parametre odvojene zarezima; prilikom primjene sjena, prva sjena na popisu bit će viša, posljednja niža. Ako je radijus zaobljenja naveden za element preko svojstva border-radius, tada će sjena također imati zaobljene kutove. Dodavanje sjene povećava širinu elementa, pa se u pregledniku može pojaviti vodoravna traka za pomicanje.

Sintaksa

box-shadow: nema |<тень> [,<тень>]*
Gdje<тень>:
umetnuti<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>

Vrijednosti
none Otkazuje dodavanje sjene. umetak Sjena je nacrtana unutar elementa. Izborni parametar. x pomak Horizontalni pomak sjene u odnosu na element. Pozitivna vrijednost ovog parametra pomiče sjenu udesno, negativna vrijednost pomiče je ulijevo. Potreban parametar. y pomak Vertikalni pomak sjene u odnosu na element. Pozitivna vrijednost pomiče sjenu prema dolje, negativna vrijednost pomiče je prema gore. Potreban parametar. blur Postavlja radijus zamućenja sjene. Što je ova vrijednost viša, to je sjena više izglađena, postaje šira i svjetlija. Ako ovaj parametar nije naveden, zadana vrijednost je postavljena na 0, što će sjenu učiniti oštrijom, a ne mutnom. rastezanje Pozitivna vrijednost rasteže sjenu, negativna vrijednost, naprotiv, sažima je. Ako ovaj parametar nije naveden, zadana vrijednost je 0, što će uzrokovati da sjena bude iste veličine kao element. boja Boja sjene u bilo kojem dostupnom CSS formatu, zadana sjena je crna. Izborni parametar.
Moguće je odrediti nekoliko sjena, odvajajući njihove parametre zarezom. U obzir se uzima sljedeći redoslijed: prva sjena na popisu nalazi se na samom vrhu, posljednja na popisu na samom dnu.

HTML5 CSS3 IE Cr Op Sa Fx
kutija-sjena
Bi li citrusi živjeli u šikarama juga? Da, ali lažna kopija!

Rezultat primjera prikazan je na sl. 1.

Riža. 1. Pogled u sjeni u pregledniku Safari

Preglednici

Safari prije verzije 5.1, Chrome prije verzije 10.0, Android prije verzije 4.0 i iOS Safari prije verzije 5.0 podržavaju svojstvo -webkit-box-shadow.

Firefox prije verzije 4.0 podržava svojstvo -moz-box-shadow.

Internet Explorer prije verzije 9.0 ne podržava svojstvo box-shadow; umjesto toga možete koristiti nestandardno svojstvo filtera:
Filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Ovdje: offX - horizontalni pomak sjene; offY — okomiti pomak sjene; boja — boja sjene.

Primjenom filtra padajuće sjene dobiva se jasna, oštra sjenka, tako da možete koristiti filtar sjene za efekt zamućenja.
Filter: progid:DXImageTransform.Microsoft.shadow(smjer=120, boja=#000000, snaga=10);
Ovdje: smjer — kut smjera sjene od 0 do 360°; boja — boja sjene; snaga — pomak sjene u pikselima.

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.

Box Shadow u CSS-u

Kada sam počeo učiti HTML (prije nekih 5-6 godina), nisam imao pojma o postojanju CSS-a, a prilikom izrade stranice morao sam sjenu blokova napraviti kao sliku.

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 :

Box Shadow u CSS-u

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

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;

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