Umbre interioare în CSS.

La fel ca actualizarea 3, dar cu reguli CSS moderne (=mai puțin), astfel încât să nu fie necesară o poziționare specială pe pseudo-element.

#box (culoare fundal: #3D6AA2; lățime: 160px; înălțime: 90px; poziție: absolut; sus: calc(10% - 10px); stânga: calc(50% - 80px); ) .box-shadow:after ( conținut:""; poziție:absolut; lățime:100%; jos:1px; z-index:-1; transform:scale(.9); case-shadow: 0px 0px 8px 2px #000000; )

ACTUALIZARE 3

#box (culoare de fundal: #3D6AA2; lățime: 160px; înălțime: 90px; margine-sus: -45px; margine-stânga: -80px; poziție: absolut; sus: 50%; stânga: 50%; ) .box- umbră:după (conținut: ""; lățime: 150px; înălțime: 1px; margine-sus: 88px; margine-stânga: -75px; afișare: bloc; poziție: absolut; stânga: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000; )

UPDATE 2

Se pare că puteți face acest lucru doar cu opțiunea opțională de etichetă CSS box, așa cum tocmai au specificat toți ceilalți. Iată demonstrația:

Webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 4px 4px -2px #000000;

Aceasta ar fi cea mai bună soluție. Parametrul suplimentar care este adăugat este descris ca:

A patra lungime este distanța de răspândire. Valorile pozitive fac ca forma umbrei să se extindă în direcția de-a lungul razei specificate. Valorile negative fac ca forma umbrei să fie de acord.

ACTUALIZAȚI

Ceea ce am făcut a fost să creez un „element umbră” care s-ar ascunde în spatele elementului real pe care ai vrea să-l ai în umbră. Am făcut ca lățimea „elementului umbră” să fie exact mai mică decât elementul real, de 2 ori umbra specificată; apoi l-am aliniat corect.

#wrapper ( lățime: 84px; poziție: relativă; ) #element (culoare fundal: #3D668F; înălțime: 54px; lățime: 100%; poziție: relativă; index z: 10; ) #umbră (culoare fundal: # 3D668F; înălțime: 8px; lățime: 80px; margine-stânga: -40px; poziție: absolut; jos: 0px; stânga: 50%; z-index: 5; -webkit-box-shadow: 0px 2px 4px #000000; - moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; )

Răspunsul original

Da, puteți face acest lucru cu aceeași sintaxă pe care ați furnizat-o. Prima valoare controlează poziționarea orizontală, iar a doua valoare controlează poziționarea verticală. Deci, setați prima valoare la 0px și a doua la orice offset doriți să faceți, după cum urmează.

Umbrele obișnuite sunt ușor de implementat folosind box-shadow sau text-shadow. Dar dacă trebuie să faci umbre interne? Acest articol descrie cum să faci aceste umbre cu doar câteva linii de cod.

Sintaxă

Mai întâi, să ne uităm la cele două moduri principale de a implementa umbre în CSS.

cutie-umbră

Proiecta cutie-umbră conține mai multe semnificații diferite:

Offset orizontalȘi offset vertical- deplasare orizontală, respectiv verticală. Aceste valori indică direcția în care obiectul își va arunca umbra:

Raza de estompareȘi raza de răspândire putin mai complicat. Care este diferența? Să ne uităm la un exemplu cu două elemente, unde valorile raza de estompare diferă:

Marginea umbrei este pur și simplu neclară. Cu valori diferite raza de răspândire vedem urmatoarele:

În acest caz, vedem că umbra este împrăștiată pe o zonă mare. Dacă nu specificați o valoare raza de estompareȘi raza de răspândire, atunci ele vor fi egale cu 0.

text-umbră

Sintaxa este foarte asemănătoare cu cutie-umbră:

Semnificațiile sunt similare, dar nu răspândit-umbră. Exemplu de utilizare:

Inserat în casetă-umbră

Pentru a „întoarce” umbra în interiorul obiectului, trebuie să adăugați medalionîn CSS:

