Texto Con Sombra

Ahora Veremos Como Personalizar Nuestro Texto HTML ...

Lo Simple :

Párrafos

<p>TEXTO</p>

Saltos En Linea

TEXTO<br/>
TEXTO<br/>

Formato De Un Texto

TEXTO EN NEGRITA

TEXTO EN CURSIVA

TEXTO SUBRRALLADO

TEXTO TACHADO

<b>TEXTO EN NEGRITA</b>
<i>TEXTO EN CURSIVA</i>
<u>TEXTO SUBRRALLADO</u>
<s>TEXTO TACHADO</s>

Texto Con Color

<span style="color:#ffbbcc;">TEXTO</span>

Texto Con Fondo

<span style="background:#ffbbcc;">TEXTO</span>

Estilo De Letra

<span style="font: 20px COURIER;">TEXTO</span>

Texto Con Dirección (url ~ enlace)

<a href="URL">TEXTO</a>

Texto Alineado

<div style="text-align: center;">TEXTO CENTRADO</div>
<div style="text-align: rigth;">TEXTO DERECHO</div>
<div style="text-align: left;">TEXTO IZQUIERDO</div>
<div style="text-align: justify;">TEXTO SIN ALINEAR</div>

Hoy Veremos Algo Nuevo :

Texto Con Sombra :

TEXTO CON SOMBRA

Usaremos TEXT-SHADOW 

{ text-shadow : -3px -4px 5px #ffbbcc ; }

Editar

* -3px --> Posición Horizontal De La Sombra . Negativo (-) Hacia El Lado Derecho , Positivo (+) Lado Izquierdo .

* -4px --> Posición Vertical De La Sombra . Negativo (-) Hacia Arriba , Positivo (+) Hacia Abajo .

* 5px --> Intensidad De La Sombra . Mayor Es Menos Intensidad (difusa) .

* #ffbbcc --> Color De La Sombra .

Si Queremos Dos Sombras Una Clara Y Otra Mas Oscura , Da Un Efecto Lindo :

TEXTO CON SOMBRA

 {text-shadow: -3px -3px  #FF9966, 3px 3px #ffbb0c;}

Eh Utilizado El Código De Arriba >.<

Editar

sombra naranja

* -3px

* -3px 

sombra amarilla

* 3px

* 3px

Ahora Un Estilo Algo Raro , Mesclaremos 3 Sombra O.o

TEXTO CON SOMBRA

{text-shadow: 2px 5px 1px #600,

            -3px 1px 1px #060,

              4px -3px 1px #006}

Editar

* 2px 5px 1px #f0f --> sombra rosa

* -3px 1px 1px #00b --> sombra azul

* 4px -3px 1px #099 --> sombra verde agua

Texto Con Contorno

TEXTO CON SOMBRA

{text-shadow: -1px 0 blue, 0 1px blue,

               1px 0 blue, 0 -1px blue}

Texto Con Brillo De Contorno

TEXTO CON SOMBRA

{text-shadow: 0 0 2px #8F7}

TEXTO CON SOMBRA

{text-shadow: 0 0 2px #ff0}

Consejo

* Recomiendo Esto En "a:hover" De Los Links , Queda Lindo >.< *

Ve A Diseño --> Edicion HTML 

Y Buscas (ctrl + f)  "a:hover"

Debajo Coloca El Efecto Que Quieras . Ej :

a:hover {

  text-shadow: 0 0 2px #ff0;  text-decoration: none;

  color: $(link.hover.color);

  cursor:crosshair;

}

Si utilizas este truco pon mis créditos...

 Crazy Love Melody!