Contenido
[vc_row][vc_column][vc_column_text]
Efectos de Sombra y Otras curiosidades aplicando CSS a Titulos
Esto es oro, al menos para mi. Después de mil pruebas he recopilado un listado de efectos de sombras tipo:
- Sombra Paralela
- Sombra Paralela desenfocada
- Super-Sombra
- Efectos:
- Efecto Fuego
- Trazo rodeando un texto
- Efecto Pixelart
Para conseguir esto tiraremos de CSS y del atributo text-shadow que apareció en la actualización de CSS2 aunque si es cierto que hasta que apareció CSS3 los navegadores no la interpretaban correctamente. Actualmente todo esto esta ya solucionado y va del caraj… muy bien.
Sombra Paralela
Para este efecto de sombra ruda y con contornos definidos utilizaremos este CSS:
h2{
text-shadow: 2px 2px #000;
}
Donde el primer parámetro nos indica el desplazamiento a derecha y el segundo parámetro el desplazamiento abajo y por ultimo el color en hexadecimal. Ya es cuestión de jugar en busca del efecto deseado.
Sombra Paralela Difuminada
Para este efecto de sombra paralela de toda la vida y con contornos desenfocados utilizaremos usaremos el siguiente CSS:
h3{
text-shadow: 3px 3px 3px #000;
}
Donde el primer parámetro nos indica el desplazamiento a derecha y el segundo parámetro el desplazamiento abajo, el tercero el efecto de difuminado y por ultimo el color en hexadecimal.
Super Sombra
Para este efecto de sombra gigante nos basaremos en la siguiente técnica, usaremos varias sombras sólidas generando una sombra gigante:
h3{
text-shadow: #f83 -1px 1px, #f83 -2px 2px, #f83 -3px 3px, #f83 -4px 4px, #f83 -5px 5px;
color: #060;
letter-spacing: 1px;
}
Donde cada sombra irá separada por comas.
Efecto Fuego
Para este efecto nos basaremos en la siguiente técnica, usaremos sombras superpuestas con colores anaranjados y diferentes desplazamientos:
h3{
text-shadow: 0 0 20px #fefcc9, 2px -2px 3px #feec85, -4px -4px 5px #ffae34, 5px -10px 6px #ec760c, -5px -12px 8px #cd4606, 0 -15px 20px #973716, 2px -15px 20px #451b0e;
color: #666;
}
Donde cada sombra irá separada por comas.
Contornear un Texto con un Trazo
Para este efecto vamos a crear 4 sombras solidas desplazadas un pixel para cada lado:
h3{
text-shadow: -1px 0 #090, 1px 0 #090, 0 1px #090, 0 -1px #090;
color: #fff;
}
Donde cada sombra irá separada por comas.
Texto con Efecto PixelArt
Aquí lo que buscamos es un texto con el efecto de maquinita de los años 80:
h3{
text-shadow: 1px 1px #666, 2px 2px #86D6D3, 3px 3px #666, 4px 4px #86D6D3;
color: #ccc;
}
Donde cada sombra irá separada por comas.[/vc_column_text][/vc_column][/vc_row]
0 comentarios