css: transparència (ii)

capa1: Vermella

capa2: Blava

Com podem veure podem aconseguir efectes de barreja de colors utilitzant la propietat de transparencia de CSS que comentava en el post anterior " CSS:traparencia ". Des de petits sabem que barrejant el vermell i el blau obtenim el lila. Doncs aquí està.

Aquí he utilitzat aquest estil CSS:

#capaBASE{
position:relative;}

#capaBASE #capa1 {
position: absolute;
left:0;
top:0;
height:100px;
margin: 5px;
background-color: red;
width:250px;
filter: alpha(opacity:50); /* IE */
opacity: .5; /* CSS3 */
}

#capaBASE #capa2 {
position: absolute;
right:0;
top:20px;
height:100px;
margin: 5px;
background-color: blue;
width:250px;
filter: alpha(opacity:50); /* IE */
opacity: .5; /* CSS3 */
text-align: right;
}

I el següent codi per mostrar les capes:

<div id="capaBASE">
<div id="capa1">capa1: Vermella</div>
<div id="capa2">capa2: Blava</div>
</div>

No deixa de ser una curiositat. Moltes, moltes, moltes coses es poden fer amb CSS.

;)