Cauta rapid aici ↑

CSS 3 -- LINIE SI EFECT DE UMBRA

Noul standard CSS 3 ne permite sa rotunjim colturile unui element sau sa adaugam umbra unui element. Pentru a realiza acestea va trebui sa folosim urmatoarele proprietatii.

  • border-radius
  • box-shadow

Suport pentru browserele cele mai populare

Unele versiunii mai vechii ale browserelor nu suporta aceste proprietatii si pentru a ne asigura ca acestea se vor vedea si in aceste versiuni, atunci va trebui sa folosim urmatoarele cuvinte generale suportate de catre orice proprietate. Fiecare cuvant (oficial poarta denumire de prefix) este corespondent pentru un anumit browser si incepe cu liniuta si se termina tot cu liniuta. La sfarsitul unei declaratii de stil se va adauga ultima data si proprietatea cu valoare fara aceste cuvinte specifice.

  • INTERNET EXPLORER
  • CHROME
  • MOZILLA FIREFOX
  • SAFARI
  • OPERA
  • -ms-
  • -webkit-
  • -moz-
  • -webkit-
  • -o-

Proprietatea border-radius

Aceasta proprietate rotunjeste toate colturile unui element. Valorile pot fi in pixeli sau in procente. Spre exemplu, daca avem un div ce are inaltimea si latimea de 250px si proprietatea border-radius are valoarea este 50% atunci am creat un cerc. Pentru a putea fi vazut in browser va trebui sa ii setam si o linie sau sa ii setam un fundal.

Exista posibilitatea sa rotunjim doar un colt de la un element si pentru asta va trebui sa folosim una sau mai multe dintre urmatoarele proprietatii :

  • border-top-left-radius → coltul din stanga-sus
  • border-top-right-radius → coltul din dreapta-sus
  • border-bottom-left-radius → coltul din stanga-jos
  • border-bottom-right-radius → coltul din dreapta-jos

Proprietatea box-shadow

Acum avem posibilitatea sa dam o umbra unui element si este foarte usor de realizat. Proprietatea box-shadow face exact acest lucru. Valorile declarate sunt cel mai adesea patru la numar. Primele doua valorii fac referire la axele X si Y , a treia valoare va face referire la cat de pierduta (blurata) sa fie umbra si ultima valoare va face referire la culoarea umbrei si ea poate fi orice valoare pe care o stim. In exemplul de mai jos voi creea un cerc dintr-un div. In momentul cand se va ajunge cu mouse-ul deasupra acestuia, fundalul lui se va schimba intr-o alta culoare iar umbra acestuia va capata o alta culoare. Imaginea de ansamblu va fi cea a unui soare.