viernes, 6 de abril de 2012

(L) 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...

0 ♥ Crazy ♥:

Publicar un comentario