Texto biselado con CSS

Ciertas veces no nos sentimos contentos con colocar nuestros títulos (Encabezados) con una fuente distinta, fondo y tamaño, sino que queremos un poco mas, pues si eres de esos inconformes aquí un tip que podría serte de gran utilidad.


Para lograr nuestro acometido nos valdremos de la propiedad text-shadow, bueno el codigo que tenemos que agregar es el siguiente:

.texto-biselado {
text-shadow: 0 -1px 0 #333, 0 1px 0 #EAEAEA;
font-family: Consolas, sans-serif;
font-size: 50px;
font-weight: bold;
}

Los valores que se asignan en la propiedad de sombra de texto (text-shadow) son:

1er valor: Desplazamiento horizontal
2do valor: Desplazamiento Vertical
3er valor: Desenfoque
4to valor: Color

Y como podrán observar he colocado dos especificaciones en el atributo, por decirlo de cierto modo, bueno estos dos 'atributos' especifican, el primero es la sombra del bisel, mientras que el segundo es la iluminación del mismo. El resultado seria algo como esto:

Texto Biselado

Ahora podemos invertir los valores y obtenemos este aspecto:

Texto Biselado

También podemos agregar otro valor en el código y darle al bisel un aspecto suavizado, el código quedaría de la siguiente forma:

.texto-biselado {
text-shadow: 0 1px 1px #333, 0 -1px 1px #EAEAEA;
}

La apariencia con este codigo seria:

Texto Biselado

Eso seria todo, ahora solo queda experimentar con los valores y colores para lograr distintos efectos.