Transparenta si semi-transparenta css – Tutorial css
In acest tutorial css voi prezenta cum putem adauga transparenta. In contrar cu marginile rotunjite, transparenta fuctioneaza chiar si in Internet Explorer (inclusiv versiunile mai vechi), numai codul trebuie definit altfel pentru IE. Transparenta poate fi folosita in multe locuri, putem face ca anumite culori de background sa se puna partial pe o imagine de background, multe ori este folositor si la crearea meniurilor de linkuri etc. Haideti sa vedem codul si exemplele.
Transparenta cu css – tutorial
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.transparenta {
opacity:0.6;
filter:alpha(opacity=60);
}
</style>
</head>
<body>
<img width="240" height="144" src="/photoshop/photoshop-electronic-circuit.png"
class="transparenta"/>
</body>
</html>
In exemplul de mai sus puteti vedea, ca a doua imagine, este partial transparenta, deoarece culoarea alba a backgroundului se vede partial. Imaginii respective i-a fost acordata stilul definit mai sus, adica clasa “.transparenta” care contine doua directive css. Prima directiva, adica opacity este pentru browserele care respecta standardele (Firefox, Chrome etc), iar directiva filter:alpha este pentru versiunile IE, si din fericire chiar si versiunea 6.0 stie aceasta directiva css pentru transparenta. – Mai jos voi mai da inca un exemplu, o idee cum mai poate fi folosita transparenta css, si bineinteles asta nu este ultima posibilitate.
<style type="text/css">
#divstil {
background-image:url("/photoshop/photoshop-electronic-circuit.png");
width:500px;
height:250px;
}
#transdiv {
width:400px;
height:200px;
position:absolute;
margin:25px 50px 25px 50px;
background-color:#FFFFFF;
opacity:0.8;
filter:alpha(opacity=80);
color:#003300
}
#divstil p {
color:#003300;
font-size:18px;
padding:20px;
}
</style>Cod html:
<div id="divstil">
<div id="transdiv">
<p>Acest paragraf se afla …. </p>
</div>
</div>
Codul css si respectiv html, de mai sus, va rezulta in doua div-uri, si un paragraf care se afla intr-un div semi-transparent. Acest tutorial css bineinteles nu prezinta toate posibilitatile unde poate fi folosita transparenta, mai jos veti gasi ultimul exemplu dat de mine – Atentie Nu uitati ca in css multe lucruri se mostenesc in cadrul unui element, asa ca aveti grija unde si pentru ce element definiti transparenta.
Exemplu transparenta css – tutorial transparent
Acest paragraf se afla intr-un div, care este semi-transparenta. Divul semi-transparent, se afla intr-un alt div, care nu este transparenta, ci are o imagine de background.
Ca sa intelegi in totalitate codul css de mai sus, daca esti incepator, este nevoie sa citesti si celelalte tutoriale css, tutorialele anterioare al acestui tutorial!