Css umbră plată. Umbre interioare în CSS. Schimbați în jos o distanță mică și estompați puternic

Bună ziua, dragi cititori. Astăzi vom face cu tine umbra frumoasa pentru blocuri cand Ajutor CSS . Cred că acest lucru vă va fi foarte util, mai ales dacă faceți șabloane. Și blocurile cu umbre arată foarte atractiv și modern.

Suport pentru browser

Practic, toate browserele moderne acceptă efecte de umbră:

Internet Explorer 9.0 și o versiune ulterioară;
Firefox 3.5 și versiuni ulterioare;
Chrome 1 și superior;
Safari 3 și mai sus;
Opera 10.5 și o versiune ulterioară.

De asemenea, aș dori să menționez un punct important: pentru unele browsere vom folosi anumite prefixe. Folosit pentru Firefox -moz-, pentru Chrome și Safari trebuie să utilizați prefixul -webkit.

Ei bine, acum să trecem la partea cea mai interesantă. Să ne uităm la toate umbrele separat, vor fi 8 efecte.

Efectul de umbră 1

ÎN în acest exemplu Umbra blocului este dedesubt.

HTML

Efectul 1

CSS

text-align:center; poziție:relativă; sus: 80px; ) .box ( lățime:70%; înălțime:200px; fundal:#FFF; margine:40px automat; ) /*========= =============== ========== * Efectul 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; )

Efectul de umbră 2

În acest exemplu, umbra din bloc merge la stânga și la dreapta, dar nu există niciuna în mijloc. Se dovedește a fi un efect foarte interesant.

HTML

Efectul 2

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (lățime:70%; înălțime:200px; fundal:#FFF; margin:40px automat; ) /*====== ==================================================== ========= * Efectul 2 * == ===================================== =========================*/ .effect2 (poziție: relativ; ) .effect2:before, .effect2:after (z-index: - 1; poziție: absolut; conținut: „"; jos: 15px; stânga: 10px; lățime: 50%; sus: 80%; -lățime maximă: 300px; fundal: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotire(-3deg); -moz-transform: rotire(-3deg); -o -transform: rotiți(-3grade); -ms-transform: rotiți(-3deg); transform: rotiți(-3deg); ) . effect2:după ( -webkit-transform: rotiți(3deg); -moz-transform: rotiți (3deg); -o-transform: rotire(3deg); -ms-transform: rotire (3deg); transformare: rotire (3deg) ; dreapta: 10px; stânga: automat; )

Efectul de umbră 3

Aici umbra blocului este doar în stânga.

HTML

Efectul 3

CSS

Efectul de umbră 4

Umbra pe dreapta.

HTML

Efectul 4

CSS

Efectul de umbră 5

În acest caz, umbra de pe ambele părți s-a deplasat mai puternic în jos.

HTML

Efectul 5

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (lățime:70%; înălțime:200px; fundal:#FFF; margin:40px automat; ) /*====== ==================================================== ========= * Efectul 5 * == ===================================== =========================*/ .effect5 (poziție: relativ; ) .effect5:înainte, .effect5:după (z-index: - 1; poziție: absolut; conținut: „"; jos: 25px; stânga: 10px; lățime: 50%; sus: 80%; -lățime maximă: 300px; fundal: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform: rotire(-8deg); -moz-transform: rotire(-8deg); -o -transform: rotiți(-8deg); -ms-transform: rotiți(-8deg); transformați: rotiți(-8deg); ) . effect5:după ( -webkit-transform: rotiți(8deg); -moz-transform: rotiți (8deg); -o-transform: rotire(8deg); -ms-transform: rotire (8deg); transformare: rotire (8deg) ; dreapta: 10px; stânga: automat; )

Efectul de umbră 6

Iată efectul umbrelor curbate din partea de jos a blocului.

HTML

Efectul 6

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (lățime:70%; înălțime:200px; fundal:#FFF; margin:40px automat; ) /*====== ==================================================== ========= * Efectul 6 * == ===================================== =========================*/ .effect6 ( poziție:relativ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0,1) inserție; umbră casetă: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inserție; ) .effect6:before, .effect6:după ( conținut:""; poziție:absolut; 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); sus:50%; jos:0; stânga:10px; dreapta:10px; -moz-border-radius: 100px / 10px; border-radius:100px / 10px; ) .effect6:after (dreapta:10px; stânga:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate (3grade);-ms-transform:skew(8deg) rotire(3deg); -o-transform:skew(8deg) rotire(3deg); transform:skew(8deg) rotire(3deg); )

Efectul de umbră 7

Același efect este doar o umbră sub și deasupra blocului.

HTML

Efectul 7

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (lățime:70%; înălțime:200px; fundal:#FFF; margin:40px automat; ) /*====== ==================================================== ========= * Efectul 7 * == ===================================== =========================*/ .effect7 ( poziție:relativ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0,1) inserție; umbră casetă: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inserție; ) .effect7:before, .effect7:după ( conținut:""; poziție:absolut; 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); sus:0; jos:0; stânga:10px; dreapta:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect7:after (dreapta:10px; stânga:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate( 3deg); -ms-transform:skew(8deg) rotire(3deg); -o-transform:skew(8deg) rotire(3deg); transform:skew(8deg) rotire(3deg); )

Efectul de umbră 8

Efectul umbrelor curbate pe părțile laterale ale blocului.

HTML

Efectul 8

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box (lățime:70%; înălțime:200px; fundal:#FFF; margin:40px automat; ) /*====== ==================================================== ========= * Efectul 8 * == ===================================== =========================*/ .effect8 ( poziție:relativ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0,1) inserție; umbră casetă: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) inserție; ) .effect8:before, .effect8:după ( conținut:""; poziție:absolut; 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); sus:10px; jos:10px; stânga:0; dreapta:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect8:after (dreapta:10px; stânga:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate( 3deg); -ms-transform:skew(8deg) rotire(3deg); -o-transform:skew(8deg) rotire(3deg); transform:skew(8deg) rotire(3deg); )

Asta e tot, dragi prieteni. Dacă nu înțelegeți nimic, asigurați-vă că întrebați în comentarii. Pe curând.

Puteți adăuga umbră elementelor și o puteți modifica aspect folosind proprietatea CSS box-shadow. Acest stil vă permite să realizați efecte interesante, de exemplu, volumul și tridimensionalitatea blocului. Proprietate susținută de toată lumea browsere moderne. Excepțiile sunt IE8 și Opera Mini.

proprietate box-shadow: sintaxă

Acest stil este scris astfel:

Box-shadow: insert 4px 4px 8px 5px #333333;

Să luăm în ordine de ce este responsabil fiecare parametru (de la stânga la dreapta):

Cuvânt cheie inset: parametru care nu trebuie specificat; desenează o umbră interior element.
X offset: Specifică gradul în care umbra este decalată orizontal în raport cu elementul. O valoare pozitivă înseamnă deplasare la dreapta, negativă - la stânga. O valoare de 0 înseamnă că umbra nu este compensată.
Y Shift: Specifică cantitatea de deplasare verticală a umbrei. O valoare pozitivă înseamnă o schimbare în jos, o valoare negativă înseamnă o schimbare în sus. O valoare de 0 este o umbră fără deplasare.
Raza de estompare: Acesta este gradul de estompare a umbrei. Cu cât valoarea este mai mare, cu atât umbra este mai neclară. Dacă parametrul nu este specificat, valoarea implicită este 0. În acest caz, umbra va fi perfect clară.
Extensie: parametru opțional responsabil cu întinderea umbrei de-a lungul ambelor axe; cu cât valoarea este mai mare, cu atât este mai mare întinderea. Extensia funcționează numai dacă parametrul anterior este prezent. Valoarea implicită este 0.
Culoarea umbrei: totul este clar cu acest parametru - setează culoarea umbrei elementului. Culoarea implicită este negru.

Notă. Browsere Android si mai vechi versiuni pentru iPhone Safari necesită prefixul -webkit- pentru proprietatea CSS box-shadow pentru a funcționa corect.

Această proprietate poate lua mai multe grupuri de valori (a face mai multe umbre în același timp). Pentru a face acest lucru, va trebui să enumerați aceste grupuri de parametri separați prin virgule. De exemplu:

Cutie-umbră: 15px 15px 20px #8b0163, inserție 15px 15px 20px #630046;

Exemple cu umbră

Pentru a înțelege mai bine puterea și frumusețea Proprietăți CSS box-shadow, vom arăta câteva exemple care pot fi folosite în siguranță în practică. Această proprietate poate transforma foarte mult un bloc obișnuit!

Umbră ușoară

Box-shadow: 0 2px 4px rgba(0, 0, 0, .25);

Efect de hârtie

Cutie-umbră: 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), inset 0 0 40px rgba(0, 0, 0, .1);

Straturi multiple

Box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3;

Cadru triplu

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

Colțuri

Cutie-umbră: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385;

După cum puteți vedea, proprietatea box-shadow lasă mult loc imaginației. Puteți transforma blocurile după cum doriți - principalul lucru este să aveți simțul proporției! 😉

În capitolul următor, veți explora proprietățile de lățime și înălțime, care determină dimensiunea elementelor.

Explicatii:

, - Proprietățile limbajului CSS utilizate pentru a crea umbre.
, , — parametrii proprietății umbră.
, , , — Proprietăți CSS, responsabile pentru modificarea dimensiunii și locației elementelor.
— tag, responsabil pentru crearea de link-uri.

Selectorii sunt un fel de legături cu ajutorul cărora CSS determină ce elemente ar trebui să aplice anumite stiluri.

Hover este un selector de stare.

— proprietatea schimbării obiectului animat.

Umbrele sunt adesea folosite pentru a obține un efect tridimensional. Ele vă permit să oferiți textelor și blocurilor un stil unic, iar în combinație cu fonturi speciale, puteți obține un efect grozav.

CSS ne oferă atât de mult spațiu pentru imaginație și experimentare, încât vă va lua ani de zile să le încercați pe toate.

În acest articol, vom intra în detaliu despre crearea umbrelor în CSS. Pe lângă umbrele exterioare obișnuite, vă vom arăta cum să creați umbre interioare și de stare.

CSS - umbră casetă. proprietate box-shadow

html( fundal: #fff; ) body( lățime: 80%; margine: 0 auto; culoare de fundal: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0,88) )

html (

fundal : #fff ;

corp (

latime: 80%;

marja: 0 auto;

umbră-cutie: -1px 5px 5px 5px rgba (77,63,63,0.88)

Instrumentul ne permite să creăm una sau mai multe umbre în jurul unui bloc, cu orice culoare.

În esență, ce este o umbră? Acest copie exactă zona unui element care are o anumită culoare și locație. Acești parametri pot fi setați folosind proprietatea box-shadow.

Proprietățile umbrelor sunt utilizate în această ordine:

Deplasați-vă pe orizontală.
Deplasați-vă pe verticală.
Nivel de vag.
Întinderea.
Culoarea umbrei.

Aceasta este ordinea în care ar trebui să fie specificați parametrii de umbră. Principalul lucru este să nu confundați valoarea, deoarece primele 4 sunt setate în același mod, folosind valori numerice - , , și așa mai departe.

Primul parametru, care este numit — deplasează umbra orizontal în raport cu blocul. Acceptă orice valoare, inclusiv pe cele negative.

Valorile negative mută umbra spre stânga, iar valorile pozitive mută umbra spre dreapta. Valoarea parametrului poate fi egală cu 0 la estomparea umbrelor de-a lungul axei verticale.

Următorul în ordine este proprietatea . Responsabil pentru mutarea umbrei pe verticală. De asemenea, acceptă orice valori - pozitive și negative. Valorile negative mută umbra în sus, iar valorile pozitive mută umbra în jos.

Acest parametru poate fi setat la 0. Utilizat de obicei pentru estomparea umbrelor orizontale.

Atenţie! Vă recomandăm să specificați valoarea în pixeli. Puteți folosi alte valori - , , % și altele, dar acest lucru nu este recomandat. Toate aceste valori sunt destul de mari pentru a crea umbre. Specificându-le, puteți trece peste bord cu dimensiunile.

3 valoare - sau estompare. Această valoare Nu este necesar să îl introduceți; fără a o specifica, umbrele vor funcționa în continuare.

Valoarea specificată determină raza de-a lungul căreia umbra va fi estompată. Valorile negative nu sunt indicate.

Valorile mai mari pot fi folosite și aici. O estompare puternică va ajuta la crearea unui efect colorat, dar numai în unele situații.

Penultima valoare, care este responsabilă pentru întinderea umbrei. Acest lucru este, de asemenea, opțional, dar poate adăuga puțină culoare umbrei tale.

Expansiunea are loc datorită întinderii părții solide centrale a umbrei, care este situată între marginile neclare.

Acest parametru acceptă orice valoare, atât pozitivă, cât și negativă. Valorile pozitive întind umbra, în timp ce valorile negative o micșorează.

Și ultimul parametru - . De asemenea, nu este necesar să o specificați, deoarece în mod implicit umbra casetei are propria sa culoare - negru.

Pentru a schimba culoarea, orice sistem de culoare este potrivit - precum și culorile standard.

Atenţie! Dacă doriți ca proprietatea să funcționeze în Safari, atunci acest parametru trebuie specificat, chiar dacă utilizați culoarea neagră standard.

Inner Shadow - CSS

html( fundal: #fff; ) body( lățime: 80%; margine: 0 auto; culoare de fundal: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0,88) inserție; )

html (
fundal : #fff ;
corp (
latime: 80%;
marja: 0 auto;
culoare de fundal: rgba (150,60,60,0.54)
box-shadow : -1px 5px 5px 5px rgba (77,63,63,0.88 ) inset ;

Deci, să ne uităm la primul exemplu de utilizare a umbrelor. Aici ne vom uita la crearea unei umbre interioare pentru blocul corporal.

Pentru a începe, deschideți document HTMLși completează-l. Nu trebuie să specificați nicio etichetă, nu completați conținutul, principalul lucru este să creați o etichetă .

Deschideți documentul nostru CSS și scrieți eticheta , va fi selectorul nostru principal.

În continuare deschidem breteleși notează proprietatea . Setați locația, estompați, întindeți. Știți deja cum să setați aceste valori. După aceea, setăm culoarea umbrei, am făcut-o albă, dar o poți seta după bunul plac.

Acum cel mai important lucru. Pentru a crea o umbră interioară a unui bloc în CSS, trebuie să specificați valoarea introdusă. O puteți specifica imediat după definirea culorii.

Ca rezultat, am ajuns cu acest bloc:

HTML/CSS - Text Shadow

html( fundal: #fff; ) body( lățime: 80%; margine: 0 auto; culoare de fundal: rgba(150,60,60,0.54) box-shadow: -1px 5px 5px 5px rgba(77,63,63) ,0,88) insert; ) div( margine: 150px; umbră casetă: -1px 5px 5px 5px rgba(77,63,63,0.88); dimensiunea fontului: 25px; )

html (
fundal : #fff ;
corp (
latime: 80%;
marja: 0 auto;
culoare de fundal: rgba (150,60,60,0.54)
5px rgba(77,63,63,0.88);
dimensiunea fontului: 25px;

Creat într-un mod similar, dar în loc de box-shadow folosind proprietatea . Parametrii proprietății sunt în următoarea ordine.

Deplasare orizontală.

Deplasare pe verticală.

Raza de estompare. Nu este necesar.

Culoare.

După cum puteți vedea, nu există nicio opțiune de întindere în această proprietate. Mărimea umbrei va fi întotdeauna identică cu dimensiunea textului; aceasta nu poate fi corectată.

Este foarte convenabil să aplicați umbre una peste alta. Pentru a face acest lucru, trebuie să enumerați mai multe grupuri de parametri

Prima umbră va fi situată mai aproape de text, iar a doua deasupra acestuia. Amintește de lucrul cu proprietățile de contur și chenar, dar aici puteți crea 2, 3 sau mai multe umbre.

Hover Shadows - CSS

Acum să ne uităm la crearea de umbre pentru o anumită stare. În exemplul nostru vom folosi un buton.

Pentru a crea o umbră pentru un buton, mai întâi trebuie să o plasați. Deschideți eticheta a, notați clasa de buton pentru aceasta și orice valoare de text pentru o afișare mai bună.

Mai întâi, să setăm plasarea utilizând proprietatea marginii și să creștem butonul la o anumită dimensiune. Pentru a o mări, puteți utiliza proprietățile de lățime și înălțime sau puteți utiliza proprietatea de umplutură.

Acum setăm culoarea de fundal, textul și cadrul. Butonul nostru este gata, să începem să creăm umbra.

Mai întâi, să creăm o umbră obișnuită, de dimensiuni mici, folosind box-shadow. Acesta va fi vizibil implicit, fără a trece cursorul peste buton.

Să facem cel mai simplu efect - măriți umbra. Puteți să o faceți neclară sau să modificați întinderea după gustul dvs.

Pentru cel mai bun efect, să setăm proprietatea de tranziție pentru o legătură obișnuită și să setăm timpul la 0,5 secunde.

Acum avem un buton grozav cu o umbră frumoasă, care se va extinde fără probleme atunci când este plasat.

Concluzie

În acest articol, am aflat despre toate modalitățile de bază de a crea umbre. Am discutat despre toate proprietățile și parametrii umbrelor.

Puteți găsi toate elementele care au fost prezentate în capturile de ecran în folderul sursă. Dacă doriți, puteți să le explorați singur și să experimentați cu valorile. Poate te vei descurca mult mai bine decât am făcut noi.

informatie scurta

versiuni CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Descriere

Adaugă o umbră unui element. Este posibil să folosiți mai multe umbre, indicând parametrii acestora separați prin virgule; la aplicarea umbrelor, prima umbră din listă va fi mai mare, ultima mai mică. Dacă pentru un element este specificată o rază de rotunjire prin proprietatea rază-chenar, atunci umbra va avea și colțuri rotunjite. Adăugarea unei umbre mărește lățimea elementului, astfel încât o bară de defilare orizontală poate apărea în browser.

Sintaxă

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

Valori
none Anulează adăugarea unei umbre. inset Umbra este desenată în interiorul elementului. Parametru opțional. x offset Decalajul orizontal al umbrei în raport cu elementul. O valoare pozitivă a acestui parametru mută umbra la dreapta, o valoare negativă o deplasează la stânga. Parametru necesar. y offset Decalajul vertical al umbrei în raport cu elementul. O valoare pozitivă deplasează umbra în jos, o valoare negativă o deplasează în sus. Parametru necesar. estompare Setează raza de estompare a umbrei. Cu cât această valoare este mai mare, cu atât umbra este mai netezită, devenind mai largă și mai deschisă. Dacă acest parametru nu este specificat, valoarea implicită este setată la 0, ceea ce va face umbra mai degrabă clară decât neclară. stretch O valoare pozitivă întinde umbra, o valoare negativă, dimpotrivă, o comprimă. Dacă acest parametru nu este specificat, valoarea implicită este 0, ceea ce va face ca umbra să aibă aceeași dimensiune cu elementul. culoare Culoarea umbrei în orice format CSS disponibil, umbra implicită este neagră. Parametru opțional.
Este posibil să specificați mai multe umbre, separându-le parametrii cu o virgulă. Se ține cont de următoarea ordine: prima umbră din listă este plasată în partea de sus, ultima din listă este în partea de jos.

HTML5 CSS3 IE Cr Op Sa Fx
cutie-umbră
Ar trăi citricele în desișurile din sud? Da, dar o copie falsă!

Rezultatul exemplului este prezentat în Fig. 1.

Orez. 1. Vedere umbră în browserul Safari

Browsere

Safari înainte de versiunea 5.1, Chrome înainte de versiunea 10.0, Android înainte de versiunea 4.0 și iOS Safari înainte de versiunea 5.0 acceptă proprietatea -webkit-box-shadow.

Firefox înainte de versiunea 4.0 acceptă proprietatea -moz-box-shadow.

Internet Explorer înainte de versiunea 9.0 nu acceptă proprietatea box-shadow; în schimb, puteți utiliza proprietatea de filtru non-standard:
Filtru: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Aici: offX - compensarea umbrei orizontale; offY — offset vertical de umbră; culoare — culoarea umbrei.

Aplicarea filtrului de umbră produce o umbră clară și clară, astfel încât să puteți utiliza filtrul de umbră pentru un efect de estompare.
Filtru: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);
Aici: direcția — unghiul de direcție a umbrei de la 0 la 360°; culoare — culoarea umbrei; putere — compensarea umbrei în pixeli.

Block shadow este un efect tridimensional excelent care oferă blocurilor site-ului realism și volum. Când am început să studiez (acum vreo 5-6 ani), habar nu aveam de existență, iar la crearea unui site trebuia să fac din umbra blocurilor o imagine. A fost foarte incomod și nu a funcționat întotdeauna așa cum mi-am dorit. Datorită puterii CSS, care a ușurat munca designerilor web. Astăzi vă voi arăta cum să creați o umbră pentru blocuri în CSS.

Pentru a adăuga o umbră în CSS, utilizați proprietatea cutie-umbră .

1. deplasați umbra pe orizontală (până la 100px la dreapta, până la -100px la stânga);
2. deplasare verticală (până la 100px în jos, până la -100px în sus);
3. shadow blur (0 - umbră clară, 100 - umbră foarte neclară);
4. întinderea umbrei (până la 100px - întindere, până la -100px - compresie);
5. culoarea umbrei;
6. inserție - umbra este în interiorul elementului, fără inserție umbra va fi în exterior.

Box Shadow în CSS

Când am început să învăț HTML (acum vreo 5-6 ani), habar nu aveam de existența CSS-ului, iar la crearea unui site trebuia să fac din umbra blocurilor o imagine.

Rezultat :

Masa cu umbre:

cod Exemplu:
casetă-umbră: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
casetă-umbră: 10px 13px 0px -6px #000000;
casetă-umbră: 1px 1px 32px -6px #000000;
casetă-umbră: -1px 23px 41px -25px #000000;
casetă-umbră: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 inset;
casetă-umbră: 7px 10px 23px -8px #92a9e7;
Folosind o umbră puteți crea un bloc tridimensional:

Cod Exemplu
umbră-cutie: 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 2px(2,18 px), 3px 2px rgb(219,194,34), 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 4px rgb(216,191,31), 5px 5px rgb(189,164,4), 5px , 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 6px 81,8 px, 8px 7px rgb rgb(212,187,27), 9px 9px rgb(184,159,0);
umbră casetă: -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 218,gb9 ,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 4px rgb(216,191,31), -5,191,31 px(518 px) ,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 6px rgb(186,161,1), -8px 72,gb(781 px ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
umbră casetă: -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(1,19,1,6, 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(18,15,184,0), );
umbră-cutie: 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 -218,gb ,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 -4px rgb(216,191,31), 5px,gb6(189,164,4), ,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 -781,gb ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);
Blok1 ( lățime: 70 %; lățime maximă: 550 px; marjă: 10 px automată; umplutură: 1 em; 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) insert; )
Rezultat :

Blok1 ( lățime: 30%; lățime maximă: 550 px; marjă: 2em automat; umplutură: 1em; fundal: #DADADA; box-shadow: 6px 6px #BBBBBB, 12px 12px #919191; )
Rezultat :

Blok1 ( lățime: 30%; marjă: 0 automat; 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 :

Folosind o umbră, puteți face un cadru frumos.

Cadru frumos folosind proprietățicutie- umbră

Blok1 ( lățime: 20%; lățime maximă: 250 px; marjă: 0 automat; umplutură: 1 em; chenar: 2 px întreruptă #999; casetă-umbră: 0 0 0 1px #999, inserție 0 0 0 1px #999; )
Rezultat :

Blok1 ( lățime: 30%; lățime maximă: 250 px; marjă: 2em automat; umplutură: 4em; fundal: #dcc005; box-shadow: 0 0 4em 4em #fff inset; )
Rezultat :

Blok1 ( lățime maximă: 250 px; marjă: 0 automat; umplutură: 1 em; rază chenar: 10 px; fundal: rgb(100,100,100) gradient radial(cerc la 0 0, rgba(255,255,255,.65), rgba(255,255,255,.65), rgba,(100,100,100) .35)); box-shadow: inserat rgba(0,0,0,.5) -3px -3px 8px, inserat rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
Rezultat :

Box Shadow în CSS

site-ul web

Rezultat :

Aceste efecte frumoase pot fi obținute folosind umbre în CSS. Vino cu ceva nou și original, totul este în mâinile tale. Ai cunoștințele și abilitățile.
Și într-una dintre aceste zile voi publica un articol despre cum poți crea fără să folosești Photoshop. Deci, fii în centrul lucrurilor și abonează-te la actualizările blogului meu. Nu ratați un subiect care vă interesează. Ei bine, asta e, succes!!!

cod	Exemplu:
casetă-umbră: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
casetă-umbră: 10px 13px 0px -6px #000000;
casetă-umbră: 1px 1px 32px -6px #000000;
casetă-umbră: -1px 23px 41px -25px #000000;
casetă-umbră: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 inset;
casetă-umbră: 7px 10px 23px -8px #92a9e7;

Cod	Exemplu
umbră-cutie: 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 2px(2,18 px), 3px 2px rgb(219,194,34), 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 4px rgb(216,191,31), 5px 5px rgb(189,164,4), 5px , 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 6px 81,8 px, 8px 7px rgb rgb(212,187,27), 9px 9px rgb(184,159,0);
umbră casetă: -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 218,gb9 ,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 4px rgb(216,191,31), -5,191,31 px(518 px) ,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 6px rgb(186,161,1), -8px 72,gb(781 px ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
umbră casetă: -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(1,19,1,6, 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(18,15,184,0), );
umbră-cutie: 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 -218,gb ,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 -4px rgb(216,191,31), 5px,gb6(189,164,4), ,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 -781,gb ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);