CSS3 - Background proprietati noi

• Culoare Gradient
• background-origin
• background-clip
• CSS3 Imagini multiple de fundal

CSS3 contine trei proprietati noi pt. background: background-size, background-origin, si background-clip, de asemenea, puteti adauga mai multe imagini pentru fundalul unui element, si chiar sa folositi culori gradient, cu linear-gradient.

background-size

Proprietatea background-size permite determinarea marimii imaginii de background. Astfel, puteti folosi aceeasi imagine in mai multe elemente cu dimensiuni diferite.

- Valori (puteti specifica dimensiunile in pixeli (px) sau in procente (%)):

• auto - e valoarea predefinita (default). Redimensioneaza laturile imaginii astfel incat se mentine aspectul imaginii, daca ambele valori sunt auto, imaginea apare la dimensiunile ei.
• procente - Redimensioneaza lungimea si inaltimea pozei pt. background, in procente relative la elementul parinte (nu la imagine). Prima valoare reprezinta lungimea, a doua inaltimea.
  Daca se specifica numai o valoare, cealalta e setata "auto".
• pixeli - Redimensioneaza lungimea si inaltimea la marimile specificate.
  Daca se specifica numai o valoare, cealalta e setata "auto".
• cover - Poza pt. background e marita (sau micsorata) astfel incat sa acopere toata suprafata de fundal.
• contain - Poza pt. background e marita (sau micsorata) astfel incat sa fie cuprinsa in zona de continut.

Proprietatea background-size e recunoscuta in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+.

- Exemplu:

<style type="text/css"><!--
#id1 {
 width:200px;
 height:100px;
 border:1px solid blue;
 background:url('css3.jpg');
 background-size:100px 60px;
 background-repeat:no-repeat;
}
#id2 {
 width:300px;
 height:120px;
 border:1px solid #01da02;
 background:url('css3.jpg');
 background-size:contain;
 background-repeat:no-repeat;
}
#id3 {
 width:300px;
 height:120px;
 border:1px solid silver;
 background:url('css3.jpg');
 background-size:cover;
}
--></style>

<div id="id1">Curs CSS  - dimensiuni in pixeli</div>
<div id="id2">www.discant.ro - valoare contain</div>
<div id="id3">www.discant.ro - valoare cover</div>

Rezultat:

Culoare Gradient

Proprietatea background poate primi o valoare speciala care defineste o culoare gradient.
Sintaxa pentru codul ce defineste gradient-ul difera de la un browser la altul, de aceea trebuie specificata pentru fiecare din navigatoarele web majore, dupa cum se vede in exemplul urmator.

<style type="text/css"><!--
#id1 {
 width:300px;
 height:120px;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda', endColorstr='#0308fe');   /* IE 7, 8 */
 background-image: -ms-linear-gradient(top left, #01fe02, #0102fe);     /* IE10 */
 background: -moz-linear-gradient(top left, #1f1, #fff, #11f);          /* Mozilla Firefox */
 /* Safari, Chrome */
 background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #0f1), color-stop(0.5, #fff), color-stop(1, #01f));
 background-image: -o-linear-gradient(top left, #01fe02, #0102fe);          /* Opera 11.1+ */
 background: linear-gradient(top left, #1f1, #fff, #11f);          /* W3C Markup */
}
--></style>
<div id="id1">Curs  CSS<br />
www.discant.ro</div>

Rezultat:
Directia culori gradient si distanta pe care culorile o iau poate fi controlata.
Daca doriti ca directia gradient-ului sa inceapa de sus, folositi doar top, in loc de "top left"; pentru stanga adaugati doar left. Ca sa setati distanta culorii in gradient, adaugati o valoare de tip procent dupa culoare (sau o valoare intre 0 si 1 pt. browsere Webkit).
- Exemplu:

<style type="text/css"><!--
#id1 {
 width:300px;
 height:120px;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dafeda', endColorstr='#0308fe');   /* IE 7, 8 */
 background-image: -ms-linear-gradient(top, #01fe02 0%, #0102fe 99%);     /* IE10 */
 background: -moz-linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);          /* Mozilla Firefox */
 /* Safari, Chrome */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0f1), color-stop(0.6, #fff), color-stop(1, #01f));
 background-image: -o-linear-gradient(top, #01fe02 0%, #0102fe 99%);          /* Opera 11.1+ */
 background: linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%);          /* W3C Markup */
}
--></style>

background-origin

Proprietatea background-origin specifica zona de pozitionare a imaginii in background. Poate lua trei valori diferite:

• padding-box - pozitia e relativa la coltul din stanga-sus unde incepe padding.
• border-box - pozitia e relativa la coltul din stanga-sus a bordurii.
• content-box - imaginea pt. background e pozitionata de la coltul stanga-sus unde incepe continutul.

background-origin e recunoscut in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+.

- Exemplu:

<style type="text/css"><!--
#id1 {
 width:350px;
 height:120px;
 padding:20px;
 border:3px solid blue;
 background:url('css3.jpg');
 background-repeat:no-repeat;
 background-color:#bcfede;
 background-origin:content-box;
}
#id2 {
 width:350px;
 height:120px;
 padding:20px;
 border:3px solid blue;
 background:url('css3.jpg');
 background-repeat:no-repeat;
 background-color:#bcfede;
 background-origin:border-box;
}
--></style>

<div id="id1">Pozitioneaza imaginea in background incepand de la continut</div>
<div id="id2">Pozitionare relativa la bordura</div>

Rezultat:

background-clip

Proprietatea background-clip specifica zona de colorare a fundalului, e folosita pentru a determina daca background-ul se extinde sau nu pana in margini.
Primeste una din aceste trei valori:

• border-box - culoarea de fundal se extinde pana in margini.
• padding-box - culoarea de fundal e fixata la padding.
• content-box - culoarea de fundal e fixata la zona continutului.

background-clip e recunoscut in IE9+, Firefox 4+, Opera, si Chrome.

Exemplu:

<style type="text/css"><!--
#id1 {
 width:350px;
 height:120px;
 padding:20px;
 border:2px solid blue;
 background-color:#cdfeda;
 background-clip:padding-box;
 -webkit-background-clip:padding-box;      /* Safari */
}
#id2 {
 width:350px;
 height:120px;
 padding:20px;
 border:2px solid blue;
 background-color:#cdfeda;
 background-clip:content-box;
 -webkit-background-clip:content-box;      /* Safari */
}
--></style>

<div id="id1">background-clip cu padding-box</div>
<div id="id2">background-clip cu content-box</div>

Rezultat:

CSS3 Imagini multiple de fundal

CSS3 permite aplicarea mai multor imagini de background la un element.
Aceasta caracteristica e suportata in Firefox 3.6+, IE 9, Safari, si WebKit.
Imaginile multiple pentru background se adauga in proprietatea background-image separate prin virgula (imaginea specificata mai la inceput apare mai in fata).
Valorile din celelalte proprietati legate de poze pt. fundal se adauga in ordinea si numarul imaginilor din background-image, sau doar o singura valoare pentru toate.

- Exemplu:

<style type="text/css"><!--
#id1 {
 width:400px;
 height:150px;
 background-image: url('html_course.jpg'), url('css3.jpg');
 background-repeat: no-repeat, repeat-x;
 background-position: center top, center bottom;
}
--></style>

<div id="id1">Imagini multiple de background</div>

Rezultat: