Efecte CSS3

css, css3, efecte CSS3, Learn CSS, noutati CSS3

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:

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:

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.

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

Ti-a placut articolul Efecte CSS3?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

• Casute animate folosind jQuery