Cascading Style Sheets ( CSS) a fost introdus cu 13 ani in urma, iar CSS 2.1 a fost lansat acum 11 ani. Cand ne uitam la site-uri care au fost create acum 11 ani, este clar ca suntem la 1000 de km distanta de la acea epoca.

Este destul de remarcabil cat de mult s-a dezvoltat web-ul pe parcusul anilor, intr-un mod in care care niciodata nu ni l-am fi imaginat atunci.

CSS 3 se lanseaza pentru a aduce designul la urmatorul nivel. Cu o multime de caracteristici si instrumente noi, CSS 3 ne da speranta ca nu va mai trebui sa apelam la CSS hacks si tehnici Javascript pentru a stiliza un element.

Browser support

CSS 3 este in continua dezvoltare, si promite o varietate mare de module noi pentru designul paginilor noastre. Multe dintre aceste module nu au fost inca finalizate. Este foarte dificil de a estima o data cand browserele vor adopta noile caracteristici de CSS3.

Noile caracteristici vor fi implementate treptat, in browsere diferite, si ar putea trece inca un an sau doi inainte ca fiecare modul sa fie adoptat pe scara larga.

Oricum, este timpul sa introducem CSS3 in proiectele noastre, sa nu ne fie frica sa folosim treptat prorietatile si elementele noi in designurile noastre. Este timpul, si sta in puterea noastra sa fortam browserele sa se adapteze la CSS3.

Noi tehnici CSS 3

Exista mai multe functii si caracteristici noi si interesante introduse de CSS3 printre care: text-shadow, RGBA And Opacity, multiple backgrounds, border-radius, border-image, box-sizing, font-face-Attribute, etc.

Va vom prezenta pe scurt in acest articol cateva din aceste caracteristici.

Text-shadow effect

CSS3 elimina necesitatea de a folosi Photoshop si imagini in website, atunci cand avem nevoie de un simplu efect de umbra pentru un text.

Codul CSS:

p {text-shadow: 2px 2px 2px #000;}

Codul HTML:

<p>CSS 3 previews - Text-shadow effect</p>

Rezultatul:

Browser suport:
Safari, Opera, Firefox

Border-radius: rounded corners

Border-radius adauga colturi curbate la elementele HTML, fara a fi nevoiti sa folosim imagini de fundal. In prezent, este probabil proprietatea CSS3 cea mai utilizata.

Codul CSS:

p {
color: #1a1a1a;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background:#fff;
}

Codul HTML:

<p>CSS 3 previews - Border Radius, create rounded corners</p>

Rezultatul:

Browser suport:
Firefox, Safari

Box Shadow

La fel ca si text-shadow, box shadow adauga umbra la elementele HTML, fara a fi necesare imagini de fundal.

Proprietatea este data de 3 lungimi (horizontal offset of the shadow, vertical offset, blur radius) si atributul de culoare.

Codul CSS:

p {
box-shadow: 10px 10px 5px #000;
padding: 5px 5px 5px 15px;
background:#fff;
}

Codul HTML:

<p>CSS 3 previews – Box-shadow</p>

Rezultatul:

Browser suport:
Firefox, Safari

Atributul @font-face

Este cea mai anticipata caracteristica CSS3, fiind in proiect inca de pe vremea CSS2. Pentru a utiliza aceasta propietate, fiecare font trebuie declarat folosind atributul @font-face. In cazul in care un browser nu accepta atributul @font-face, acesta va reveni la urmatorul font-family specificat in CSS.

Codul CSS:

@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
p {
font-family: Delicious, sans-serif;
}

Codul HTML:

<p>CSS 3 previews - Font face atribute </p>

Rezultatul:

Browser suport:
Firefox, Safari, Opera. Internet explorer suporta proprietatea daca fontul este de format EOT.