Efecto de Bajo Relieve / Hundido en: Photoshop, CSS y Fireworks

Para esta ocasión les traigo tres sencillas formas de crear este efecto tan versátil. Les enseñaré a hundir sus textos con CSS, Photoshop y Fireworks (¡genial!) Pero eso no es todo: lo mejor es que no necesitamos más de dos o tres pasos!! Es un efecto sencillo y que queda elegante. Comencemos entonces.

Adobe Fireworks / Photoshop

Versión CS5 o anterior / Tiempo aprox: 2 minutos

Creamos el nuevo lienzo, le damos el color deseado, en este caso nosotros utilicé el color #555. Colocamos algo de texto en una tonalidad más oscura, por ejemplo: #333.

A continuación copiaremos el texto (para ir más veloces el tan conocido Ctrl + C ; Ctrl + V) y le daremos una tonalidad más clara que el color de fondo al texto que nos queda en la capa inferior, #757575 por ejemplo. Lo seleccionamos y movemos un pixel a la derecha y un pixel hacia abajo

CSS 3

No compatible con IE (aún) / Tiempo aprox: 2 minutos

Utilicemos los mismos colores que empleamos en el ejemplo realizado con el Adobe Fireworks.

Parte de CSS

Esto se coloca en nuestra hoja de estilos

[css]
.ejemplo {
width: height: /* Colocar el valor deseado para su div*/
background-color: #555;
font: /* Font deseada */
color: #333; /* Tener en cuenta que el parámetro color SE APLICA A LAS FUENTES */
text-shadow: 1px 1px 1px #757575; important¡
}
[/css]

Parte de HTML o PHP

Esto se coloca en el documento PHP o HTML que deseemos modificar

<div class="ejemplo">Texto de ejemplo</div>