EFECTOS 3D PARA LOS RÓTULOS

julio 24, 2019

EFECTOS 3D PARA LOS RÓTULOS.

GADGETS KIRADOBERMAN

¿Te gusta como ha quedado el logo de arriba? Pues lo he hecho con CSS, aplicando la propiedad 'text-shadow'. Normalmente, esta propiedad se aplica para darle un efecto sombra a titulos o a las fotos.
Pero sabiendo combinar los parametros se puede conseguir esta maravilla de efecto 3D, y ahora explico como hacerlo. Vamos a escribir una frase, por ejemplo: "GADGETS KIRADOBERMAN"
(Lo que esta en rojo es el color y el tamaño de la letra, y lo que esta en azul es el texto que quieras poner)

<span style="color: #f3c50d;"><span style="font-family: Arial Black; font-size: 40pt;text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);">GADGETS KIRADOBERMAN</span></span>