Box shadow este o umbră pe o parte. Umbre interioare în CSS

Descriere

Adaugă o umbră unui element. Este posibil să folosiți mai multe umbre, indicând parametrii acestora despărțiți prin virgule la aplicarea umbrelor, prima umbră din listă va fi mai mare, ultima mai mică; Dacă o rază de filet este specificată pentru un element prin proprietatea rază-chenar, atunci umbra va apărea și cu colturi rotunjite. Adăugarea unei umbre mărește lățimea elementului, astfel încât acesta poate apărea dungă orizontală derularea î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-shift Deplasarea orizontală a umbrei în raport cu elementul. O valoare pozitivă a acestui parametru setează deplasarea umbrei la dreapta, o valoare negativă - 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ă. Luat in considerare următoarea comandă: Prima umbră din listă este plasată în partea de sus, ultima din listă este plasată î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 până la versiunea 4.0 acceptă proprietatea -moz-box-shadow.

Internet Explorer înainte de versiunea 9.0 nu acceptă proprietatea box-shadow, 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.

Umbrele în CSS pot fi implementate destul de rapid și ușor, fie că este o umbră de casetă sau o umbră de text. Dar este atât de ușor de implementat? umbra interioara? Puteți crea o umbră de casetă inserată? Și cum rămâne cu aceeași sarcină atunci când folosești text?

Astăzi vrem să vă vorbim despre un foarte într-un mod simplu Implementarea unei umbre interioare care include doar câteva linii de cod. Vă vom spune despre ambele umbre pentru casete și text și despre cum le puteți modifica pentru a crea o umbră inserată.

Iti place acest articol? Nu uitați să vă abonați la nostru.

Sintaxa umbră

Înainte de a intra în umbrele încorporate, să ne uităm la sintaxa de bază pentru crearea a două tipuri diferite Umbre CSS. Chiar dacă ați mai făcut asta înainte, să vă reîmprospătăm memoria.

cutie-umbră

Box shadows sau box-shadows sunt probabil una dintre cele mai populare umbre din CSS. Modalități potențiale implementările variază foarte mult, iar dezvoltatorii folosesc adesea propriile abordări și aplicații. Sintaxa umbrei casetei în ansamblu este destul de complexă și implică 6 valori separate. Vom începe prin a ne uita la cele mai multe 5 exemple comune implementare.

După cum puteți vedea, lista de mai sus este o listă de valori pentru offset orizontal, offset vertical, raza de estompare, nivelul de răspândire a umbrei și culoare. Primele două valori - offset orizontal și vertical - sunt foarte clare. Valorile pozitive vor muta umbra spre dreapta, respectiv în jos, în timp ce valorile negative vor muta umbra spre stânga și în sus. Să ne uităm la un exemplu al ambelor sensuri:

Ultimele două valori, care sunt responsabile pentru raza de estompare și raza de răspândire, sunt puțin mai complicate. Probabil vă întrebați, care este diferența? Pentru a răspunde la asta, să ne uităm mai întâi la unul cu care probabil ești deja familiarizat: raza de estompare.

După cum puteți vedea, dacă nu folosim raza de estompare, vom putea face o umbră cu margini ascuțite și mare importanță dă margini foarte neclare. E simplu, nu-i așa? Deci, cum rămâne cu parametrul razei de propagare? Care este diferența aici? Desen mai bine decât o mie cuvintele vă vor explica situația:

După cum puteți vedea, raza de răspândire ne permite să creștem sau să micșorăm zona de umbră fără a afecta nivelul de estompare. Dacă privim acest parametru ca dimensiunea umbrei, poți spune că nu poți greși.

Dacă nu folosiți estompare și răspândire, aceste valori implicite vor rămâne la 0. Dacă cercetați puțin exemplele online, veți observa că majoritatea fișierelor demo nu folosesc opțiunea de răspândire. De asemenea, rețineți că o versiune de box-shadow este de obicei adăugată cu prefixul –webkit pentru a evita problemele între browsere.

