Sombras complejas en CSS3

Nuestros navegadores son cada día más compatibles con el estándar CSS3. Gracias a eso, podemos crear efectos visuales muy complejos. En este caso, vamos a echar un vistazo a las sombras complejas en CSS3.

Las sombras se pueden aplicar tanto a bloques, como a texto. En esta entrada nos centraremos en las sombras para bloques. Entendiendo como bloque, un elemento <div>, por ejemplo.

1. Ejemplo básico: aquí tendríamos un simple bloque con una sombra aplicada.

Contenido

 

.drop-shadow {
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

La instrucción CSS que nos permite crear la sombra es el box-shadow. Esta instrucción se compone de los siguientes parámentros:

box-shadow: desplazamiento-x desplazamiento-y desenfoque difusión color posición

 

  • Desplazamiento-x: Indica si queremos que la sombra de desplace hacia la izquierda o la derecha. El valor es en píxeles.
  • Desplazamiento-y: Indica si queremos que la sombra de desplace hacia arriba o abajo. El valor es en píxeles.
  • Desenfoque: Cantidad de píxeles que se va a desenfocar la sombra.
  • Difusión: Es la fuerza de la sombra. A mayor valor, mayor dureza tendrá el efecto.
  • Color: Valor, en hexadecimal o RGBA del color de la sombra.
  • Posición: Por defecto, la sombra es hacia fuera del elemento. Si en posición indicamos “inset”, la sombra será interior. En este ejemplo hemos usado los dos tipos de sombra en un mismo elemento, separados por una coma.

 

Finalmente, fijaros que repetimos la instrucción de box-shadow para los diferentes navegadores, para hacer esta instrucción más compatible. No funciona en IE7 o inferiores.

Os dejo algunos ejemplos más de sombras para que veáis sus múltiples variedades:

Bordes redondeados
Bordes curvados
Con perspectiva
Caja elevada
Curva vertical en un lado
Curva vertical en ambos lados
Curva horizontal
Curva horizontal en dos lados
Caja volteada

 

Descargar el código fuente del ejemplo (ZIP)

Sombras complejas en CSS3

CSS | 6 comentarios

6 comentarios

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>