CSS3 - Background proprietati noi

CSS3 contine trei noi proprietati pentru background: background-size, background-origin si background-clip, in plus, se pot adauga mai multe imagini pt. background la un element HTML si se pot crea culori gradient cu: linear-gradient.

background-size

Proprietatea CSS background-size: width height; permite definirea lungimii si inaltimii (width height) de afisare a imaginii pt. background.

- Valori:

auto - (default) Seteaza dimensiunea laturii astfel incat sa se mentina raportul de aspect al imaginii. Daca ambele valori sunt "auto", imaginea apare la dimensiunile ei.
percentage - Seteaza dimensiunile de background a imaginii in procente raportate la elementul parinte (nu la imagine). Prima valoare pt lungime (width), a doua pt. inaltime (height).
Daca se adauga o singura valoare, a doua e considerata "auto".
pixels - Seteaza lungimea si inaltimea de afisare a imaginii pt. background la marimile specificate.
Daca se adauga o singura valoare, a doua e considerata "auto".
cover - Imaginea de background e dimensionata astfel incat sa umple complet zona de fundal.
contain - Dimensioneaza imaginea la marimea ce mai mare astfel incat sa fie continuta in suprafata de fundal.

- Exemplu:

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

<div id="id1">Free CSS Course - size in pixels</div>
<div id="id2">coursesweb.net - size contain</div>
<div id="id3">marplo.net - size cover</div>

Rezultat:

Free CSS Course - size in pixels

coursesweb.net - size contain

marplo.net - size cover

Culori Gradient

Pentru adaugare culoare gradient la fundal, se foloseste proprietatea background: linear-gradient(); cu aceasta sintaxa:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

- "direction" reprezinta directia de afisarie a culorilor: "to right", "to bottom right", "top left", "top bottom" (default). Daca nu e specificata, se considera "top bottom".
- "color-stop" sunt culorile de referinta pt. gradient.

Exemplu:

<style>
#id1 {
background: linear-gradient(to bottom right, #11ee22, #fefe88, #1122fb);
height:120px;
width:300px;
}
</style>

<div id="id1">Free CSS Course<br />
coursesweb.net</div>

Rezultat:

Free CSS Course
coursesweb.net

Se poate defini si distanta de referinta a culorilor din gradient, adaugand un procent dupa valoarea culorii.
- Exemplu:

<style>
#id1 {
background: linear-gradient(to bottom right, #11ee22 0%, #fefe88 40%, #1122fb 75%);
height:120px;
width:300px;
}
</style>

<div id="id1">Free CSS Course<br />
coursesweb.net</div>

background-origin

Proprietatea CSS background-origin specifica zona de pozitionare a imaginii de fundal.
Preia una din aceste valori:

padding-box - pozitionarea e relativa la coltul din stanga-sus a marginii de padding.
border-box - pozitionarea e relativa la coltul din stanga-sus a bordurii.
content-box - background-ul incepe din coltul stanga-sus a continutului.

- Exemplu:

<style>
#id1 {
width:350px;
height:120px;
padding:20px;
border:3px solid blue;
background:url('css/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('css/css3.jpg');
background-repeat:no-repeat;
background-color:#bcfede;
background-origin:border-box;
margin-top:5px;
}
</style>

<div id="id1">Position the background image within the content-box</div>
<div id="id2">Position the background image relative to the border</div>

Rezultat:

Position the background image within the content-box

Position the background image relative to the border

background-clip

Proprietatea background-clip se foloseste pentru a determina suprafata de afisare a culorii pentru fundal ( background-color ).
Preia una din aceste valori:

border-box - culoare de fundal se extinde pana la bordura.
padding-box - culoarea de fundal se extinde la padding.
content-box - culoarea de fundal apare doar in suprafata ocupata de continut.

Exemplu:

<style>
#id1 {
 width:350px;
 height:120px;
 padding:20px;
 border:2px solid blue;
 background-color:#cdfeda;
 background-clip:padding-box;
}
#id2 {
 width:350px;
 height:120px;
 padding:20px;
 border:2px solid blue;
 background-color:#cdfeda;
 background-clip:content-box;
}
</style>

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

Rezultat:

background-clip with padding-box

background-clip with content-box

Imagini Multiple la Background

Ca sa aplicati mai multe imagini la fundalul unui element HTML, se adauga la proprietatea css background-image functii url() (separate prin virgula) cu adresele imaginilor.
- Celelalte proprietati legate de "background-image" (background-position, background-repeat) folosesc valori separate prin virgula, in functie de modul dorit de afisare a imaginilor adaugate. Sau o singura valoare care se aplica la toate.

- Exemplu:

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

<div id="id1">Multiple background images</div>

Rezultat:

Multiple background images

<<-Butoane pentru link-uri folosind .. -- CSS3 - Border proprietati ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?

block list-item inline-block

.some_class {
  display: list-item;
}

Care instructiune JavaScript transforma un obiect in sir JSON.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)

lived living liveing

I`m living here.
- Traiesc /Locuiesc aici.

Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?

vivió vivido viviendo

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.

CSS3 - Background proprietati noi

Curs Css

background-size

Culori Gradient

background-origin

background-clip

Imagini Multiple la Background

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month