SummArg | Cursos y recursos para webmasters

05/08/2011

Cómo crear texto 3D en CSS?

El término correcto para nombrar a las imágenes 2D que son capaces de generar un efecto 3D es anaglifos. Convertir un texto en 3D es muy fácil utilizando la clase :after y la propiedad content de CSS. Básicamente se utilizan para añadir un contenido determinado a un término ya existente, y nos sirve para que los robots y lectores RSS no vean contenido duplicado. Veamos un ejemplo:

<h1>Hello</h1>

Le añadimos CSS

h1 {
	display: inline;
	position: relative;
	font: 200px Helvetica, Sans-Serif;
	letter-spacing: -5px;
	color: rgba(0,0,255,0.5);
}
h1:after {
	content: "Hello";
	position: absolute; left: 10px; top: 5px;
	color: rgba(255,0,0,0.5);
}

Y obtenemos el siguiente efecto:

Si deseamos aplicar el efecto a un título en WordPress, debemos obtener el texto de la propiedad content de un modo diferente:

<h1 title="<?php the_title_attribute(); ?>" ><?php the_title(); ?></h1>

Y en el CSS:

h1:after {
content:attr(title);
}

Visto en Line25

Dejar un comentario

  1. muy interesante, especialmente por lo de wordprees gracias

Dejar un comentario