CSS3 contine caracteristici care permit crearea de colturi rotunjite, umbre la chenare si folosirea unei imagini pentru aspectul bordurii.

CSS3 Colturi rotunjite

Proprietatea CSS border-radius permite crearea cu usurinta a colturilor rotunjite in designul elementelor, fara a fi nevoie de imagini sau mai multe tag-uri <div>.

Exemplu:
<style>
#id1 {
 width:300px;
 height:120px;
 border:2px solid blue;
 border-radius:28px;
text-align:center;
}
</style>

<div id="id1"> Curs CSS - marplo.net</div>
Rezultat:
Curs CSS - marplo.net

Colturile rotunjite pot fi create si independent, folosind cele patru proprietati individuale: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, si border-bottom-left-radius.
Exemplu:
<style>
#id1 {
 width:300px;
 height:120px;
 background-color:#bbfeda;
 border:2px solid blue;
 border-top-left-radius:20px;
 border-bottom-right-radius:38px;
text-align:center;
}
</style>

<div id="id1"> Curs CSS - marplo.net</div>
Rezultat:
Curs CSS - marplo.net

Adaugare umbre la chenare

Proprietatea box-shadow se foloseste pentru a adauga umbre la chenare. Este recunoscuta in IE9+, Firefox 4, Chrome, si Opera.
box-shadow are urmatoarea sintaxa:
elm { box-shadow: X_offset Y_offset blur marime culoare inset; }
- elm - este elementul HTML la care se aplica aceasta proprietate.
- X_offset - este pozitia /distanta umbrei pe latura orizontala. Sunt permise si valori negative.
- Y_offset - este pozitia /distanta umbrei pe latura verticala. Sunt permise si valori negative.
- blur - defineste distanta "blur" (optionala, 0 sau nespecificata inseamna fara "blur").
- marime - marimea umbrei (optionala).
- culoare - culoarea umbrei (optionala, negru daca nu e specificata).
- inset - schimba umbra din exterior sa apara in interior.

Primele doua valori trebuie adaugate, restul sunt optionale. Daca "blur" sau marime nu sunt specificate, se considera 0.

Exemplu:
<style>
#id1 {
 width:300px;
 height:120px;
 background-color:#bbfeda;
 box-shadow: 11px 11px 5px #7878da;
 -webkit-box-shadow: 11px 11px 5px #7878da; /* Safari si Chrome */
}
</style>

<div id="id1"> CSS3 box-shadow, www.coursesweb.net/css/</div>
Rezultat:
box-shadow

CSS3 Imagine pentru bordura

Cu proprietatea CSS border-image se poate folosi o imagine pentru aspectul bordurii.
Aceasta se obtine prin impartirea zonei bordurii in noua segmente, reprezentand cele patru colturi, cele patru laturi si centrul (dupa cum se vede in imaginea de mai jos). Se foloseste un singur fisier cu imaginea, impartit similar in cele noua segmente care vor reprezenta colturile, laturile si centrul.
Impartire border-image
box-shadow are urmatoarea sintaxa:
elm { border-image: url_img slice width outset repeat; }
- url_img - adresa si numele imaginii folosita pt. bordura.
- slice - specifica distanta pentru zona din imagine folosita in cele patru margini.
- width - lungimea bordurii cu imaginea.
- outset - specifica distanta fata de marginea chenarului, de unde incepe bordura cu imagine.
- repeat - specifica daca partea de imagine trebuie repetata, rotunjita ca incadrare, sau intinsa (poate avea aceste valori: stretch, repeat, round).

- Ca sa functioneze, este necesar sa adaugati si proprietatea: border cu valoarea "transparent" la culoare. - border-image e recunoscut in Internet Explorer 11+.


In exemplul urmator se foloseste aceasta imagine: border-image
<style>
#id1 {
 width:200px;
 height:120px;
 border: 12px solid transparent;
 border-image:url('css/border_image.png') 30 30 round;
}
#id2 {
 width:200px;
 height:120px;
 border: 15px solid transparent;
 border-image:url('css/border_image.png') 30 30 stretch;
}
</style>

<div id="id1"> CSS3 border-image, with round</div><br>
<div id="id2"> CSS3 border-image, with stretch</div>
Rezultat:
Ex border-image

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
CSS3 - Border proprietati noi

Last accessed pages

  1. Contor vizitatori si accesari (316)
  2. Articolul din limba engleza - The article (16744)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (30745)
  4. Conditional IF in Limba Engleza - Fraze Conditionale (20697)
  5. PHP OOP - Clase, Obiecte, constructor (1406)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2029)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1414)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (998)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (980)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (921)