Totul despre CSS3

CSS3 este 100% compatibil cu versiunile anterioare de CSS. Nu va trebui sa ne facem griji din acest punct de vedere, deoarece browserele vor suporta intotdeauna CSS2.

Ce aduce nou CSS3 este faptul ca vechile specificatii au fost impartite in parti mai mici si s-au adaugat altele noi dand nastere astfel la module.

Unele din cele mai importante module de CSS3 sunt:

• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

Specificatiile CSS3 sunt in continua dezvoltare de catre W3C.
Cu toate acestea multe din proprietatile CSS3 sunt recunoscute de catre browserele moderne.

Cu CSS3 putem crea chenare cu colturi rotunjite si putem adauga umbre fara a mai fi nevoiti sa folosim programe precum Corel sau Photoshop.
In acest capitol vom invata despre urmatoarele proprietati:

• border-radius
• box-shadow

Proprietate	Suportul Browserelor
border-radius
ox-shadow
border-image

Adaugarea colturilor rotunjite in CSS2 era foarte dificila datorita faptului ca pentru fiecare colt trebuia introdusa cate o imagine. In CSS3 este mult mai usor.
Pentru a crea colturi rotunjite folosim functia border-radius.


div {
border-radius:25px;
-moz-border-radius:25px;
}


Asa cum spune si titlul cu ajutorul acestei functii box-shadow putem adauga umbre elementelor noastre.


div {
box-shadow: 5px 5px 5px #888888;
}


SUS

CSS3 contine cateva proprietati noi cand vine vorba de background, proprietati care permit manipularea imaginilor de fundal cu mai multa usurinta.

In acest capitol vom invata despre:

• background-size
• background-origin

De asemenea CSS3 permite utilizarea mai multor imagini de fundal pentru aceeasi zona.

Proprietate	Suportul Browserelor
background-size
background-origin

Cu aceasta functie specificam marimea imaginii de fundal.
Inainte de CSS3 imaginea de fundal era determinata de dimensiunile imaginii pe care doream sa o folosim, acum insa, lucrurile s-au schimbat permitandu-ne astfel sa folosim aceeasi imagine in mai multe contexte.

Putem specifica dimensiunile dorite atat in pixeli cat si in procente. Daca specificam dimensiunile in procente acestea for fi proportionale cu dimensiunea zonei in care ne aflam.

Imaginea in marimea originala:


div
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}



div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}


Folosind functia background-origin specificam zona de pozitionare a imaginii de fundal.

Imaginea de fundal poate fi pozitionata in trei arii si anume: content-box, padding-box sau border-box.


div
{
background-origin:content-box;
-webkit-background-origin:content-box; /* Safari */
-moz-background-origin:content-box; /* Firefox */
background:url(bazzz-icon.png);
background-repeat:no-repeat;
background-size:50px 52px;
padding-top:50px;
padding-left:50px;
border-top:50px;
border-left:50px;
}



div
{
background-origin:padding-box;
-webkit-background-origin:padding-box; /* Safari */
-moz-background-origin:padding-box; /* Firefox */
background:url(bazzz-icon.png);
background-repeat:no-repeat;
background-size:50px 52px;
padding-top:50px;
padding-left:50px;
border-top:50px;
border-left:50px;
}



div
{
background-origin:border-box;
-webkit-background-origin:border-box; /* Safari */
-moz-background-origin:border-box; /* Firefox */
background:url(bazzz-icon.png);
background-repeat:no-repeat;
background-size:50px 52px;
padding-top:50px;
padding-left:50px;
border-top:50px;
border-left:50px;
}


CSS3 permite utilizarea mai multor imagini de fundal in aceeasi zona.

SUS

CSS3 contine cateva caracteristici noi in ceea ce priveste efectele pe care le putem aplica textului.
In aceast capitol vom invata despre:

• text-shadow
• word-wrap

Proprietate	Suportul Browserelor
text-shadow
word-wrap

Folosind functia text-shadow putem adauga umbre textului nostru ne mai fiind astfel obligati sa folosim programe de editare ca cele amintite in unul din capitolele anterioare.


div {
text-shadow: 1px 1px 1px #333333;
}

Unde primele doua valori sunt folosite pentru pozitionarea umbrei pe orizontala si verticala. In cazul de fata eu am folosit 1px.
A treia valoare reprezinta valoarea blur-ului. In cazul de fata tot 1px.
Codul hexazecimal este pentru culoarea umbrei.

In vestiunea anterioara de CSS daca un cuvant era prea lung iesea din spatiul dedicat textului ca in cazul de mai jos.

Acesta este un paragraf care contine un cuvant deosebit de lung: Acestaesteuncuvantfoartefoartefoartelung. Cuvant care va depasi chenarul destinat acestui paragraf.

In CSS3 functia word-wrap ne permite sa fortam despartirea acestui cuvant atfel incat sa incapa in chenar.

Acesta este un paragraf care contine un cuvant deosebit de lung: Acestaesteuncuvantfoartefoartefoartelung. Cuvant care va depasi chenarul destinat acestui paragraf.


p {
word-wrap: break-word;
}


SUS

Inainte de CSS3 designerii paginilor web trebuiau sa foloseasca font-uri care erau instalate default pe toate calculatoarele.
Cu CSS3 acestia pot folosi orice font doresc.

