Efeito sombra

segunda-feira, 11 de julho de 2011

Fonte:http://www.htmhelen.com

Este é um post sobre HTML e CSS.
Nível: intermediário
Conheço a propriedade text-shadow desde que me entendo por aprendiz de CSS, mas só agora o seu uso é viável por estar funcionando bem nos navegadores modernos que buscam ser fiéis aos padrões W3C.
Apesar de ainda não funcionar no Internet Explorer, os usuários dos navegadores ChromeFirefoxOpera e Safari já se beneficiam desse recurso, que é cada vez mais utilizado em webdesign.
h1 {text-shadow:#000000 1px 2px 0px;}
Na propriedade text-shadow a ordem dos valores é a seguinte:
  • #000000 - A cor da sombra
  • 1px - A distância horizontal (X) entre o texto e a sombra
  • 2px - A distância vertical (Y) entre o texto e a sombra
  • 0px - Efeito blur (borrado)
Para as distâncias, assim como nas coordenadas geométricas, valores positivos são contados para a direita (X) ou para cima (Y) e valores negativos para a esquerda (X) ou para baixo (Y).
Seguem alguns exemplos de aplicações de text-shadow. Ao lado direito coloquei como fica o mesmo texto em um navegador que não suporta essa propriedade, o que atualmente é o caso do Internet Explorer e do Flock.

1º modelo

"Eu só faço isto porque eu estou me divertindo. No dia em que eu deixar de me divertir, eu pularei fora."
Heath Ledger
"Eu só faço isto porque eu estou me divertindo. No dia em que eu deixar de me divertir, eu pularei fora."
Heath Ledger
Texto aqui.

2º modelo

"Estão todos satisfeitos com o sucesso do desastre: vai passar na televisão."
Renato Russo
"Estão todos satisfeitos com o sucesso do desastre: vai passar na televisão."
Renato Russo
Texto aqui.

3º modelo

“Havia no ar um cheiro de curry, de fritura barata e desinfetante. Um cheiro de gente demais com dinheiro de menos, encafuada num espaço demasiado pequeno.”
John le Carré
“Havia no ar um cheiro de curry, de fritura barata e desinfetante. Um cheiro de gente demais com dinheiro de menos, encafuada num espaço demasiado pequeno.”
John le Carré
Texto aqui.

4º modelo

“Televisão é tudo de mentira. Se o programa não estiver bom, finja que está. Pule, grite, assim você vai aparecer na telinha e ficar famoso.”
Luciano Huck
“Televisão é tudo de mentira. Se o programa não estiver bom, finja que está. Pule, grite, assim você vai aparecer na telinha e ficar famoso.”
Luciano Huck
Texto aqui.

5º modelo

"A chave de todas as ciências é inegavelmente o ponto de interrogação".
Honoré de Balzac
"A chave de todas as ciências é inegavelmente o ponto de interrogação".
Honoré de Balzac
Texto aqui.

6º modelo

“Eu nunca quis cantar. Eu só queria ficar tocando a guitarra no fundo do palco.”
Kurt Cobain
“Eu nunca quis cantar. Eu só queria ficar tocando a guitarra no fundo do palco.”
Kurt Cobain
Texto aqui.

Exemplo de aplicação nos cabeçalhos:

h1 {background:#000; color: #690; text-shadow: #666 -1px -1px 0px;}
h2 {background:#ff6347; color: #000; text-shadow: #fa9 1px 1px 0px;}
h3 {background:#daa520; color: #000; text-shadow: #ff0 -1px -1px 2px;}
]]>
Até mais!


Eu em particular usei apenas {text-shadow:#000000 1px 2px 0px;} sem o h3 ou h1 para colocar nos meus títulos dos post...


então fica assim:


.Header h1 { font: $(header.font); color: $(header.text.color); text-shadow:#000000 4px 4px 8px;} }


como o parágrafo começou com " { "eu não colo o código completo se não dá erro, então colei


text-shadow:#000000 4px 4px 8px;}

e fui aumentando os valores e clicando em visualizar para ver como ficava, e salvei quando achei bom

lembre-se que h1 é para o título do blog e h3 para os títulos das postagens.

bjus

0 comentários: