CSS3 - Border proprietati noi

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

CSS3 Colturi rotunjite

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

Exemplu:

<style type="text/css"><!--
#id1 {
 width:300px;
 height:120px;
 border:2px solid blue;
 border-radius:28px;
}
--></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 type="text/css"><!--
#id1 {
 width:300px;
 height:120px;
 background-color:#bbfeda;
 border:2px solid blue;
 border-top-left-radius:20px;
 border-bottom-right-radius:38px;
}
--></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 type="text/css"><!--
#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:

CSS3 Imagine pentru bordura

Cu proprietatea 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).

border-image nu e recunoscut in Internet Explorer.
Firefox foloseste proprietatea -moz-border-image.
Safari si Chrome suporta -webkit-border-image.

• Pentru a afisa cum trebuie border-image, trebuie sa specificati si proprietatea border-width.
In exemplul urmator se foloseste aceasta imagine:

<style type="text/css"><!--
#id1 {
 width:200px;
 height:120px;
 border-width:12px;
 -moz-border-image:url('border_image.png') 30 30 round; /* Firefox */
 -webkit-border-image:url('border_image.png') 30 30 round; /* Safari and Chrome */
 border-image:url('border_image.png') 30 30 round;
}
#id2 {
 width:200px;
 height:120px;
 border-width:15px;
 -moz-border-image:url('border_image.png') 30 30 stretch; /* Firefox */
 -webkit-border-image:url('border_image.png') 30 30 stretch; /* Safari and Chrome */
 border-image:url('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:

<<-CSS3 - Background proprietati .. -- CSS3 - text-shadow, word-wrap, ..->>

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 - Border proprietati noi

Curs Css

CSS3 Colturi rotunjite

Adaugare umbre la chenare

CSS3 Imagine pentru bordura

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month