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

CSS3 introduce noi proprietati pentru efecte de text, dar multe dintre ele nu sunt inca recunoscute de principalele navigatoare web. In aceasta lectie sunt prezentate cele care sunt mai bine acceptate: text-shadow, word-wrap, and 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.

text-shadow e recunoscut in principalele browsere, cu exceptia Internet Explore. Dar incepand cu versiunea 8 a Internet Explorer puteti folosi o proprietate filter pentru a crea efecte de umbra pt. text si in IE.
Sintaxa:

filter:progid:DXImageTransform.Microsoft.Shadow(color=val, direction=val, strength=val);

- color - specifica culoarea umbrei.
- direction - poate avea una din aceste valori numerice: 0=top, 45=top right, 90=right, 135=bottom right, 180=bottom, 225=bottom left, 315=top left.
- strength - reprezinta cantitatea de "blur".

Exemplu:

<style type="text/css"><!--
h2 {
 /* pt. IE8+ */
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a1fe, direction=135, strength=5);
 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 type="text/css"><!--
h2 {
/* pt. IE8+ */
 filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a0fe, direction=135, strength=5);
 text-shadow: -1px -1px 1px rgba(110,235,155,0.2), 2px 3px rgba(0,0,181,0.2);
}
--></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 type="text/css"><!--
#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.
text-overflow este suportat in majoritatea navigatoarelor web, in afara de Firefox.
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 type="text/css"><!--
#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

Care tag afiseaza textul oblic?

<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>

Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?

margin padding position

h3 {
  padding: 2px 0.2em;
}

Clic pe metoda ce returneaza primul element indicat de selectorii specificati.

getElementsByName() querySelector() querySelectorAll()

// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);

Indicati variabila PHP ce contine datele din formular trimise cu method="post".

$_SESSION $_GET $_POST

if(isset($_POST["field"])) {
  echo $_POST["field"];
}

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".

I They We

We speak english.
- Noi vorbim engleza.

Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".

Ellos Vosotros Nosotros

Nosotros hablamos español.
- Noi vorbim spaniola.

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