text-umbră

Acum știm exact ce face o umbră de casetă și ce este, este timpul să trecem la învățarea sintaxei pentru un alt tip de umbră CSS: text-shadow. Din fericire, sintaxa aici este mult mai simplă decât cu umbrele casetei.

După cum puteți vedea, majoritatea semnificațiilor sunt aceleași, așa că dacă înțelegeți unul, îl veți înțelege pe celălalt. Deși lucrul interesant este că aici nu vei putea modifica raza umbrei. Ar fi grozav dacă am avea această oportunitate, dar pur și simplu nu este aici.

Umbre de bloc încorporate

Acum am acoperit elementele de bază și acum înțelegeți sintaxa umbrelor CSS. Este timpul să înveți cum să faci umbre interioare și interioare. Pentru a converti umbra într-una inserată, trebuie doar să adăugăm cuvântul inserție.

De aceea am început cu o sintaxă simplă. În general, fragmentul de cod cu umbră ar putea fi puțin confuz, dar odată ce ați înțeles, va părea simplu.

Aici, toate valorile funcționează practic la fel, doar umbra este plasată în interiorul blocului. În această imagine putem vedea cât de mult poate afecta raza de răspândire a umbrei modul în care arată umbra:

Observați că de data aceasta am folosit o culoare RGBa în loc de o valoare HEX. Acest lucru este excelent pentru umbre, deoarece valoarea opacității face ușoară și rapidă întunecarea sau luminarea umbrei.

Imagini

Este destul de ușor să aplicați box-shadow unui element div gol, dar ce se întâmplă dacă doriți să aruncați o umbră pe o imagine? Sună simplu, dar în realitate este destul de complicat. Să ne uităm la cod și să vedem rezultatul pe care îl va produce. Să începem cu o etichetă img simplă.

Acum îl vom specifica în CSS-ul nostru și vom adăuga box-shadow. Ai putea crede că ceva de genul acesta ar funcționa:

Img (
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}
Din păcate, acest lucru ne va conduce la următorul rezultat. Imaginea va funcționa, dar umbra va fi invizibilă!

Deci, cum aplicăm o umbră interioară unei imagini? Există mai multe metode de implementare și toate au avantajele și dezavantajele lor. Să ne uităm la cele mai populare două abordări.

Prima soluție este să înfășurați imaginea într-un div care are aceeași dimensiune cu imaginea și apoi să aruncați o umbră pe acel div, folosind de asemenea poziționare relativăși z-index la imagine. Codul nostru va arăta astfel:

div(
înălțime: 200px;
latime: 400px;
}

img (
înălțime: 200px;
latime: 400px;
poziție: relativă;
indicele z: -2;
}

Această abordare funcționează, dar necesită cod suplimentar, și destul de multe CSS suplimentare. Alternativ, puteți utiliza o imagine HTML și lipiți imagine de fundal la Ajutor CSS. Folosind această abordare, vă puteți asigura că imaginea nu va acoperi umbra și va fi plasată sub ea în mod implicit.

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

Dacă combinăm aceste tehnici cu o propagare destul de puternică, putem obține o vignetare a imaginii destul de puternică folosind numai CSS.

Umbră de text încorporată

Chiar dacă implementarea umbrelor de bloc încorporate este complexă, ele sunt destul de simplu de înțeles. Introduceți cuvântul inset și umbra dvs. va deveni internă. E simplu.

Din păcate, lucrurile sunt mult mai complicate cu umbrele textului. Valoarea inserată este incompatibilă cu umbra textului, așa că nimic nu va funcționa aici:

În schimb, trebuie să le combinăm puțin. Implementarea este neobișnuită, așa că vom împărți munca în două etape pentru a înțelege mai bine ce se întâmplă aici. Mai întâi, trebuie să introducem titlul h1 și să aplicăm următoarele stiluri:

H1 (
culoare de fundal: #565656;
culoare: transparent;
}
Și acum suntem deja într-o situație ciudată. Setăm culoarea de fundal la întuneric, umbra textului la alb și culoare transparentă umple. Dacă acest lucru vi se pare ciudat, uitați-vă la rezultat:

Nu este deloc ceea ce aveam nevoie. Interesant este că ne-am întors la început. Ingredientul secret care face ca totul să funcționeze este parametrul background-clip setat la text.

H1 (
culoare de fundal: #565656;
culoare: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip:text;
-moz-background-clip: text;
clip de fundal: text;
}
Setând parametrul background-clip la text, putem exprima eficient tot ceea ce se întâmplă în fundal (imagini, gradații, culori etc.) de-a lungul conturului textului. Când facem acest lucru folosind codul pe care l-am creat deja, rezultatul este următorul:

După cum puteți vedea, avem un efect destul de frumos. Margini neclare au fost decupate și acum creează senzația unei umbre încorporate. Între timp, text-shadow ne oferă posibilitatea de a seta nivelul de luminozitate al fundalului și, de asemenea, creează un efect ușor ridicat în exteriorul textului. Dacă schimbăm valoarea umbrei de la 0,5 la 0,3, textul va deveni mai întunecat.

Suport pentru browser

Dacă doriți să utilizați abordări cu diferiți parametri ciudați, cum ar fi background-clip, atunci trebuie să știți unde va funcționa și unde nu. Ca întotdeauna, când vine vorba de suport pentru browser, apelăm la .

Pe baza acestui tabel, parametrul background-clip funcționează destul de bine în majoritatea browserelor. Chiar și IE9 îl acceptă! Este posibil să aveți probleme cu unele browsere învechite.

Concluzie

Acum știi ce ar trebui să știi despre umbrele inserate în CSS. Aceasta este o zonă foarte interesantă de explorat. Este puțin probabil ca toate abordările să fie intuitive și va dura ceva timp pentru a stăpâni. Spuneți-ne ce părere aveți despre soluțiile propuse și pe care o folosiți?

Odată cu apariția standardului CSS 3 a introdus proprietatea box-shadow, care a devenit utilizată pe scară largă în rândul dezvoltatorilor web, deoarece facilitează adăugarea uneia sau mai multor umbre în caseta unui element pentru a da efectul vizual dorit.

În articolul anterior, ne-am uitat la proprietatea border-radius, folosind-o, puteți obține o umbră cu colturi rotunjite. Prin analogie cu o umbră de text (text-shadow), puteți crea mai multe umbre, acestea sunt aplicate în funcție de axa z din față în spate (cu prima umbră dată deasupra).

Să aruncăm o privire mai atentă asupra sintaxei acestei proprietăți moderne:

Să ne uităm la el în ordine valori posibile această proprietate:

Sens	Descriere
nici unul	Umbra nu este afișată. Aceasta este valoarea implicită.
medalion	Valoare opțională. Dacă această valoare nu este specificată (implicit), umbra va fi pe exteriorul elementului și va crea efectul de bombare a elementului. În funcție de disponibilitate cuvânt cheie(valori) inserat, umbra va cădea în interiorul elementului și va crea un efect stricat. Cu alte cuvinte, este o schimbare de la o umbră exterioară la una interioară.
h-umbra	Valoare cerută. Setează locația umbrei orizontale. Sunt permise valori negative.
v-umbră	Valoare cerută. Setează locația umbrei verticale. Sunt permise valori negative.
raza de estompare	Valoare opțională. Setează raza de estompare. Cu cât valoarea este mai mare, cu atât este mai mare neclaritatea, făcând umbra mai mare și mai ușoară. Dacă valoarea nu este specificată, valoarea va fi 0 (sharp - umbre distincte). Valorile negative nu sunt permise.
raza de raspandire	Valoare opțională. Dimensiunea umbrei (raza de întindere a umbrei). Cu valori pozitive umbra se va extinde, iar cu valori negative se va micșora. Dacă nu este specificată nicio valoare, valoarea va fi 0 (umbra corespunde mărimii elementului).
culoare	Valoare opțională. Definește culoarea umbrei (HEX, RGB, RGBA, HSL, HSLA, „Culori predefinite”). Valoarea implicită este negru.