Odată ce înțelegeți sintaxa de bază a casetei-umbră, este foarte ușor de înțeles cum să implementați umbrele interioare. Valorile sunt în continuare aceleași, puteți adăuga culoare (RGB în hexadecimal):

Culoarea este în format RGB, valoarea alfa este responsabilă pentru transparența umbrei:

Imagini cu umbre

Adăugarea unei umbre interioare unei imagini este puțin mai dificilă decât adăugarea unei umbre obișnuite div. Pentru început, iată codul obișnuit al imaginii:

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

Imag (box-shadow: 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 dezavantajele sale. Să ne uităm la două dintre ele. Primul este să înfășurați imaginea într-un mod obișnuit div:

Div ( înălțime: 200px; lățime: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img ( înălțime: 200px; lățime: 400px; poziție: relativ; z-index: -2 ;)

Totul funcționează, dar trebuie să adăugăm puțin cod suplimentar HTML și CSS. A doua modalitate este să setați imaginea ca fundal al blocului dorit:

Div ( înălțime: 200px; lățime: 400px; fundal: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )

Iată ce se poate întâmpla atunci când utilizați umbrele interioare:

Inserare la text-shadow

Pentru a implementa o umbră de text interioară, pur și simplu adăugați la cod medalion nu funcționează:

Pentru a rezolva, aplicați mai întâi la antet h1 Setați un fundal întunecat și o umbră deschisă:

H1 (culoare de fundal: #565656; culoare: transparent; umbră text: 0px 2px 3px rgba(255,255,255,0.5); )

Iată ce se întâmplă:

Adăugarea unui ingredient secret clip de fundal care decupează orice se extinde dincolo de text (până la un fundal întunecat):

H1 (culoare de fundal: #565656; culoare: transparent; umbră text: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ;)

S-a dovedit aproape exact ceea ce aveam nevoie. Acum doar întunecăm puțin textul (alfa), iar rezultatul este:

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

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.

Proprietatea CSS box-shadow vă permite să setați o umbră pentru un element html. Este folosit destul de des de designerii de site-uri web pentru a decora și a evidenția într-un fel cadrele cu text, imagini și pentru a face conținutul mai lizibil.

Sintaxă casetă-umbră CSS

... box-shadow : X Y R1 R2 culoare ; ...

• X - offset de-a lungul axei X (orizontală)
• Y - offset de-a lungul axei Y (verticală)
• R1 - estompare (cu cât valoarea este mai mare, cu atât tranziția este mai lină)
• R2 - raza de extensie (dacă este pozitivă, se întinde, negativă, se comprimă)
• culoare - culoare (poate fi specificat în orice format: #RGB, numele culorii)
• inset - dacă această valoare este prezentă, umbra va fi localizată în interiorul blocului (elementului)

Exemplul 1. Cadru HTML cu umbră casetă fără offset

Mai jos este cel mai simplu mod de a utiliza o umbră folosind proprietatea CSS box-shadow pe o pagină html, când se înfășoară uniform în jurul întregului cadru fără deplasare.

Exemplul nr. 1. Rama cu umbra

Exemplul nr. 1. Rama cu umbra

Exemplul 2. Cadru HTML cu umbră decalată casetă-umbră

Aproape același exemplu ca primul, dar numai cu cadrul deplasat.

Exemplul nr. 2. Cadru cu umbră decalată

Pagina se transformă în următoarele

Exemplul nr. 2. Cadru cu umbră decalată

Exemplul nr. 3. Cadru strălucitor html

Implementarea unei umbre ca strălucire

Exemplul nr. 3. Strălucire

Pagina se transformă în următoarele

Exemplul nr. 3. Strălucire

Exemplul 4. strălucire interioară a marginii HTML

O strălucire care este direcționată în interiorul blocului și nu depășește limitele acestuia. Efectul este creat folosind atributul inset.

Exemplul nr. 4. Stralucire interioara

Pagina se transformă în următoarele

Exemplul nr. 4. Stralucire interioara

Exemplul 5. Combinarea umbrelor în html

Efectul de umbră poate fi combinat separat prin virgule. În acest caz, se formează rezultate foarte interesante. De exemplu, puteți face un cadru multicolor în stil 3D.

Exemplul nr. 5. Combinarea umbrelor

Pagina se transformă în următoarele

Exemplul nr. 5. Combinarea umbrelor

Notă: browsere mai vechi

Versiunile IE anterioare 9 nu acceptă box-shadow. Prefixe de browser pentru box-shadow

• -webkit-box-shadow - pentru Chrome până la 10, Safari până la 5.1, Android până la 4 și iOS până la 5
• -moz-box-shadow - pentru Firefox până la versiunea 4.0

Umbrele obișnuite sunt ușor de implementat folosind box-shadow sau text-shadow. Dar dacă trebuie să faci umbre interne? Acest articol descrie cum să faci aceste umbre cu doar câteva linii de cod.

Sintaxă

Mai întâi, să ne uităm la cele două moduri principale de a implementa umbre în CSS.

cutie-umbră

Proiecta cutie-umbră conține mai multe semnificații diferite:

Offset orizontalȘi offset vertical- deplasare orizontală, respectiv verticală. Aceste valori indică direcția în care obiectul își va arunca umbra:

Raza de estompareȘi raza de răspândire putin mai complicat. Care este diferența? Să ne uităm la un exemplu cu două elemente, unde valorile raza de estompare diferă:

Marginea umbrei este pur și simplu neclară. Cu valori diferite raza de răspândire vedem urmatoarele:

În acest caz, vedem că umbra este împrăștiată pe o zonă mare. Dacă nu specificați o valoare raza de estompareȘi raza de răspândire, atunci ele vor fi egale cu 0.

text-umbră

Sintaxa este foarte asemănătoare cu cutie-umbră:

Semnificațiile sunt similare, dar nu răspândit-umbră. Exemplu de utilizare:

Inserat în casetă-umbră

Pentru a „întoarce” umbra în interiorul obiectului, trebuie să adăugați medalionîn CSS:

Odată ce înțelegeți sintaxa de bază a casetei-umbră, este foarte ușor de înțeles cum să implementați umbrele interioare. Valorile sunt în continuare aceleași, puteți adăuga culoare (RGB în hexadecimal):

Culoarea este în format RGB, valoarea alfa este responsabilă pentru transparența umbrei:

Imagini cu umbre

Adăugarea unei umbre interioare unei imagini este puțin mai dificilă decât adăugarea unei umbre obișnuite div. Pentru început, iată codul obișnuit al imaginii:

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

Imag (box-shadow: 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 dezavantajele sale. Să ne uităm la două dintre ele. Primul este să înfășurați imaginea într-un mod obișnuit div:

Div ( înălțime: 200px; lățime: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img ( înălțime: 200px; lățime: 400px; poziție: relativ; z-index: -2 ;)

Totul funcționează, dar trebuie să adăugăm puțin cod suplimentar HTML și CSS. A doua modalitate este să setați imaginea ca fundal al blocului dorit:

Div ( înălțime: 200px; lățime: 400px; fundal: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); )

Iată ce se poate întâmpla atunci când utilizați umbrele interioare:

Inserare la text-shadow

Pentru a implementa o umbră de text interioară, pur și simplu adăugați la cod medalion nu funcționează:

Pentru a rezolva, aplicați mai întâi la antet h1 Setați un fundal întunecat și o umbră deschisă:

H1 (culoare de fundal: #565656; culoare: transparent; umbră text: 0px 2px 3px rgba(255,255,255,0.5); )

Iată ce se întâmplă:

Adăugarea unui ingredient secret clip de fundal care decupează orice se extinde dincolo de text (până la un fundal întunecat):

H1 (culoare de fundal: #565656; culoare: transparent; umbră text: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ;)

S-a dovedit aproape exact ceea ce aveam nevoie. Acum doar întunecăm puțin textul (alfa), iar rezultatul este: