HTML (Text-Shadow) - Aplique sombras em seus textos

http://3.bp.blogspot.com/_UCfxgWHzU98/S4yAuJgYC6I/AAAAAAAACF4/2ug1V5uXCaA/s200/textshadow.png

     Para quem gosta de trabalhar com HTML ou quer deixar o seu blog ou site mais elegante aqui está uma ótima alternativa hoje iremos falar sobre um recurso do CSS 3 que se chama text-shadow

    O text-shadow disponibiliza que você possa adicionar estilos de sombras atrás de seus textos ou palavras, veja um exemplo:

.:::Amotrix:::.

Entendendo a propriedade text-shadow
     A propriedade text-shadow é uma das propriedades em HTML mais fáceis de se usar, a propriedade text-shadow possui somente 4 parâmetro.

text-shadow:
  1. PositionX(posição horizontal)
  2. PositionY (posição Vertical)
  3. Efeito Blur (efeito borrado)
  4. Escala de cores (cor da sombra) 

Demostração:

seletor {text-shadow:2px 3px 8px #000;}


Aplicando o text-shadow em HTML
     Para adicionar o efeito em HTML é necessário que você use o modo escrever em HTML. Abaixo temos a demostração e código.

Demostração de Sombra (I)


<div style="background:#fff; color:#000; text-shadow:5px 5px 5px 000;">Texto Aqui</div>


Demostração de Sombra  (II)


<div style="text-shadow: 5px 5px 5px #333; color:#ffffff;">Texto Aqui</div>


Demostração de Sombra (III)


<div style="padding:5px;background:#bbb3ab; color:#000;text-shadow:5px 8px 1px #FFD700, 10px -15px 1px #FF7F00;">Texto Aqui</div>


Caso você queira mais opções de sombras entre no site Css3 Generator coloque a opção text-shadow e divirta-se criando sea próprio estilo de sombra.

Comentários