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:

- 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:
css3 tutorial
Free CSS Course - size in pixels
css course
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:
- 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:
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

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
CSS3 - Background proprietati noi

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (78199)
  2. Curs HTML gratuit Tutoriale HTML5 (44588)
  3. Exemple de conversatii in limba engleza (2452)
  4. Trecut perfect - Exercitii si teste incepatori (3010)
  5. Lectii audio-video de limba engleza (11023)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (4954)
  2. Curs HTML gratuit Tutoriale HTML5 (4094)
  3. Curs si Tutoriale JavaScript (3761)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3595)
  5. Curs CSS Online Tutoriale CSS3 (3511)