Crear efecto de 3d en un texto con CSS3

Existen muchas maneras de crear objetos y textos simulando un efecto de 3d para mostrar en nuestra web, una de ella es utilizar un programa de edición de imágenes como photoshop, recortar la imagen e incluirla en el documento html, la otra forma es utilizar CSS3.

CSS3 nos va a permitir crear este efecto de 3d gracias a una de sus propiedades, se trata de shadow o sombra, text para los texto o box para las cajas, dependerá de lo que tengamos para hacer, en este tutorial veremos cómo crear efecto 3d para nuestros texto, lo haremos creando combinaciones con text-shadow.

esto es lo que vamos a conseguir:

texto 3d css3

Acá tenemos el código fuente:

Y acá tenemos el código css que nos genera el efecto 3d al texto en el h1

texto 3d css3

Creamos varias capas de sombras con desplazamiento X en 0 y en Y cambia el numero dependiendo la capa y su desplazamiento, sin desenfoque y de distintos tipos de grises

ver tutorial de cómo funcionan las sombras en CSS3

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo