14

1

Crea efectos 3D con CSS3, box-shadow y text-shadow

Con CSS3 se pueden hacer cosas muy interesantes, en este caso, con box-shadow y text-shadow crearemos con un efecto 3D un sello con letras en su interior (de los que se usan para sellar documentos, que se mojan primero en tinta).
Este efecto lo crearemos con muchas sombras sucesivas que se oscurecen según se alejan de la parte frontal, esta prueba nos puede servir para crear cualquier efecto en nuestra web como botones 3D, campos de texto con profundidad y todo lo que imaginemos.

Para empezar a crear este efecto, está hecho con dos <div>, la que contiene todo tiene una sombra exterior (normal) y la otra tiene una interior (con la propiedad inset), hechas las dos con box-shadow.
Y la sombra del texto está hecha de la misma forma que las de los bloques, solo que usando la propiedad text-shadow.

Estructura

Este efecto se puede aplicar sobre cualquier elemento que actúe como un bloque (como div,input,img...), pero como os he comentado usaremos dos etiquetas <div>, la etiqueta con el texto estará dentro de la otra etiqueta.

1. <div class="efecto3d">

<div> Xitrus </div>

2. </div>

Crear la profundidad

Para crear la profundidad es recomendable usar la notación de color HSL, que nos permite cambiar la oscuridad del color de forma independiente al tono.
Para crear sombras con CSS3 debemos de establecer el desplazamiento en el eje X y en el eje Y, en este caso lo haremos progresivo, añadiremos más distancia y un color más oscuro según esté de lejos la sombra, es más fácil viendo el código de debajo.
Nota: la profundidad la determina el número de sombras que usemos.

1. box-shadow: 1px 1px 0px hsl(33,42%,40%),

2px 2px 0px hsl(33,42%,39%),

3px 3px 0px hsl(33,42%,38%),

4px 4px 0px hsl(33,42%,37%),

5px 5px 0px hsl(33,42%,36%),

/* A más sombras más profundidad */

Para añadir este efecto al texto solo tenemos que usar en lugar de box-shadow la propiedad text-shadow.

Resumen

Esto es un experimento, el potencial de las sombras es bastante grande y nos permite ahorrarnos imágenes que eran inevitable usar antes para añadir efectos de este tipo a texto y bloques.