Cum să faci o umbră interioară în CSS. Umbrele interne în CSS

Umbra sub elementul bloc de pe pagină este utilizată, de obicei, pentru a crea un efect tridimensional, atragerea atenției asupra elementului sau ca parte a designului. O mică umbră sub elemente oferă, de asemenea, pagina de volum și adâncime.

Pentru a adăuga umbra, proprietatea umbra-umbra, care are șase valori, dintre care numai două sunt obligatorii. În fig. 1 prezintă proprietatea de umbră cu toate valorile posibile, ele sunt numerotate pentru a le identifica.

Smochin. 1. Valorile proprietății de la Box-umbră

1. cuvântul cheie insert stabilește umbra în interiorul elementului;
2. shift de umbră orizontală (5px - dreapta, -5px - stânga);
3. shift vertical (5px - în jos, -5px-up);
4. raza de umbra (0 este o umbra ascutita);
5. umbra de întindere (5px - întindere, -5px - compresie);
6. culoarea umbrei.

Asigurați-vă că specificați numai schimbarea orizontală și verticală, toți ceilalți parametri vor fi acceptați în mod implicit. În acest caz, umbra va fi tăiată fără blur și negru.

Datorită combinațiilor unor parametri diferiți și valorilor acestora, puteți obține o mare varietate de specii de umbre. În fila. 1 prezintă codul și rezultatul la care conduce.

Masa. 1. Combinarea parametrilor umbrelor

Codul	Rezultat	Descriere
box-umbra: 5px 5px;		O umbră ascuțită pe dreapta și de mai jos.
box-umbra: -5px -5px;		O umbră ascuțită pe stânga și deasupra.
box-umbra: 0 0 5px;		Umbra neclară în jurul elementului.
box-umbra: 0 0 5px 2px;		Extinderea umbra de 2 pixeli.
box-umbra: 0 0 5px 2px roșu;		Strălucirea roșie în jurul elementului.
box-umbra: 0.4EM 0.4Em 5px RGBA (122,122,122,0,5);		Umbra translucidă.
box-umbra: inset 0 0 6px;		Umbra înăuntru.

După cum se poate vedea din tabel, schimbarea umbrei nu este neapărat setată în pixeli, deși este convenabilă. Culoarea umbrei poate fi specificată în orice format accesibil, astfel încât să obțineți o umbră translucidă, formatul RGBA se va potrivi, o astfel de umbră va arăta bine pe orice fundal. În exemplul 1, se arată cum să o faci.

Exemplu 1. Umbra pe desenul de fundal

HTML5 CSS3 IE 9+ CR OP SA FX

Rezultatul acestui exemplu este prezentat în fig. 2. Umbra repetă rotunjirea colțului blocului.

Smochin. 2. Tipul de umbră pe desenul de fundal

La adăugarea unei umbre "largi" ar trebui luată în considerare faptul că poate merge dincolo de fereastra de browser vizibilă și poate duce astfel la aspectul barei de derulare orizontală.

Umbra poate fi adăugată și la Pseudo-elemente, uneori este necesară pentru un aspect complex. În fig. 3 prezintă un bloc cu o poziție la care se adaugă umbra. Astfel încât să nu existe linii la site-ul de joncțiune trebuie să folosească un element pseudo-element :: după și să adauge o umbră la ea.

Smochin. 3. Blocați cu umbra

Exemplul 2 prezintă crearea unui astfel de bloc.

Exemplul 2. Blocați cu umbra

HTML5 CSS3 IE 9+ CR OP SA FX

Umbra elementului nu poate fi singură, dar imediat mai multe, parametrii lor sunt enumerați prin virgulă în valoarea proprietății de umbră. Exemplul 3 prezintă adăugarea unei umbre duble la toate imaginile.

Exemplul 2. Blocați cu umbra

HTML5 CSS3 IE 9+ CR OP SA FX

Rezultatul acestui exemplu este prezentat în fig. patru.

Smochin. 4. Imagine cu umbra dubla

