Folosind proprietatea CSS3 -box-shadow, GB Wordpress și Blogul de dezvoltare web

box-shadow

Nu cu mult timp în urmă am vorbit despre cum să folosiți proprietateaCSS3 box sizing, astăzi vom vorbi despre o altă proprietate care vă permite să adăugați volum vizual blocurilor din pagină.

Această proprietate estebox-shadow, despre care s-au scris multe pe Internet, bune și diferite. Nu o să mă repet și să spun ce fel de animal este acesta. Voi arăta câteva trucuri despre cum să faci câteva mișcări care nu sunt clar vizibile, dar adaugă farmec designului.

În primul rând, câteva cuvinte despre proprietatea în sine și sintaxa acesteia, este destul de simplu:

proprietatea

  • Decalaj vertical — o valoare pozitivă mută umbra la dreapta blocului, respectiv o valoare negativă la stânga.
  • Decalaj orizontal - o valoare pozitivă mută umbra sub casetă, o valoare negativă o mută mai sus.
  • Blur - valorile negative nu pot fi specificate. Cu cât valoarea este mai mare, cu atât umbra este mai neclară (capac cu noi)
  • Întindere - un număr pozitiv întinde umbra, făcând-o mai mare. Comprese negative. În mod implicit, umbra are aceeași dimensiune ca și blocul - valoarea este 0
  • Culoarea este un parametru opțional, implicit este negru. Puteți specifica orice valoare în formatul disponibil în CSS.

Grozav, ne-am amintit cum funcționează proprietatea, acum hai să facem așa ceva...

Să adăugăm puțină profunzime documentului:

proprietatea

Folosim pseudo-elementul :before, care a apărut în specificația CSS3. Este destinat să afișeze conținutulTO al ieșirii elementului în sine. De fapt, adăugăm o umbră înainte de ieșirea paginii principale. Hai sa mergem mai departe. Să facem un bloc care să arate așa:

folosind

Mai întâi cod, mai târziu explicație:

În codul de mai sus, doimomente interesante.

Principiul formării umbrei este două pseudo-elemente care sunt afișate ÎNAINTE și DUPĂ bloc. Răsucim prima umbră cu trei grade în sensul acelor de ceasornic, a doua în sens invers acelor de ceasornic. Drept urmare, colțurile blocului par a fi ridicate deasupra planului principal al paginii. De fapt, nimic complicat, poți experimenta cu culori, locație, dimensiuni. Mai mult, specificația îți permite să faci cele mai îndrăznețe lucruri.

Și la sfârșit, câteva cuvinte despre suportul pentru browser: Firefox 3.5 și versiunile ulterioare, Webkit (Safari/Chrome), Opera 10.5 și versiunile ulterioare și IE 9, destul de ciudat.