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 Chrome, Firefox, Opera 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;}
]]>
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:
Postar um comentário