CSS3 introduce noi proprietati pentru efecte de text, in aceasta lectie sunt prezentate: text-shadow, word-wrap, si text-overflow.
CSS3 text-shadow
Proprietatea
text-shadow introdusa in CSS3 permite adaugarea unui efect de umbra care sa fie aplicat la textul dintr-un element HTML. Umbra apare in jurul literelor.
Sintaxa:
text-shadow: offset_X offset_Y blur culoare;
-
offset_X - specifica pozitia umbrei pe orizontala. Sunt permise si valori negative.
-
offset_Y - specifica pozitia umbrei pe verticala. Sunt permise si valori negative.
-
blur - defineste distanta pentru valoarea "blur" (optional).
-
culoare - defineste culoarea umbrei (optional). Daca nu e specificata, se foloseste negru.
Exemplu:
<style>
h2 {
text-shadow: 2px 3px 3px #a0a1fe;
}
</style>
<h2>Text cu text-shadow</h2>
Rezultat:
Se pot adauga mai multe umbre la acelasi text, prin adaugarea mai multor liste de umbre in proprietatea text-shadow, separate prin virgula.
Urmatorul cod amesteca o culoare verde cu una albastra ca sa creeze un efect de umbra cu aceste culori:
<style>
h2 {
text-shadow: -1px -2px rgba(10,5,205,0.2), 2px 3px rgba(200,0,1,0.3);
}
</style>
<h2>Text cu doua culori pt. text-shadow</h2>
- Observati ca s-a folosit formula
rgba(Rosu, Verde, Albastru, Alpha) la definirea culorii, adaugand si transparenta (Alpha) in acelasi timp.
Rezultat:
Text cu doua culori pt. text-shadow
CSS3 word-wrap
Cu
word-wrap puteti determina browser-ul sa rupa cuvintele lungi, cand acestea depasesc lungimea elementului, trecand pe un rand nou.
Sintaxa:
word-wrap: valoare;
"valoare" poate fi:
-
normal - Nu rupe cuvintele intregi (valoarea prestabilita).
-
break-word - Permite ruperea cuvintelor intregi. Cuvintele sunt rupte la nivel de caracter, nu in silabe.
Exemplu:
<style>
#id1 {
width:100px;
border:1px solid blue;
word-wrap:break-word;
}
</style>
<div id="id1">Curs CSS gratuit - word-wrap un_cuvant_mai_lung.</div>
Rezultat:
Curs CSS gratuit - word-wrap un_cuvant_mai_lung.
CSS3 text-overflow
Cu proprietatea
text-overflow puteti determina ce sa se intample cu textul, cand acesta depaseste lungimea elementului.
Sintaxa:
text-overflow: valoare;
"valoare" poate fi:
-
clip - taie textul (valoarea prestabilita).
-
ellipsis - afiseaza trei-puncte ("…") in locul textului taiat.
• In general, proprietatea
text-overflow se foloseste impreuna cu
white-space:nowrap; si
overflow:hidden;.
Exemplu:
<style>
#id1 {
width:230px;
border:1px solid blue;
white-space:nowrap;
overflow:hidden; /* "overflow" valoarea trebuie sa fie diferita de "visible" */
text-overflow:ellipsis;
}
#id2 {
width:230px;
border:1px solid green;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
}
</style>
<div id="id1">CSS Tutorial - un text lung pe o singura linie, alte cuvinte.</div>
<div id="id2">Site web marplo.net - alt text lung intr-un singur rand.</div>
Rezultat:
CSS Tutorial - un text lung pe o singura linie, alte cuvinte.
Site web marplo.net - alt text lung intr-un singur rand.
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>?
<dt> <dd> <li><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.netIndicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveingI`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendoEstoy viviendo aquí.
- Traiesc /Locuiesc aici.