Área de trabajo: Diseño Web.
Nivel de conocimiento: Principiante.
Software a utilizar: PhotoShop (yo uso CS3 en inglés), un editor de texto simple, un navegador web.
Descargar: Para descargar el archivo fuente debes ser un usuario de ARTEgami Premium
El efecto Letterpress está bastante de moda en el diseño web y se trata de que la tipografía se vea como si la hubiesen presionado contra el fondo y creado un agujero cuando se puso. Gracias a la versión CSS3 se puede hacer esto de una manera muy simple y lo mejor de todo es que lo podemos usar en enlaces y demás.
Lo primero que vamos a hacer es crear un fondo en PhotoShop. Para esto haremos un cuadro de 120×120 pixeles, con el fondo de un color gris oscuro (yo usé #434040) y luego pon un poco de ruido yendo a filtro/ruido/añadir ruido. Lo pusé Gauseano con 2%.
Guarda como bg.png en algún lado donde no se te pierda. Lo mejor es que sea en una carpeta a la mano donde puedas probar lo que estás creando.
2. En la misma carpeta donde guardaste la imagen de fondo crea un documento de texto. Llámalo “index”. Abre el documento y ve a Archivo/Guardar Como. Ahí ponle el nombre: index.php y se convertirá en lo que necesitamos. Dentro de ese documentos debes poner lo siguiente:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Efecto LetterPress</title>
<h1>Prueba</h1>
<h2>Este es el efecto</h2>
</head></html>
Guarda el documento y cierra.
3. Crea otro documento igual al paso dos, pero este se llamará “style”. Abre este también y repite el procedimiento pero poniendo el nombre “style.css”. Dentro de él deberás poner lo siguiente:
body {
background: #474747 url(bg.png);
}
h2 {
font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222;
text-shadow: 0px 2px 3px #555;
}
Le estás diciendo que debes usar el fondo que ya creamos antes, que debe estar dentro de la misma carpeta donde están los documentos de programación. Además que la línea de código donde dice “Este es el efecto”, con la etiqueta de H2 tendrá una letra de 70 pixeles que puede ser Tahoma, Helvetica, Arial o Sans-Serir y que se alineará al centro. Que el color de la letra será #222222 y que los datos de la sombra irán así:
Acá estamos usando solo colores grises, pero si quieres hacerlo de otro color, lo que debemos hacer es poner una sombra que sea más clara que el color del texto para que el efecto suceda.
4. Crea un archivo igual que el paso 2. Renombra a “prueba.html”. Pon esto dentro de él:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Efecto LetterPress</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<h1>Prueba: letras sin efecto.</h1>
<h2>Este es el efecto</h2>
</head></html>
Esto unirá el documento de estilo, es decir el .css, para que puedas ver cómo te ha quedado. Así quedará en un navegador que soporte CSS3, según los datos que yo le dí:
Si quieres más tutoriales de CSS te invitamos a suscribirte a ARTEgami Premium.
[...] ARTEgami Posteado en Css, Diseño, Tutoriales | Tags: Efecto Letterpress, Tutorial CSS3, tutoriales css [...]