¿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: "Me gusta el cine"
(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;">Me gusta el cine</span></span> |
Me gusta el cine
Ahora, dentro de la etiqueta style, aplicamos el 'text-shadow' 3D
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);">Me gusta el cine</span></span> |
Y asi de 'maqueado' nos quedara nuestro texto:
Me gusta el cine
