Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite modificarea transparentei elementului.
IE8 si versiuni anterioare folosesc o varianta alternativa, proprietatea filter.

- Sintaxa:
filter: alpha(opacity=X); /* pt. IE */
opacity: X;
- X - reprezinta o valoare intre 0 (complet transparent) si 1.0 (fara transparenta).

1) Exemplu, un <div> cu o transparenta CSS de 40%:
<style type="text/css"><!--
#dv {
 background-color:blue;
 width:200px;
 height:100px;
 filter:alpha(opacity=40); /* pt. IE */
 opacity:0.4;
}
--></style>

<div id="dv">Un continut oarecare ...</div>
Rezultat:
Un continut oarecare ...

2) Exemplu, seteaza opacitate 50% la o imagine:
<style type="text/css"><!--
#im {
 filter:alpha(opacity=50); /* pt. IE */
 opacity:0.5;
}
--></style>

<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160" id="im" />
Rezultat:
Curs HTML si CSS

3) Exemplu, efect imagine transparenta 50%, iar la mouseover 100%:
<style type="text/css"><!--
#im2 {
 filter:alpha(opacity=50); /* pt. IE */
 opacity:0.5;
}
#im2:hover {
 filter:alpha(opacity=100); /* pt. IE */
 opacity:1;
}
--></style>

<img src="html_course.jpg" alt="Curs HTML si CSS" width="155" height="160" id="im2" />
Rezultat (pozitionati mouse-ul peste imaginea de mai jos):
Curs HTML si CSS

4) Continut intr-un DIV care la mouseover este acoperit cu un alt <div> transparent (DIV-ul transparent trebuie sa fie gol, adaugat in primul, si setat cu:   position:absolute;):
<style type="text/css"><!--
#trans {
 display:none;
 position:absolute;
 top:2%;
 left:2%;
 width:96%;
 height:95%;
 background-color:#07fe08;
 filter:alpha(opacity=50); /* pt. IE */
 opacity:0.5;
}
#cnt {
 position:relative;
 background:#e7e8fe;
 width:300px;
 height:200px;
 border:1px solid blue;
 padding:20px;
}
#cnt:hover #trans { display:block; }
--></style>

<div id="cnt">
 <div id="trans"></div>
 Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.
<img src="css3.jpg" alt="CSS3 opacity" width="160" height="98" />
</div>
Rezultat:
Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate. CSS3 opacity

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.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
CSS3 opacity

Last accessed pages

  1. Christmas Gift Room (9)
  2. Cursuri limba engleza gratuite si lectii online (1271)
  3. Conditional IF in Limba Engleza - Fraze Conditionale (886)
  4. Prezent perfect continuu - Exercitii si teste incepatori (190)
  5. Mahjong Gardens (393)

Popular pages this month

  1. Bubbles3 (3188)
  2. Gramatica limbii engleze - Prezentare Generala (2483)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2252)
  4. Butterfly Kyodai (2022)
  5. Zuma Deluxe (1953)