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 face un buton radio sau checkbox sa fie selectat?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
Ce valoare CSS redimensioneaza imaginea de fundal pana la marimea elementului?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
Ce operator se foloseste pentru restul impartirii a doua numere?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicati functia PHP care rotunjeste numarul la valoarea intreaga mare.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
Indicati articolul corect la cuvantul "bike" in propozitia: "Alex wants to buy ... bike".
An The A
Alex wants to buy a bike.
- Alex vrea sa cumpere o bicicleta.
Indicati articolul nedefinit corect pentru cuvantul: "libros" (carti)
unos una un
Leí unos libros.
- Am citit niste carti.
CSS3 opacity

Last accessed pages

  1. Curs CSS Online Tutoriale CSS3 (52026)
  2. Verbe reflexive 1 (5186)
  3. Numerale, Numere in limba engleza - Numerals (33393)
  4. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (42917)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (139866)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (495)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (460)
  3. Curs si Tutoriale JavaScript (289)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (262)
  5. Curs CSS Online Tutoriale CSS3 (254)