RECUERDA: ".textSOMBRA" sera a lo que tu le quieras agregar sombra, EJMPLO: se puede reemplazar por "h3.post-title" para que los titulos de las entradas tengan sombra.
.textoSOMBRA { text-shadow : -3px -4px 5px #000;}-3px: Posición horizontal {Negativo hacia la derecha / Positivo hacia la izquierda}
-4px: Posición vertical {Negativo hacia arriba / Positivo hacia abajo}
5px: Intensidad del efecto {Mayor nº sombra mas difusa}
#ffbbcc: Color de la sombra.
a editar con sombras ~
- Texto con doble sombra:
TEXTO CON SOMBRA
.textoSOMBRA {text-shadow: -3px -3px #000, 3px 3px #000;}Donde -3px -3px #000 es nuestra 1er sombra {superior} & 3px 3px #000 la segunda {inferior}
- Texto con triple sombra:
TEXTO CON SOMBRA
.textoSOMBRA {text-shadow: 2px 5px 1px #000, -3px 1px 1px #000, 4px -3px 1px #000;}Donde 2px 5px 1px #000 es la sombra inferior; -3px 1px 1px #000 es la intermedia & 4px -3px 1px #000 la sombra superior.
- Texto con borde {4 sombras}:
TEXTO CON SOMBRA
{text-shadow: -1px 0 #0006ff, 0 1px #0006ff, 1px 0 #0006ff, 0 -1px #0006ff}NOTA:Este efecto se puede utilizar, ademas de en titulos & blockquotes {o mensajes de bienvenida, etc.}, como efecto en links al pasar el cursor {hover},simplemente siguiendo los primeros pasos del tutorial, cambiamos "textoSOMBRA" por lo que queremos editar, en este caso por "a:hover", ejemplo:
a:hover {
text-shadow: -3px -3px #000, 3px 3px #000;
text-decoration: none;
}
En este tutorial puedes ver un efecto en links con tres sombras de colores:
Me encanta!
ResponderEliminarTambien sirve para modificar efectos de links.
Gracias Melo!
Lady Melo que buen Tuto, muchas gracias!
ResponderEliminarXoXoXo