Site Overlay

RGBA e Gradiente

Um artifício visual que ganhou muito com a chegada do CSS 3 são as cores. Antigamente limitadas a apenas textos e fundos, o que sempre resultava na mesma situação das bordas arredondadas – uso de imagens para criar gradientes e opacidades, o que impacta na performance e na flexibilidade de manutenção do seu código. Funções muito úteis surgiram para suprir diversos casos de uso de imagens, como o rgba e o linear-gradient.

Primeiro, o rgba. A função permite definir a opacidade de uma cor, permitindo criar efeitos de transparências utilizando apenas a cor de fundo ou as bordas de um elemento. Um ponto crucial é que a função não recebe um valor hexadecimal, como #000000, e sim utilizando os 3 decimais que representam a cor, no caso do preto são 0,0,0. O quarto argumento da função é a opacidade deseja, de 0.0 a 1.0.

Vamos a ação. Com o HTML a seguir, nós temos uma foto e uma legenda, utilizando novas tags como o figure e o figcaption para agrupar o img com a sua legenda.

<figure>

<img src=”/images/sf.jpg” alt=”A Golden Gate.”>

<figcaption>

San Francisco, Califórnia

<small>

Por Salim Virji (http://www.flickr.com/photos/salim/402618628/)

</small>

</figcaption>

</figure>

Nosso primeiro passo com o CSS será posicionar a mensagem por cima da foto, alguns pixels de distância do final dela.

figure {

position: relative;

}

img {

display: block;

}

figcaption {

bottom: 5px;

margin: 0 5px;

padding: 5px;

position: absolute;

width: 300px;

}

Desta forma não temos contraste nenhum para ler o texto da legenda. Hora de aplicar um fundo preto e trocar a fonte da legenda para branco, melhorando sua leitura.

figcaption {

background-color: #000;

background-color: rgba(0,0,0,0.5);

color: #FFF;

}

Com o 0.5 de opacidade do fundo preto conseguimos ler a legenda normalmente e ao mesmo tempo identificar as partes da foto que ficaram por trás dela. Caso o navegador utilizado não tenha suporte a rgba, será usado a definição de um fundo preto sólido, utilizando a clássica definição da cor em hexadecimal.

6

Source: scriptcase / RGBA e Gradiente

Comments

comments

Leave a Reply

Your email address will not be published.