Prima umbră este afișată în partea stângă a desenului cu o rază de blur 20px, dimensiunea sa este redusă datorită parametrului al patrulea (-20px). Parametrii celei de-a doua umbre sunt indicate după virgulă, umbra este afișată în partea dreaptă a figurii și este, de asemenea, redusă pentru simetrie.

Proprietatea Box-Shadow adaugă unul sau mai multe elemente de umbre. Umbra este o copie a elementului deplasat la distanța specificată. Umbrele sunt externe sau interne, neclară sau plane, ele pot urma circuitele blocurilor cu colțuri rotunjite. Folosind cuvântul cheie INSET, umbrele sunt create în interiorul elementului, făcând elementul vizual volumetric sau deprimat.

Cum se face umbra blocului folosind proprietatea umbra-umbra

Sprijiniți browserele

Adică: 9.0
MARGINE: 12.0
Firefox: 4.0, 3.5 -Moz-
Crom: 10.0, 4.0 -Webkit-
Safari: 5.1, 3.1 -Webkit-
Operă: 11.5
iOS Safari: 5.1, 3.1 -Webkit-
Android Browser: 4.0, 2.1 -Webkit-

1. Proprietăți de sintaxă cutie-umbra

Proprietatea de umbră se atașează una sau mai multe umbre în bloc. Proprietatea acceptă fie valoarea nimănui, ceea ce indică absența umbrelor, fie lista de umbre prin virgulă, comandată de la început până la sfârșit.

Fiecare umbră este o umbră separată reprezentată de la 2 la 4 lungimi de lungime, culoarea opțională și insetarea opțională a cuvintelor cheie. Lungimi admise 0; Culorile implicite sunt egale cu valoarea proprietății de culoare.

Proprietatea nu este moștenită.

Smochin. 1. Proprietăți de sintaxă cutie-umbra

Valori:
x-offset.	Specifică deplasarea orizontală a umbrei. O valoare pozitivă atrage o umbră deplasată în partea dreaptă a textului, lungimea negativă este lăsată.
y-offset.	Specifică schimbarea verticală a umbrei. O valoare pozitivă schimbă umbra, negativă.
estompa	Specifică raza blurului. Valorile negative nu sunt permise. Dacă valoarea blurului este zero, marginea umbrei este clară. În caz contrar, cu atât este mai mare valoarea, cu atât mai mult marginea umbrei este încețoșată.
Întindere	Setează distanța la care crește umbra. Valorile pozitive fac ca umbra să se extindă în toate direcțiile la raza specificată. Valorile negative fac micșorarea umbrei. Pentru umbrele interne, extinderea umbrei înseamnă comprimarea formei perimetrului.
culoare	Specifică umbrele. Dacă culoarea lipsește, culoarea utilizată este luată din proprietatea de culoare. Pentru Safari, este definită culoarea umbrei.
Medalion.	Modifică umbra aruncată a blocului de la o umbră externă la interior.
nici unul	Valoarea implicită nu înseamnă nici o umbră.
iniţială	Setează valoarea imobilului implicit.
moşteni.	Moștenește valoarea proprietății de la elementul-mamă.

Efectele umbra sunt aplicate după cum urmează: prima umbră este în partea de sus, iar restul este din spate. Umbrele nu afectează aspectul și pot suprapune alte elemente sau umbre. Din punctul de vedere al contextelor de așezare și al ordinului de desen, umbrele externe ale elementului sunt trase direct sub fundalul acestui element, iar umbrele interne ale elementului sunt trase direct deasupra fundalului acestui element (sub marginea și marginea - Imagine, dacă există).

Dacă elementul are mai multe cutii, toți primesc umbre, dar umbrele sunt desenate numai în cazul în care limitele vor fi de asemenea desenate; Vedeți Box-Decoration-Break.

Umbrele nu determină derularea sau nu crește dimensiunea zonei de derulare.

2. Exemple de umbră pentru bloc

2.1. Umbra interioara

