Ahora Veremos Como Personalizar Nuestro Texto HTML ...
Lo Simple :
Párrafos
<p>TEXTO</p>
Saltos En Linea
TEXTO<br/>
TEXTO<br/>
TEXTO<br/>
Formato De Un Texto
TEXTO EN NEGRITA
TEXTO EN CURSIVA
TEXTO SUBRRALLADO
<b>TEXTO EN NEGRITA</b>
<i>TEXTO EN CURSIVA</i>
<u>TEXTO SUBRRALLADO</u>
<s>TEXTO TACHADO</s>
<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>
<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