Principalele puncte pe care trebuie să le înțelegeți pentru a crea umbre pentru elemente sunt:

Aș dori să vă atrag atenția asupra faptului că proprietatea box-shadow este acceptată în prezent de toate browserele moderne:

Proprietate			Operă		IExplorer	Margine
cutie-umbră	10.0 4.0 -webkit-	4.0 3.5 -moz-	10.5	5.1 3.1 -webkit-	9.0	12.0

Dacă doriți să extindeți suportul pentru unele browsere, inclusiv pentru mobil iOS 3.2 - 4.3Și Android 2.1 - 3, atunci este recomandat să folosiți prefixe de producător și să folosiți următoarea sintaxă (în exemplele din articol, sintaxa va fi folosită doar pentru browsere moderne):

-webkit-box-shadow : valoare ; /* Safari 3.1 - 4, IOS 3.2 - 4.3 și Android 2.1 - 3 */-moz-box-shadow : valoare ; /* Firefox 3.5 - 3.6 */ box-shadow : value ; /* tabelul de mai sus */

Să trecem la practică și să începem cu exemplu simplu, în care adăugăm o umbră elementelor:

Rezultatul exemplului nostru:

Utilizarea umbrelor multiple

În exemplul următor, îmi propun să luăm în considerare efect interesant amestecarea culorilor, care poate fi realizată prin utilizarea mai multor umbre:

• Două blocuri de lățime și înălțime fixe (15em și 10em), au adăugat margini pentru toate părțile (2em) și setați blocurile să fie block-line pentru a le putea alinia.
• Pentru primul bloc cu clasa .Test am indicat noi patru umbre cu diferite valori de umbră orizontale și verticale, astfel încât elementul să aibă umbre diferite pe toate părțile. Raza de estompare pentru toate umbrele a fost setată la aceeași. Culoarea fiecărei umbre este diferită și este specificată folosind culori predefinite.
• Pentru al doilea bloc cu clasa .test2 am indicat noi patru umbre cu diferite valori de umbră orizontale și verticale. Raza de estompare pentru toate umbrele a fost setată la aceeași, în timp ce întinderea umbrei a fost setată la negativă, ceea ce a dus la o scădere a umbrei în sine. Culoarea fiecărei umbre este diferită și este specificată folosind sistemul RGBA.

Rezultatul exemplului nostru:

Utilizarea umbrelor pentru imagini

Exemplul final al acestui articol se va concentra pe utilizarea umbrelor pentru imagini. Aș dori să vă atrag imediat atenția asupra faptului că indică direct umbra pt element HTML Nu va funcționa, dar avem posibilitatea de a specifica o imagine ca fundal pentru elementul care ne interesează și apoi să atribuim umbra de care avem nevoie acestui element.

Ne vom uita la lucrul cu imagini de fundal în detaliu în articolul din manual „”, iar acum, pentru a pune capăt studiului utilizării umbrelor, vom atinge superficial și vom folosi imaginea ca fundal pentru un element în cele ce urmează. exemplu:

