CSS3 - text-shadow, word-wrap, text-overflow

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.

<<-CSS3 - Border proprietati .. -- CSS3 opacity->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?

<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>

Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?

text-align clear float

.some_class {
  width: 30%;
  float: left;
}

Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.

Math.ceil(x) Math.abs(x) Math.floor(x)

var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12

Indicati functia PHP care returneaza numarul de caractere dintr-un sir.

mb_strlen() count() stristr()

$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29

Clic pe raspunsul potrivit la intrebarea: "When it happened?".

On the 7th of July 1996 It is a quarter to 5. Nice weather.

When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.

Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".

Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.

¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.

CSS3 - text-shadow, word-wrap, text-overflow

Curs Css

CSS3 text-shadow

CSS3 word-wrap

CSS3 text-overflow

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month