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
Care tag este element de tip bloc?
<div> <img> <span>
<div>Web Programming and Development</div>
Care cod CSS afiseaza textul subliniat?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Clic pe functia JavaScript care apeleaza o alta functie dupa un anumit timp.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Clic pe instructiunea care returneaza numarul total de elemente dintr-un array asociativ.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "mar"), "veggie" =>["ceapa", "rosie"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Indicati Viitorul Perfect la negativ al verbului din paranteze, in propozitia: "The child (to not play) by Sunday".
has't played haven't been playing will haven't played
The child will haven't played by Sunday.
- Copilul nu s-ar fi jucat pana duminica.
Indicati Viitorul Perfect pentru verbul "contar" (a povesti) la forma "Él".
habrá contado va a contar contaba
Él no habrá contado el cuento.
- El nu ar fi spus povestea.
CSS3 - text-shadow, word-wrap, text-overflow

Last accessed pages

  1. Articolul din limba engleza - The article (55336)
  2. Articole - Exercitii si teste engleza incepatori (6656)
  3. Adjectivul in limba engleza - The adjective (21049)
  4. Instructiuni repetitive for si while (4875)
  5. Gradele de comparatie: comparative, superlative (41437)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2337)
  2. Curs HTML gratuit Tutoriale HTML5 (1661)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (1457)
  4. Curs si Tutoriale JavaScript (1402)
  5. Curs CSS Online Tutoriale CSS3 (1367)