[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]