Site Overlay

Sombras em textos

Não tão poderosa quanto o box-shadow, a propriedade text-shadow permite aplicar sombras ao texto da sua página, e não aos elementos. O uso das propriedades é bastante similar: você pode posicionar a sombra a vontade e combinar diversos efeitos com diversas sombras, mas o text-shadow não possui a quarta opção de tamanho do box-shadow e o termo inset não é suportado. Então, se você já se deu bem com uma destas propriedades, utilizar a outra será como um passeio de bicicleta.

<h1>HTML & CSS</h1>

h1 {

background-color:#1D9AC0;

color: #FFF;

padding: 10px;

text-shadow: 2px 4px 2px rgba(0,0,0,0.3);

}

O uso do text-shadow pode seguir a mesma linha do box-shadow: realçar sobreposições e adicionar efeitos sutis para melhorar a leitura de certos textos em fundos diferentes.

Imagine uma loja virtual, onde cada compra feita pode estar em um de três estados: Pagamento recusado, Produto enviado ou Em aprovação. Na exibição dos dados de uma compra, podemos exibir o seu estado com uma cor de fundo relacionada a ele, utilizando o seguinte código.

 

<span class=’status failed’>Pagamento recusado</span>

<span class=’status shipped’>Produto enviado</span>

<span class=’status processing’>Em aprovação</span>

 

.status {

display: inline-block;

font-weight: bold;

font-weight: bold;

padding: 7px 10px;

}

 

.failed {

background-color: #BD2C00;

}

 

.shipped {

background-color: #6CC644;

}

 

.processing {

background-color: #FC9800;

}

 

Para dar mais atenção ao texto (e não ao fundo), podemos trocar a cor do texto para branco e combinar com uma sombra, trazendo atenção e preservando a leitura dos textos ao mesmo tempo. Para este caso a sombra com rgba é uma ótima pedida.

.status {

color: white;

display: inline-block;

font-weight: bold;

font-weight: bold;

padding: 7px 10px;

text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);

}

10

Source: scriptcase / Sombras em textos

Comments

comments

Leave a Reply

Your email address will not be published.