HGP.ro ::….

Acu` hăt timp, pe vremea în care <table> era şef prin lumea online-ului, dacă voiai o umbră trebuia să o faci prin şmecherii cu tabelele pentru eficienţă; iar dacă voiai şi un gradient atunci nu aveai de ales decât să pui imagini.

Însă a venit şi vremea în care se poate face totul din CSS! Şi nu vorbesc despre CSS 3 despre care browserele au auzit doar în reviste, în momentul de faţă. Uite o metodă prim care poţi da proprietăţi interesante unui element, compatibil cu cele mai multe browsere.

Browser compatibility
Firefox 3.5+
Safari 3+
Google Chrome
Opera 10.50
Internet Explorer 5.5+

Metoda standard
Cea mai simplă şi acceptată de majoritatea browserelor este următoarea.

.shadow {

box-shadow: 1px 2px 3px 4px #000 inset;

}

box-shadow este o proprietate mult dezbătută pe forumurile şi blogurile de specialitate, însă pentru moment este foarte bine s-o folosim. Hai să desfacem proprietatea de mai sus în bucăţi!!

* Prima variabilă (1px, în cazul nostru) determină x-offset-ul, adică pe orizontală. O valoare pozitivă aruncă umbra în partea dreaptă, iar o valoare negativă în partea stângă.
* Cea de-a doua variabilă (2px) determină y-offset-ul, adică pe verticală. Şi după cum probabil ţi-ai dat seama, valorile pozitive pune umbra jos, iar cea negativă deasupra elementului.
* A treia variabilă (3px) are scopul de a decide raza blur-ului. Pentru că nu există cerc cu rază negativă, nici aici nu se pot folosi valori mai mici decât zero. În cazul în care setezi valoarea=0 atunci marginile umbrei tale vor fi ascuţite (fără gradient).
* Valoarea a patra (4px) este folosită pentru a stabili distanţa pe care se întinde umbra ta. Pentru valorile pozitive umbra se întinde în toate direcţiile spre exterior, iar pentru valorile negative se va contracta spre interior. Dacă vrei să ai umbre în interiorul elementului foloseşte valori negative.
* #000 este variabila care stabileşte culoarea umbrei
* cuvântul “inset” se foloseşte doar când vrei ca umbra să fie generată în interiorul elementului (“inner shadow”)

Dar pentru că atunci când vine vorba de compatiblitate între browsere există întotdeauna câţiva nebuni trebuie să mai adăugăm câteva linii de cod!

Opera 10.5 (pentru Windows) este singurul browser care a implementat recunoaşterea acestei proprietăţi fără să folosească un nume “third party” sau “vendor” (cum este moz sau webkit). Prin urmare trebuie să-i mulţumim şi pe fraţii lui Firefox, Safari şi Google Chrome, astfel codul nostru (puţin curăţat pentru a genera o umbră externă şi simplă), cu aceleaşi explicaţii de mai sus, va arăta astfel:

.shadow {

box-shadow: 1px 2px 3px #000;
-moz-box-shadow: 1px 2px 3px #000;
-webkit-box-shadow: 1px 2px 3px #000;

}

Hai sa rezolvam si IE

Cumnatu Internet Explorer, special ca de obicei! Dar avem leac şi de cojocul lui cu filtrenele specifice Microsoft DropShadow sau Shadow. Pentru că DropShadow desenează o umbră plată şi plictisitoare eu prefer să folosesc Shadow. La acest tip de filtru nu se mai determină valori atât de detaliate ca cele de mai sus (x-offset, y-offset sau altele) şi se merge pe o asemănare cu vântul din natură. Variabilele diferite faţă de cele de mai sus, în acest caz sunt “puterea, direcţia”.

Strength stabileşte “intensitatea” umbrei.
Direction setează direcţia în care va fi umbra. Iar valorile sunt asignate în felul următor:
0 – Top
45 – Top right
90 – Right
135 – Bottom right
180 – Bottom
225 – Bottom left
270 – Default. Left
315 – Top left

Iaca şi codul nostru final, combatibil cu browserele promise la începutul articolului.

.shadow {

-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;

/* For IE 8 */
-ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid: DXImageTransform.Microsoft.Shadow (Strength=4, Direction=135, Color='#000000');

}