Efecte CSS3

28 Apr

Va voi prezenta cateva efecte noi aduse de CSS3. Pentru a le putea vedea/folosi va trebui sa aveti un browser care sa stie sa interpreteze CSS3.

1. Umbra text CSS3

Sintaxa este foarte simpla si trebuie atribuita elementului pentru care doriti sa afisati umbra.

text-shadow: pozitiaX pozitiaY razaBlur culoare;

Sa luam un exemplu.

text-shadow: 2px 2px 2px #000;

Rezultatul va fi:

Acest text va avea o umbra.


2. Transparenta CSS3

opacity: valoare;

Valoarea trebuie sa fie cuprinsa intre 0 (transparent) si 1 (opac).

Spre exemplu, sintaxa:

opacity: 0.6;

Va produce efectul:

Casuta transparenta.

3. Umbra div CSS3

Poate ca box-shadow este cea mai buna noutate din CSS3. Permite aplicarea unei umbre pe orice element.

Sintaxa este urmatoarea:

box-shadow: pozitiaX pozitiaY razaBlur culoare;

Sa luam exemplul:

box-shadow: 10px 10px 5px #888;

Iar in browser vom vedea afisat:

Casuta aceasta are o umbra.

4. Redimensionare elemente CSS3

Un alt lucru foarte bun inclus in CSS3 este redimensionarea elementelor din site.

Sintaxa este foarte simpla:

resize: both/horizontal/vertical;

Sa vedem exemplul div-ului de mai sus care are aplicata o umbra.

Casuta aceasta are o umbra si poate fi redimensionata.

Cam acestea ar fi noutatile generale. Sa ne jucam putin cu toate in finalul articolului.

Casuta aceasta are aplicate toate efectele.

Discuta articolul Efecte CSS3



Mozku Network

Ne gasesti si pe Facebook

Articole noi

Fisiere populare

  • Proiect Atestat Informatica Visual FoxPro (569)
  • Baza de date auto revizuita (254)
  • Twitter Patterns (214)
  • Baza de date auto (148)
  • Flash Newsletter (127)