Acest lucru se face astfel:
Daca folosesti un font care nu se gaseste de obicei pe toate calculatoarele este suficient sa urci acest font pe site si atunci cand un vizitator nu detine acest font acesta va fi descarcat automat.
Insa pentru a fi posibila descarcarea lui trebuie sa folosim noua regula @font-face.

Cu ajutorul acestei reguli putem defini un nume pentru acest font si de asemenea calea de unde poate fi descarcat, astfel:

@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot') format("opentype"); /* IE */
}


Aceasta proprietate este suportata de majoritatea browserelor moderne, astfel:

• Internet Explorer 9 suporta doar fisierele de tip .eot(Embedded OpenType)
• Firefox, Chrome, Safari and Opera suporta fisiere precum .ttf (True Type Fonts) si otf (OpenType Fonts)

Proprietate	Suportul Browserelor
@font-face

Pentru a folosi fonturi noi trebuie doar sa scriem "myFirstFont" ca si valoare pentru font-family:

div {
font-family:myFirstFont;
}


Trebuie sa adaugam o noua regula si anume:

font-weight:bold


@font-face {
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot') format("opentype"); /* IE */
font-weight:bold;
}

Fisierul "Sansation_Bold.ttf" este un font care contine caractere ingrosate.
Browserele vor folosi aceasta proprietate ori de cate ori un text a fost formatat ca fiind ingrosat cu functia "myFirsFont".

In tabelul de mai jos sunt enumerati toti descriptorii care pot fi definiti folosind regula @font-face:

SUS

Cu ajutorul CSS3 Transform putem muta, scala, roti si inclina elemente de design.

Folosind transform elementul isi va modifica forma, marimea si pozitia.
Putem transforma elementele 2D sau 3D. Despre transformarea 3D vom invata in capitolul urmator.

Proprietate	Suportul Browserelor
transform

In acest capitol vom invata despre metodele de transformare 2D.

• translate()
• rotate()
• scale()
• skew()

Utilizand aceasta caracteristica elementul se va deplasa de la pozitia initiala in functie de parametrii pe care ii introducem:

• Pe axa X - pentru deplasarea pe orizontala
• Pe axa Y - pentru deplasarea pe verticala


div {
transform: translate(50px,10px);
-ms-transform: translate(50px,10px); /* IE 9 */
-webkit-transform: translate(50px,10px); /* Safari and Chrome */
-o-transform: translate(50px,10px); /* Opera */
-moz-transform: translate(50px,10px); /* Firefox */
}


Valorile folosite au mutat elementul nostru 50px in stanga si 10px in jos

Utilizand aceasta caracteristica elementul se va roti in sensul acelor de ceasornic la unghiul dorit. Folosind valori negative putem roti elementul contra acelor de ceasornic.


div {
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}


Utilizand aceasta caracteristica putem micsora sau mari elementul dorit in functie de parametrii pe care ii introducem:

• Pe axa X - se mareste/micsoreaza pe latime
• Pe axa Y - se mareste/micsoreaza pe inaltime


div {
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5); /* IE 9 */
-webkit-transform: scale(1.5,1.5); /* Safari and Chrome */
-o-transform: scale(1.5,1.5); /* Opera */
-moz-transform: scale(1.5,1.5); /* Firefox */
}


Utilizand aceasta functie elementul se inclina cu un anumit unghi in functie de parametrii introdusi.


div {
transform: skew(10deg,5deg);
-ms-transform: skew(10deg,5deg); /* IE 9 */
-webkit-transform: skew(10deg,5deg); /* Safari and Chrome */
-o-transform: skew(10deg,5deg); /* Opera */
-moz-transform: skew(10deg,5deg); /* Firefox */
}

Folosind skew(10deg,5deg) elementul se va roti cu 10 de grade in jurul axei X si 5 grade in jurul axei Y.

SUS

Pe langa metoda de transformare 2D, CSS3 permite modificarea elementelor si in mod 3D.
In acest capitol vom invata cateva din metodele de transformare 3D:

• rotateX()
• rotateY()

Din pacate nu toate browserele (cel putin nu pana in acest moment) suporta transformarea 3D.

Proprietate	Suportul Browserelor
transform

Diferenta dintre cele doua metode de transformare/modificare este urmatoarea:

Cu CSS3 putem adauga efecte cu trecere de la un stil la altul fara a fi nevoiti sa folosim animatii Flash sau JavaScript.
Pentru a intelege despre ce este vorba puteti testa exemplul de mai jos prin trecerea mouse-ului deasupra elementului:

CSS3
Transitions

Proprietate	Suportul Browserelor
transition

CSS3 transitions sunt efecte care lasa un element sa isi schimbe forma de la un stil la altul.
Pentru a face asta trebuie sa specificam doua lucruri:

• Trebuie sa specificam proprietatea CSS careia dorim sa ii adaugam un efect
• Trebuie sa specificam durata tranzitiei


div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}


Trebuie avut grija sa specioficam durata tranzitiei altfel nu vom observa nici o transformare, valoarea initiala fiind 0.


div:hover
{
width:300px;
}

Pentru exemplul urmator voi folosi mai multe proprietati de transformare intr-o singura instanta:


.transitions2
{
color:#FFF;
font-weight:bold;
border-radius: 5px 5px 5px 5px;
width:40px;
height:40px;
background:#FB5809;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
.transitions2:hover
{
width:80px;
height:80px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}


SUS