• Două blocuri de lățime și înălțime fixe (237px și 232px), au adăugat margini pentru toate laturile (2em) și setați blocurile să fie block-line pentru a le putea alinia. Am setat dimensiunea blocului 237px cu 232px la dimensiunea imaginii astfel încât în această etapă antrenamentul nu a trebuit să scaleze imaginea pentru a se potrivi cu elementul și să afecteze acele proprietăți CSS care sunt planificate pentru a fi studiate într-o etapă ulterioară (în articolul manual " ").
• Pentru primul bloc cu clasa .Test Am specificat o valoare zero pentru umbra orizontală și verticală, dar în același timp am specificat o rază de estompare de 50px și am extins-o setând o rază de întindere de 10px. Culoarea umbrei a fost indicată cu o culoare predefinită (violet). În plus, am specificat cuvântul cheie inset în declarație, care face ca umbra să cadă în interiorul elementului. Cu alte cuvinte, am creat o umbră interioară a elementului.
• Pentru al doilea bloc cu clasa .test2 Am specificat o valoare zero pentru umbra orizontală și verticală, dar în același timp am specificat o rază de estompare de 50px și am extins-o setând o rază de întindere de 10px. Culoarea umbrei este specificată în modul RGBA.

Rezultatul exemplului nostru:

Orez. 98 Exemplu de utilizare a umbrelor pentru imagini în CSS (proprietatea box-shadow)

Întrebări și sarcini pe această temă

Înainte să începi să studiezi subiectul următor ia sarcina practică:

Dacă întâmpinați dificultăți la finalizare sarcină practică Puteți oricând deschide exemplul într-o fereastră separată și inspectați pagina pentru a înțelege ce cod CSS a fost folosit.

2016-2019 Denis Bolshakov, puteți trimite comentarii și sugestii pe site la [email protected]

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ă. La sens diferit 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):

Colorează 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ă adaugi puțin în plus Marcaj HTMLși CSS. A doua modalitate este să setați imaginea ca fundal blocul 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 instalare fundal întunecatși o umbră ușoară:

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:

proprietate CSS box-shadow adaugă una sau mai multe umbre unui element. Pentru a specifica mai multe umbre, trebuie să adăugați sens suplimentar umbre/e separate prin virgule.

Suport pentru browser

Proprietate			Operă		IExplorer	Margine
cutie-umbră	10.0 4.0 -webkit-	4.0 3.5 -moz-	10.5	5.1 3.1 -webkit-	9.0	12.0

Sintaxa CSS:

cutie-umbra: „niciuna| insert h-umbră v-umbră blur-radius răspândire-rază culoare | initial | moşteni";

Sintaxa JavaScript:

Object.style.boxShadow = „10px 5px 5px roșu”

Valorile proprietăților

Sens	Descriere
nici unul	Umbra nu este afișată. Aceasta este valoarea implicită.
medalion	Valoare opțională. Dacă această valoare nu este specificată (implicit), umbra va fi pe exteriorul elementului și va crea efectul de bombare a elementului. Dacă cuvântul cheie inserat (valoare) este prezent, umbra va cădea în interiorul elementului și va crea un efect de indentare. Cu alte cuvinte, este o schimbare de la o umbră exterioară la una interioară.
h-umbra	Valoare cerută. Setează locația umbrei orizontale. Sunt permise valori negative.
v-umbră	Valoare cerută. Setează locația umbrei verticale. Sunt permise valori negative.
raza de estompare	Valoare opțională. Setează raza de estompare. Cu cât valoarea este mai mare, cu atât este mai mare neclaritatea, făcând umbra mai mare și mai ușoară. Dacă valoarea nu este specificată, valoarea va fi 0 (sharp - umbre distincte). Valorile negative nu sunt permise.
raza de raspandire	Valoare opțională. Dimensiunea umbrei (raza de întindere a umbrei). Cu valori pozitive umbra se va extinde, iar cu valori negative se va micșora. Dacă nu este specificată nicio valoare, valoarea va fi 0 (umbra corespunde mărimii elementului).
culoare	Valoare opțională. Definește culoarea umbrei (HEX, RGB, RGBA, HSL, HSLA, „Culori predefinite”). Valoarea implicită este negru.
	Setează proprietatea la valoarea implicită.
	Indică faptul că valoarea este moștenită de la elementul părinte.

Versiunea CSS

CSS3

Mostenit

Nu.

Animabil

Da.

Exemplu de utilizare