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
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
CSS3 opacity

Last accessed pages

  1. Adjective posesive (4150)
  2. Trecut nedefinit vs Imperfect (3679)
  3. Prepozitii - Prepositions (33747)
  4. Viitor simplu - Exercitii si teste incepatori (12160)
  5. Lucru cu fisiere 2 (845)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (788)
  2. Cursuri limba engleza gratuite si lectii online (348)
  3. Coduri pt culori (347)
  4. Gramatica limbii engleze - Prezentare Generala (337)
  5. Exercitii engleza - English Tests and exercises - Grammar (314)