CSS3 opacity

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:

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):

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

<<-CSS3 - text-shadow, word-wrap, .. -- CSS3 Transformari 2D->>

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>?

<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.

Last accessed pages

Numere cardinale 1-10 ⁽⁸⁹⁵⁾
Lectii audio-video de limba engleza ⁽⁴⁶¹²⁾
Curs complet de limba engleza, incepatori ⁽²⁵²⁷⁾
English Tests and exercises - Grammar ^(12034)
Expresii uzuale din Limba Spaniola (A-D) ⁽⁸⁸⁴⁾

Popular pages this month

Gramatica limbii engleze - Prezentare Generala ⁽²³²⁴⁾
Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax ⁽¹¹⁹⁷⁾
Creare si editare pagini HTML ⁽¹¹⁷¹⁾
Curs HTML gratuit Tutoriale HTML5 ⁽⁹⁸²⁾
Prezentul simplu si continuu - Present Tense Simple and Continuous ⁽⁸⁸⁶⁾