Texto en bajorrelieve o hundido con CSS | Oloblogger 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...

1 de marzo de 2012

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
Copy URL

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

follow us in feedly

18 comentarios :

  1. Cambia .bajorrelieve por h3.post-title y te debe funcionar. Creo que el mejor te quedaría sería este:

    h3.post-title {text-shadow: 0px 1px 2px white;}

    Si no funciona con esa clase entonces pruebas con .post h3.post-title

    ResponderEliminar
  2. Muy buena idea Oloman, me agrado le da más estilo a un blog.
    Lo estoy probando en titulos de entradas y paginas, y todo eso.

    Gracias!!

    ResponderEliminar
  3. Muy útil esta herramienta, pero la duda que tengo es si el efecto se ve bien en los buscadores. Es decir si está ya asummido por Explorer, Firefox, etc.

    ResponderEliminar
    Respuestas
    1. Supongo que te refieres a navegadores. Y si es así, al tratarse de nuevas propiedades CSS, el efecto sólo es visible en las versiones más recientes -no necesariamente las últimas-. Con IE9 tengo mis dudas, pero podría decirte que casi seguro que un 60-70% de los usuarios lo verán bien. El resto simplemente verán un texto plano grande, sin efecto.

      Eliminar
  4. Hola Oloman. Quiero poner el efecto en el título del blog. ¿Me podrias indicar como hacerlo???

    Gracias

    ResponderEliminar
    Respuestas
    1. Sólo tendrías que aplicar las propiedades CSS que prefieras de entre las mostradas, a la clase h3.post-title. Busca en tu plantilla y encontrarás esta última. Luego añade las líneas del estilo que prefieras. Evidentemente no te hacen falta ni las llaves ni la clase .bajorrelieve.

      Eliminar
  5. Buenisimo oloman.... Gracias...

    ResponderEliminar
  6. La verdad es que quedó hermoso pero solo para Chrome. En IE se ve una franja azul (color que utilicé) y letras negras. En Firefox directamente un bodoque azul que no se puede leer. Qué pena!!

    ResponderEliminar
  7. Inclusive ahora viendo esta misma página con Firefox, no se ven los ejemplos. Tal vez tengas la receta, me da pena quitar el efecto que había puesto en todo el blog.

    ResponderEliminar
    Respuestas
    1. Ese es el problema de que los navegadores no adapten sus intérpretes a los estándares. CSS3 es relativamente nuevo y no podemos aspirar a que se vean sus efectos en todos ellos. Sin embargo, si utilizas una combinación adecuada, en los navegadores que no soporten estos códigos simplemente se verán dos colores (texto-fondo) sin efecto profundidad. He visto los ejemplos en IE y en FF y salvo los dos últimos, el resto queda como si no lo usaras. Por tanto, mejor usar estos códigos porque en el peor de los casos será como si no lo hubieras hecho.

      Eliminar
  8. Sí, eso hice, pero los últimos eran los más lindos!!

    ResponderEliminar
  9. Oloblogger tengo una pregunta. En donde debo aplicar este codigo para que el TEXTO del Blog (en general) obtenga esta sombra?. Osea, me refiero a si debo aplicarlo antes o despues de algun codigo en especial... Porque la verdad que no tenga idea en donde se ubican estos codigos. Vengo desde Ciudadblogger y me acostumbre a ver que los codigos se aplicaban ANTES o DESPUES de alguno que el Potro nos explicaba. Y bueno, por eso te pregunto cual seria el codigo que tengo que buscar para ponerlo, ANTES o DESPUES.

    ResponderEliminar
    Respuestas
    1. Hola. Para que todo el texto del blog tenga alguno de estos efectos debes poner esto en tu CSS, en cualquier parte entre las etiquetas SKIN de la plantilla, pero mejor justo antes de la de cierre porque así no provocarán interferencias otros que pudieras tener similares.

      Pero para que sea aplicable a todo el texto, además tendrás que cambiar la palabra "bajorrelieve" por "body". La primera sería sólo de aplicación a los apartados que llevaran una clase con ese nombre (class='bajorrelieve'). Usando body se aplicará a todo el blog.

      De todas formas yo no te recomendaría que lo aplicaras a todo, sino sólo a títulos y elementos puntuales.

      Eliminar
    2. Gracias por tu respuesta Oloblogger, y gracias por la recomendacion, es solo que quiero que sea en el Texto de las entradas y Gadgets. Como deberia hacerlo en ese caso?. (SOLO TEXTOS DE ENTRADAS Y GADGETS)

      Eliminar
    3. No te va a quedar bien para el texto de las entradas porque es muy pequeño. Comenté algo de eso en esta entrada.

      Para que veas el efecto prueba a añadir a tu CSS...
      .fielset {
      background: #474747;
      color:#222222;
      text-shadow: 1px 2px 3px #555555;
      }
      ...pero verás que con la letra tan pequeña no se aprecia el efecto. Además el cambio de color que pusiste en el hover lo hace todavía menos visible.

      Eliminar
  10. Me ha quedado perfecto. Muchas gracias

    ResponderEliminar
  11. Muy útil la verdad es que me encanta tu blog para utilizar truquitos chulos!!

    ResponderEliminar