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
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
CSS3 - Background proprietati noi

Last accessed pages

  1. Articolul din limba engleza - The article (24601)
  2. Substantivul din limba engleza - The Noun (24657)
  3. Programe pentru invatare limba Spaniola (3239)
  4. Proverbe, expresii si zicatori (5510)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (28931)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2369)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1301)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1198)
  4. Conditional IF in Limba Engleza - Fraze Conditionale (856)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (804)