Curs Css

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:
Text cu text-shadow

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
Clic pe tag-ul HTML care afiseaza o linie orizontala.
<br> <em> <hr>
Continut ...
<hr />
Alt continut sub linie ...
Care proprietate CSS defineste culoarea textului?
font-style font-variant color
h2 {
  color: #cbdafb;
}
Clic pe functia care cauta daca un anume caracter sau text e intr-un sir.
indexOf() toString() split()
var str = "Web courses - http://CoursesWeb.net/";
if(str.indexOf("http://") == -1) alert("http:// nu e in sir");
else alert("http:// e in sir");
Care e functia ce imparte un sir in parti de siruri intr-un array, pe baza unui separator?
array_merge() explode() implode()
$str = "mar,banana,pepene,para";
$arr = explode(",", $str);
var_export($arr);      // array (0=>"mar", 1=>"banana", 2=>"pepene", 3=>"para")
Indicati asocierea corecta: "luna-anotimp".
April - Autumn October - Spring July - Summer
July is a beautiful summer month.
- Iulie este o frumoasa luna de vara.
Indicati asocierea corecta: "luna-anotimp".
Octubre - Primavera Julio - Verano Abril - OtoƱo
Julio es un hermoso mes de verano.
- Iulie este o frumoasa luna de vara.
CSS3 - text-shadow, word-wrap, text-overflow

Last accessed pages

  1. Pronume indirect (2384)
  2. Prepozitii - Prepositions (34108)
  3. Gramatica limbii engleze - Prezentare Generala (218337)
  4. Verbe Dinamice si Statice - Dynamic and Static Verbs (11480)
  5. Espanol Chistes - Glume, Bancuri (5373)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (241)
  2. Gramatica limbii engleze - Prezentare Generala (136)
  3. Coduri pt culori (115)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (113)
  5. Cursuri limba engleza gratuite si lectii online (97)