.Example-umbra-1 (fundal: # E6E3DF; text-align: centru;) .Example-umbra-1 span (margine: 50px; înălțime: 100px; lățime: 200px; Afișaj: Inline-bloc; Box-umbra: Insert 2px 2px 5px RGBA (154, 147, 140, 0,5), 1px 1px 5px RGBA (255, 255, 255, 1);)

2.2. Umbra plat pe o parte

apartament.

apartament.

.Example-umbra-2 (fundal: bej; text-align: centru;) .Example-shadow-2 A (afișaj: bloc-bloc; Raza de frontieră: 5px; Hadding: 15px 35px; font-dimensiune: 22px; text; text -Decrage: Niciuna; margine: 20px; Culoare: alb; fundal: # 55Acee; Box-umbra: 0 5px 0 # 3C93d5; tranziție: .3s;) ;)

2.3. Umbra în stilul "design de materiale"

.Example-umbra-3 (fundal: # E8E8E8; Text-align: centru;) --Shadow: 0 14px 28px RGBA (0,0,0,0,25), 0 10px 10px RGBA (0,0,0,0,22);)

Umbrele convenționale sunt ușor de implementat utilizând umbra de box sau umbra textului. Dar dacă trebuie să faci umbre interne? Acest articol descrie modul de a face astfel de umbre folosind doar câteva linii de cod.

Sintaxă

În primul rând, luați în considerare cele două modalități principale de a implementa umbre în CSS.

box-umbra

Proiecta box-umbra Conține mai multe valori diferite:

Offset orizontal. și offset vertical. - deplasarea orizontală și verticală, respectiv. Aceste valori indică modul în care obiectul va elimina umbra:

Radius blur. și raza razei. Un pic mai greu. Care este diferența lor? Aruncați o privire la un exemplu cu două elemente în care valorile radius blur. Diferit:

Marginea umbrei este pur și simplu neclară. Cu semnificații diferite raza razei. Vedem următoarele:

În acest caz, vedem că umbra este împrăștiată într-o zonă mare. Dacă nu specificați valorile radius blur. și raza razei., atunci vor fi egali cu 0.

text-umbra.

Sintaxa este foarte asemănătoare cu box-umbra:

Valorile sunt similare, dar nu răspândire-umbra.. Exemplu de utilizare:

Insert în umbra cutiei

Pentru a "întoarce" umbra în interiorul obiectului, trebuie să adăugați medalion. În CSS:

După ce a înțeles cu principala sintaxă a umbrei de box, înțelegeți principiile implementării umbrelor interne este foarte ușoară. Valorile sunt la fel, puteți adăuga culoarea (RGB în Hex):

Culoare în format RGB, valoarea alfa este responsabilă pentru transparența umbrală:

Imagini cu umbre

Adăugați o umbră internă imaginii un pic mai complicată decât cea obișnuită div. Pentru a începe, aici este codul obișnuit al imaginii:

Este logic să presupunem că puteți adăuga umbra ca aceasta:

Img (Box-umbra: inset 0px 0px 10px RGBA (0,0,0,0,5);)

Dar umbra nu este vizibilă:

Există mai multe modalități de a rezolva această problemă, fiecare dintre ele având avantajele și contra. Ia în considerare două dintre ele. Primul este de a înfășura imaginea în obișnuință div:

Div (înălțime: 200px, lățime: 400px; Box-umbra: inset 0px 0px 10px RGBA (0,0,0,0,0,0,9);) img (înălțime: 200px; lățime: 400px; poziție: rudă; z- Index: -2;)

Totul funcționează, dar trebuie să adăugați un mic marcaj suplimentar HTML și CSS. A doua modalitate este de a seta imaginea cu fundalul blocului dorit:

Div (înălțime: 200px; lățime: 400px; fundal: URL (http://lorempixum.com/400/200/transport/2); Box-umbra: inset 0px 0px 10px rgba (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 , 9);)

Aceasta este ceea ce se poate întâmpla atunci când se utilizează umbre interne:

Insert în umbra textului

Pentru a implementa umbra interioară a textului, adăugarea simplă a codului medalion. nu funcționează:

Pentru a rezolva, se aplică mai întâi antetului h1. Instalați un fundal întunecat și o umbră ușoară:

H1 (culoarea de fundal: # 565656; Culoare: transparent; Text-umbra: 0px 2px 3px RGBA (255,255,255,0,5);)

Asta se pare:

Adăugați ingredient secret fundal-clip.care taie totul din text (pe un fundal întunecat):

H1 (fundal-culoare: # 565656; Culoare: transparent; Text-umbra: 0px 2px 3px RGBA (255,255,255,0,5); -Webkit-fundal-clip: text; -moz-clips-clip: text; fundal-clip: text ;)

Sa dovedit aproape ce este necesar. Acum doar un pic întunecat textul (alfa) și rezultatul:

Astăzi aflăm cum să facem umbrele CSS fără imagini. După ce ați studiat această lecție, nu veți mai avea nevoie de generator de umbre CSS.

Care este principalul avantaj al umbrelor create folosind CSS3, deci acest lucru este în ușurință în implementare și reducerea numărului de solicitări către server (deoarece nu mai folosim imagini). Pentru a face umbra pe CSS, vom avea nevoie de o proprietate DIV și CSS Tag Property Box-Shadow. Nu veți avea nevoie de o marcă suplimentară, deoarece vom dura elemente Pseudo: după și: înainte, care vor fi plasate pe obiectul principal (clasa div bloc).

Uitați-vă la codul HTML pentru care vom crea umbra CSS3:

Apoi, puteți viziona exemplele și codul necesar pentru implementarea acestora. Pentru a minimiza textul pe pagină, vom reduce proprietățile CSS cu prefixe ale browserului. Codul complet poate fi văzut făcând clic pe linkul "exemplu" de exemplu.

.block: 40%; Padding: 1em; Marginea: 2em 10px 4em; fundal: #fff; Raza de frontieră: 4px; Box-umbra: 0 1px 4px RGBA (0, 0, 0, 0.3) 0 0 40px RGBA (0 , 0, 0, 0.1) Insert;) .block: înainte, Block: după (conținut: ""; Poziție: Absolut; Z-Index: -2; partea de jos: 15px; stânga: 10px; lățime: 50%; înălțime : 20%; MAX-Lățime: 300px; Box-umbra: 0 15px 10px RGBA (0, 0, 0, 0,7); Transformare: Rotire (-3DEG);) .block: după (dreapta: 10px; stânga: Auto; Transforma: rotiți (3deg);)

.block: 40%; Padding: 1em; Marginea: 2em 10px 4em; fundal: #fff; Box-umbra: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) Insert; Border: 1px Solid #Efefef; Raza de frontieră: 0 0 120px 120px / 0 0 6px 6px;) .block: înainte, Block: după (Conținut: ""; Poziție: Absolut; Z-Index: -2; Partea de jos: 12px; stânga: 10px; lățime: 50%; Înălțime: 55%; Max-lățime: 200px; Box-umbră: 0 8px 12px RGBA (0, 0, 0, 0,5); Transformare: Skew (-8deg) Rotiți (-3deg);) .block: după (dreapta: 10px, stânga: Auto, Transform: Skew (8DEG) Rotire (3DEG);)

Folosind umbra, puteți da blocul în perspectivă. Vezi exemplu.

.block: 40%; Padding: 1em; Marginea: 2em 10px 4em; fundal: #fff; Box-umbra: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) insert;) .block: înainte, blocaj: după (conținut: ""; poziția: Absolut; z-index: -2;) .block: înainte (stânga: 80px, fundul: 5px; lățime: 50%; înălțime: 35%; Max-lățime: 200px; Box-umbra: -80px 0 8px RGBA (0, 0, 0, 0,4); Transformare: Skew (50DEG); Transformare-origine: 0 100%;) .block: după (afișaj : Nici unul;)

CSS Shadow la un bloc ajustat. Vezi exemplu.

.block: 40%; Padding: 1em; Marginea: 2em 10px 4em; fundal: #fff; Box-umbra: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) Insert; Box-umbra: 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) Inset ;) .Block: înainte, Block: după (Conținut: ""; Poziție: Absolut; Z-Index: -2;)

Exemplu CSS3 Umbra pentru un bloc îndoit vertical. Vezi exemplu.

.block: 40%; Padding: 1em; Marginea: 2em 10px 4em; fundal: #fff; Box-umbra: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) insert;) .block: înainte, blocaj: după (conținut: "; poziția: Absolut; z-index: -2;) .block: înainte (Top: 10px, partea de jos: 10px; stânga: 0; dreapta: 50% ; Box-umbra: 0 0 15px RGBA (0,0,0,0,6); Raza de frontieră: 10px / 100px;)

.block: 40%; Padding: 1em; Marginea: 2em 10px 4em; fundal: #fff; Box-umbra: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) Insert;) .block: înainte, blocaj: după (conținut: "; poziția: Absolut; z-index: -2;) .block: înainte (Top: 10px, partea de jos: 10px; stânga: 0; dreapta: 0; Box-umbra: 0 0 15px RGBA (0,0,0,0,0,6); Radius de frontieră: 10px / 100px;)

Exemplu CSS3 Shadow pentru un bloc orizontal îndoit. Vezi exemplu.

.block: 40%; Padding: 1em; Marginea: 2em 10px 4em; fundal: #fff; Box-umbra: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) insert;) .block: înainte, blocaj: după (conținut: "; poziția: Absolut; z-index: -2;) .block: înainte (Top: 50%, partea de jos: 0px; stânga: 10px; dreapta: 10px ; Box-umbra: 0 15px RGBA (0,0,0,0,6); Raza de frontieră: 100px / 10px;)

.block: 40%; Padding: 1em; Marginea: 2em 10px 4em; fundal: #fff; Box-umbra: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) Insert;) ; Box-umbra: 0 15px RGBA (0,0,0,0,0,6); Radius de margine: 100px / 10px;)

CSS3 Umbra pentru blocul rotativ. Vezi exemplu.

.block: 40%; Padding: 1em; Marginea: 2em 10px 4em; fundal: #fff; Raza de frontieră: 4px; Box-umbra: 0 1px 4px RGBA (0, 0, 0, 0.3) 0 0 40px RGBA (0 , 0, 0, 0.1) Insert; Box-umbra: Niciuna, Transformare: Rotire (-3DEG);) : 0px; partea de jos: 0; stânga: 0; dreapta: 0px; fundal: #fff; Box-umbra: 0 1px 4px RGBA (0, 0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1 ) Insert;) .Block: înainte, Block: după (Conținut: "; Poziție: Absolut; Z-Index: -2; partea de jos: 15px; stânga: 10px; lățime: 50%; înălțime: 20%; max-lățime : 300px; Umbra de cutie: 0 15px 10px RGBA (0, 0, 0, 0.7); Transformare: Rotire (-3DEG);) )

Procedura de înregistrare este fundamental importantă. Primul înțeles este întotdeauna compensat de-a lungul axei X, al doilea - de-a lungul axei y.

Dacă unul dintre axe nu are nevoie de o deplasare, puneți zero:

Clasa (umbra casetei: 0 8px;) - Deplasați umbra numai de-a lungul axei y

Rezultat

Clasa (umbra casetei: 8px 8px;) - trecerea pe ambele axe

Rezultat

Valoare negativă pentru axele umbrelor cutiei

Umbra se va schimba în direcția opusă:

Clasă (umbra casetei: -8px 8px;) - Deplasați umbra cu o valoare negativă de-a lungul axei X

Rezultat

Blur rază de umbră

Al treilea parametru de proprietăți box-umbra. Dacă nu este specificat, valoarea este 0, iar dimensiunea umbrei este egală cu dimensiunea elementului la care se aplică.

Clase (umbra casetei: 0 48px 0;) - umbra duplică dimensiunile elementului la care se aplică

Rezultat

Când valoarea este mai mare decât zero, marginile pierd claritate, umbra devine mai ușoară și mai ușoară. Blur se aplică din partea tuturor laturilor:

Clasa (umbra casetei: 0 8px;) - fără compensare, blur blur

Rezultat

Clasa (umbra casetei: 0 8px 8px;) - Shift pe axa Y și Blur

Rezultat

Valoarea negativă este considerată o eroare și o umbră nu va apărea deloc.

Radius de umbra de întindere

Al patrulea parametru proprietate box-umbra. Modifică cantitatea de umbră în raport cu elementul. Se întinde în toate direcțiile:

Clase (umbra casetei: 0 0 0 8px;) - fără deplasare și estompare, numai întinderea

Rezultat

În acest caz, umbra este mai mare decât elementul pe 16 pixeli în lățime și înălțime: 8px pe stânga + 8px pe partea dreaptă și 8px de mai sus + 8px de mai jos.

Valoarea negativă a umbrei de întindere în CSS

Umbra nu este întinsă, dar se îngustează de la toate laturile la valoarea specificată:

Clasă (umbra casetei: 0 16px 0 -8px;) - Reducerea umbrei unei valori negative

Rezultat

Culoarea umbra

În mod implicit, culoarea umbrei duplică culoarea fontului: ca în exemplele de mai sus.

Culoarea umbrei este specificată în orice format CSS disponibil:

• # FF0009.
• rGB (255, 0, 9)
• hSL (358, 100%, 50%);

Să punem elementul în umbra albastră:

Clase (umbra casetei: 0 8px # 3A8FE7;)

Rezultat

Umbra interioara

Parametru medalion. Afișează umbra în interiorul blocului.

Spre deosebire de parametrii enumerați mai sus, nu există nici un cuvânt rigid de scriere. Ambele opțiuni vor da un rezultat:

Box-umbra: 0 8px # 3A8FE7 inset; Box-umbra: inset 0 8px # 3A8FE7;

Rezultat

A doua opțiune este mai convenabilă pentru percepție atunci când citiți codul.

Mai multe umbre

Mai multe umbre sunt stabilite prin virgulă. Procedura de afișare de sus în jos:

Clase (umbra casetei: 0 8px # 3A8Fe7, 0 16px # 3ae7af;)

Rezultat

Dacă schimbați locurile, umbra albastră nu va fi vizibilă:

Clasa (umbra casetei: 0 16px # 3ae7af, 0 8px # 3A8FE7;)

Rezultat

În același timp, se dă o umbră internă și externă:

Clasa (umbra casetei: 0 16px # 3ae7af, inset 0 8px # 3A8FE7;)

Rezultat

Umbra cu colțuri rotunjite

Dacă elementul setă de proprietate raza de frontieră., Umbra va fi cu colțuri rotunjite.

Clasa (Box-umbra: 0 16px # 3A8FE7; Frontieră-Radius: 8px;)

Rezultat

Stabilirea întinderii umbrei, creștem și rotunjirea ei. De exemplu, raza de frontieră 8px și întinderea umbrei - 4.

8 + 4 \u003d 12px este o rază a umbrei.

Clasa (Box-umbra: 0 16px 0 4px # 3A8Fe7; Raza de frontieră: 8px;)

Rezultat

Același principiu se aplică la comprimarea umbrei atunci când valoarea este negativă.

8 + (- 4) \u003d 4px - Avem o umbră rotunjită de două ori mai mică.

Dacă compresia umbrei este mai mare decât raza de frontieră, obțineți o umbră cu colțuri drepte. De exemplu, compresia 16px.

8 + (- 16) \u003d (- 8), dar rotunjirea nu poate fi o valoare negativă și se va aplica zero.

Clasa (umbra casetei: 0 24px 0 -16px # 3A8FE7; Radius de frontieră: 8px;)

Rezultat

CSS proprietate box-umbra Susținute de toate browserele populare, cu excepția Operei Mini.