|
Átlátszó dobozok
Az átlátszó képek esetében taglalt opacity tulajdonság természetesen dobozokra is felírható, de a fő probléma velük az hogy a dobozban található minden tartalom is átlátszó lesz. Ez az esetek 99%-ában rossz nekünk.
Viszont, még egyszerűbb módszerrel, lehetőségünk van csak a dobozok hátterét átlátszóvá tenni, egy egyszerű struktúrán keresztül bemutatjuk.
<div id="hatter"><div id="atlatszo"> Loremipsum </div></div>
Az alábbi CSS kóddal tehetjük a belső(atlatszo) doboz hátterét átlátszóvá, úgy hogy az a dobozban található tartalmakat nem fogja érinteni.
#hatter, #atlatszo {width:100%;}
#hatter {background: url(#);}
#atlatszo {
color: black;
margin: 20px;
padding: 20px;
background: rgba(76, 175, 80, 0.3);}
Ugye a CSS-ben lehetőség van egy színt RGB kód segítségével definiálni, erre az RGBA még rá is tesz egy lapáttal, mert lényegében ez a kód maga a szín, és egy érték hogy menyire legyen átlátszó. Az első 3 érték a jól ismert 0-255 között lehet, a negyedik a ami az átlátszhatóságot adja, egy 0 és 1 közé eső szám lehet (0-láthatatlan, 1-nem átlátszó).
Labores sadipscing vel cu, eum error sapientem vulputate et. No omnium integre cum. Pri ne iuvaret vulputate, sit id nemore deleniti sensibus. Id mei lorem congue everti, vim no graeco facilis definitiones. Cum insolens intellegebat no, vel cu vero putent consequat.
A példa magáért beszél, a háttér átlátszik de a benne található tartalom teljesen látható.
| 
AJÁNLOM AZ OLDALT
Friss bejegyzések
Friss hozzászólások
Archívum