Estilos simples en CSS para dar el efecto de relieve

En este artículo busco hacer un breve resumen de algunas técnicas simples que nos sirven para poder dar efecto de relieve o de hundido a las secciones de nuestra página web. Con la mera utilización de códigos CSS, más específicamente, con el atributo border podemos dar un toque diferente a cada div y podemos ayudar a su correcta visualización. Ganamos por todos lados, ya que se verá muy bonito y nos dará puntos extras al optimizar nuestra página.

Los colores que se han empleado en los fondos de contenedor, son los siguientes, para el contenedor oscuro y claro respectivamente:

¿Cómo dar relieve en colores oscuros con CSS?

Emplear un color de div más oscuro que el color de fondo es el primer paso. En este ejemplo emplearemos 3 colores diferentes de borde, que nos ayudarán a alcanzar un efecto de relieve. El color de borde superior será el tono más claro, los bordes laterales compartirán un color intermedio y el borde inferior presentará un color oscuro para ganar profundidad.

¿Cómo hacer efecto hundido en colores oscuros con CSS?

Comenzamos a trabajar del mismo modo que en el ejemplo anterior, con un color más oscuro para el background del elemento y más claro el fondo. Utilizaremos tres colores de bordes diferentes, al igual que en el efecto de dar relieve. El truco es emplear el color de borde más claro en el borde inferior y el más oscuro en el borde superior para invertir el efecto, y crear la ilusión de que la div está hundida.

¿Cómo dar relieve en colores oscuros con CSS?

En este caso empleamos un color de div más claro que el color de fondo es el primer paso. Del mismo modo que en los efectos anteriores utilizaremos tres tonalidades de borde diferentes. El color de borde superior será el tono más claro, en este ejemplo en particular será blanco, los bordes laterales compartirán un color intermedio y el borde inferior presentará un color oscuro para ganar profundidad.

¿Cómo hacer efecto hundido en colores oscuros con CSS?

Un color más oscuro para el background de la div y un color más claro para el fondo. El truco es emplear el color de borde más claro en el borde inferior y el más oscuro en el borde superior para invertir el efecto del mismo modo que en el efecto de hundido en color oscuro.

Modificado por última vez el día 27 de noviembre de 2012 a las 19:06

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>