Curs Css


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 e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
CSS3 - Background proprietati noi

Last accessed pages

  1. Cursuri limba engleza gratuite si lectii online (66776)
  2. Scoala zeilor (5920)
  3. Idei si cugetari personale din ale lumii (304)
  4. Iubire si Dorinta (431)
  5. Invataturile Alesului si Evanghelia Eseniana a Pacii (2231)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1024)
  2. Coduri pt culori (827)
  3. Curs HTML gratuit Tutoriale HTML5 (703)
  4. Cursuri limba engleza gratuite si lectii online (327)
  5. Creare si editare pagini HTML (302)