Texto en bajorrelieve o hundido con CSS

El otro día vimos cómo hacer un texto que simulaba tener altura y que sobresalía de la página. Hoy toca lo contrario, que es mostrar algo de manera que parezca grabado o hundido en el fondo.

Como es habitual no hay un solo sistema para hacer esto y es por eso que vamos a ver dos. Ambos muy fáciles, aunque cada uno con sus propias ventajas y limitaciones.


Tanto uno como otro se basan en un efecto cuyo nombre desconozco, pero que hace que nuestro cerebro tenga una especial tendencia a asumir que la iluminación de los objetos viene siempre desde la parte superior. No voy a entrar en detalles que no entiendo por lo que mejor lo explico con una imagen. Esta:

Es posible que al bajar hasta aquí hayas pasado tu puntero por encima de esa imagen. Si no ha sido así hazlo ahora y comprobarás que lo que parecía un montículo (cóncavo), realmente era un cráter (convexo). Ambas imágenes son la misma pero girada 180º. Todo es un efecto óptico.

---

El primer sistema consiste en usar sólo text-shadow.

Una sombra esperamos que sea oscura y por eso nosotros la dibujaremos a la inversa, con un color claro. Con este código proyectamos una sombra blanca, desplazándola 2px abajo y dándole un pequeño desenfoque:

.bajorrelieve {
color:#333333;
text-shadow: 0px 2px 3px #ffffff;
}

Demo

Pero con un fondo blanco no podemos lanzar una sombra del mismo color, ya que resultaría en la práctica invisible. De esta manera, una posiblidad es marcar una sombra oscura pero arriba a la izquierda, en la posición contraria a lo normal. Si usamos fuente negra o casi, tendríamos que aclararla un poco para que se viera algo. No es la mejor opción, pero ahí queda:

.bajorrelieve {
color:#666666;
text-shadow: -1px -2px 1px #000000;
}

Demo

Otra que sí es mejor para fondo blando, sería usar letras de un tono también claro e igualmente con una sombra arriba un poco más oscura que las letras:

.bajorrelieve {
color:#eeeeee;
text-shadow: -1px -2px #cccccc;
}

Demo

Y ya que estamos con aclarar la tipografía, sobre un fondo claro pero distinto de blanco obtendríamos un resultado bastante bueno con sombra blanca abajo:

.bajorrelieve {
color:#999999;
text-shadow: 1px 2px 3px #ffffff;
}

Demo

Pero sin duda, el mejor resultado lo obtenemos con una letra oscura, un fondo un poco más claro y una sombra un puntito más claro todavía:

.bajorrelieve {
background: #474747;
color:#222222;
text-shadow: 1px 2px 3px #555555;
}

Demo

Cuando usamos letras no tan grandes como estas que hemos usado nosotros para que se vean bien, el efecto es casi mejor:

Demo con letra pequeña

¿Y la otra opción? Pues sería usando la propiedad background-clip en asociación con text. Con ella el fondo sólo se aplica al texto y esto nos simplifica las cosas. No hay que estar pensando si el fondo es claro u oscuro, si la sombra va arriba o abajo y también nos ahorramos calcular los tonos que estas últimas deberían llevar:

.bajorrelieve {
background: #000000;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0px 3px 3px rgba(255,255,255,0.5),0px -1px 1px rgba(0,0,0,.3);
}

background-clip

Como veis, fijamos un color de fondo, dejamos el de la fuente transparente y background-clip hará que las letras sean las únicas que tomen ese color de fondo, en lugar de tomarlo la capa entera. Luego añadimos una sombra clara abajo y una oscura arriba, ambas con transparencia, y el resultado será bastante más realista.

Este mismo código nos sirve para todas las combinaciones de colores con sólo cambiar el valor de background.

.bajorrelieve {
background: #deb027;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0px 3px 3px rgba(255,255,255,0.5),0px -1px 1px rgba(0,0,0,.3);
}

Hasta otra

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter