Curs Css

Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite modificarea transparentei elementului.

- Sintaxa: 
opacity: X;
- X - reprezinta o valoare intre 0 (complet transparent) si 1 (fara transparenta).

Exemple cu CSS opacity

1) Exemplu, un <div> cu o transparenta CSS de 40%: 
<style>
#dv {
 background-color:#8899fe;
 width:200px;
 height:100px;
 opacity:0.4;
}
</style>

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

2) Exemplu, seteaza opacitate 50% la o imagine: 
<style>
#im {
 opacity:0.5;
}
</style>

<img src="css/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>
#im2 {
 opacity:0.5;
}
#im2:hover {
 opacity:1;
}
</style>

<img src="css/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>
#trans {
 display:none;
 position:absolute;
 top:2%;
 left:2%;
 width:96%;
 height:95%;
 background-color:#07fe08;
 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="css/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 atribut e folosit in tag-ul <a> pentru adresa link-ului?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Ce proprietate CSS seteaza tipul fontului utilizat?
font-family text-decoration font-size
h2 {
  font-family:"Calibri", sans-serif;
}
Ce instructiune selecteaza toate tag-urile <div> cu class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // numar elemente selectate
alert(nr_elms);
Indicati functia care returneaza suma valorilor dintr-un array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Indicati forma corecta a verbului "study" (a studia) la Trecutul Simplu in aceasta propozitie: "We (study) English."
studyed studys studied
We studied English.
- Noi am studiat engleza.
Indicati forma corecta a verbului "decir" (a spune) la Prezent in aceasta propozitie: "Yo (decir) siempre la verdad."
digas digo decir
Yo digo siempre la verdad.
- Eu spun mereu adevarul.
CSS3 opacity

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (279621)
  2. Accentul si Pronuntia (29112)
  3. Verbe regulate (9655)
  4. Programe pentru invatare limba Spaniola (9153)
  5. Verbele in limba engleza - Verbs (41671)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (414)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (319)
  3. Limba spaniola curs online incepatori si avansati (156)
  4. Gramatica limbii engleze - Prezentare Generala (154)
  5. Teste spaniola - Tests y ejercicios de Español - Gramática (152)