CloudWare

cafelog-coffee

RGBA, HSLA & Opacity

Quinta, 18 Agosto 2011

Aprenda um pouco sobre opacidade no CSS.

css3

Primeiramente: não irei falar sobre o RGB nem sobre o HSL, mais sim sobre o A que existe nessas duas propriedades.

Bom, esse A significa Alpha, ou ainda, opacidade. Isso mesmo, o CSS3 nos permite criar background com fundo transparente sem a necessidade de usar uma imagem PNG ou GIF com transparência.

Tanto na proprieade RGBA quanto em HSLA, a opacidade é usada da mesma forma: seu valor vai de 0 a 1, onde 0 é transparente e 1 sólido e também é o último parâmetro a ser passado. Vamos a prática!

Observe os estilos abaixo:

.exemplo_rgba1 { background: rgba(255, 0, 0, 0.2); }
.exemplo_rgba2 { background: rgba(255, 0, 0, 0.4); }
.exemplo_rgba3 { background: rgba(255, 0, 0, 0.6); }
.exemplo_rgba4 { background: rgba(255, 0, 0, 0.8); }
.exemplo_rgba5 { background: rgba(255, 0, 0, 1); }
.exemplo_hsla1 { background: hsla(0, 100%, 50%, 0.2); }
.exemplo_hsla2 { background: hsla(0, 100%, 50%, 0.4); }
.exemplo_hsla3 { background: hsla(0, 100%, 50%, 0.6); }
.exemplo_hsla4 { background: hsla(0, 100%, 50%, 0.8); }
.exemplo_hsla5 { background: hsla(0, 100%, 50%, 1); }

Agora compare os resultados:

 
 
 
 
 

 RGBA

 

 
 
 
 
 

 HSLA


Também podemos utilizar a propriedade opacity sozinha:

.exemplo_opacity1 { background: #F00; opacity: 0.2; }
.exemplo_opacity2 { background: #F00; opacity: 0.4; }
.exemplo_opacity3 { background: #F00; opacity: 0.6; }
.exemplo_opacity4 { background: #F00; opacity: 0.8; }
.exemplo_opacity5 { background: #F00; opacity: 1; }

 
 
 
 
 

 Opacity

 

Android

Java

Hibernate

Joomla!

CSS3

HTML5

Saia na Frente

html5 css3

Sobre Mim

sobre-foto-2Adriel Café é Web Master e Desenvolvedor Java. Ele incentiva o uso/estudo de Web Standards, Java e Android.

Saiba Mais

Encontre-me

facebook linkedin