Cómo agregar sombras paralelas con CSS3

En este tema se demuestra cómo agregar sombras paralelas en el borde exterior o interior de los elementos de diseño mediante Windows Internet Explorer 9 y Hojas de estilo en cascada, nivel 3 (CSS3). Las sombras incluso siguen las curvas que crees en las esquinas con el nuevo soporte para esquinas redondeadas de Internet Explorer 9.Este tema contiene las siguientes secciones:

Opciones y sintaxis para sombras de cuadros

Las sombras paralelas se habilitan con la propiedad box-shadow. Al igual que las esquinas redondeadas, las sombras paralelas de Internet Explorer 9 son muy prácticas y tienen diversas opciones que se pueden especificar. El orden de los valores dentro de la propiedad box-shadow es el siguiente:


box-shadow: hoff voff bd sd color inset;

Aquí hoff indica el desplazamiento horizontal, voff indica el desplazamiento vertical, bd indica la distancia de desenfoque, sd indica la distancia de margen, color indica el color de la sombra y inset es una palabra clave que, al utilizarla, la sombra es una sombra interna y no una sombra externa. Los dos primeros valores son necesarios para que funcione la propiedad, y todos los valores deben especificarse en el orden enumerado. Si no se especifica un color, Internet Explorer 9 usa el negro como color de sombra.

Aquí se definen todos los valores:

  • horizontal offset Se requiere este valor de longitud. Especifica cuánto debe extenderse la sombra hacia la derecha (valor positivo) o la izquierda (valor negativo). Consulta el siguiente diagrama para obtener una explicación visual; hoff indica el desplazamiento horizontal y está configurado en 20 píxeles.
  • vertical offset Se requiere este valor de longitud. Especifica cuánto debe extenderse la sombra hacia abajo (valor positivo) o hacia arriba (valor negativo). Consulta el siguiente diagrama para obtener una explicación visual; voff indica el desplazamiento vertical y está configurado en 20 píxeles.
Rectángulo redondeado con sombra de cuadro, desplazamiento horizontal y desplazamiento vertical especificados
  • blur distance Este valor de longitud positivo indica cuánto debe desenfocarse el borde de la sombra: la longitud aproximada entre el inicio y el fin de área desenfocada. Cuanto mayor sea el valor, mayor será el desenfoque. Consulta el siguiente diagrama para obtener una explicación visual; bd indica la distancia de desenfoque y está configurado en 30 píxeles.
Rectángulo redondeado con sombra de cuadro, distancia de desenfoque especificada
  • spread distance Este valor de longitud indica cuánto se expande (valor positivo) o se contrae (valor negativo) la forma de la sombra en todas las direcciones. Este valor representa cuánto debe extenderse la sombra más allá de las dimensiones de la forma original, en todas las direcciones. Consulta el siguiente diagrama para obtener una explicación visual; sd indica la distancia de desenfoque y está configurado en 30 píxeles. La forma del cuadro de borde con desplazamiento original se muestra con una línea de puntos para que pueda visualizar más fácilmente el margen, que comienza en el borde del cuadro con desplazamiento original.
Rectángulo redondeado con sombra de cuadro, distancia de margen especificada
  • color Este valor de color CSS indica el color de la sombra. La siguiente imagen ilustra la propiedad box-shadow con los mismos valores de la ilustración anterior, pero con el color "gris" agregado al final. (Este valor también podría ser #808080 para especificar el mismo color; también se admiten los valores de color hexadecimales.)

    Importante  Si bien la especificación World Wide Web Consortium (W3C) para fondos y bordes CSS3 no especifica que se requiera un color, dejando un valor de color fuera de la propiedad box-shadow (o su correspondiente variante específicos) podría no producir resultados idénticos entre los exploradores. Por tal motivo, siempre recomendamos especificar un valor de color en la propiedad box-shadow.

Rectángulo redondeado con sombra de cuadro y color especificado
  • inset Esta palabra clave, cuando se usa, cambia la sombra paralela del cuadro de externa a interna. La siguiente imagen ilustra la propiedad box-shadow con los mismos valores que la ilustración de distancia de margen (la segunda ilustración de esta sección), pero con la palabra clave inset anexada al final.
Rectángulo redondeado con sombra de cuadro y palabra clave inset especificada

Crear sombras paralelas básicas

La sombra paralela más simple y más frecuente probablemente sea una sombra gris que se extiende algunos píxeles a partir del cuadro, con algo de desenfoque. Apliquemos esto al ejemplo de la compañía de café del tema sobre cómo agregar esquinas redondeadas con CSS3. Podemos agregar una ligera sombra al encabezado y al pie de página para que tengan una vista más interesante.

Después del trabajo que hicimos en el tema sobre cómo agregar esquinas redondeadas con CSS3, las Hojas de estilo CSS para el selector de ID para el selector de Id. de header es el siguiente:


#header {
    padding-top: 10px;
    background-color: #FFFFCC;
    border-top-left-radius: 50px 30px;
    border-top-right-radius: 50px 30px;
}

Las CSS para el selector de Id. footer son las siguientes:


#footer {
    font-style: italic;
    color: #999999;
    padding: 10px;
    font-size: 10px;
    clear: both;
    background-color: #FFFFCC;
    border-bottom-left-radius: 15px 25px;
    border-bottom-right-radius: 15px 25px;
}

Agreguemos una sombra con desplazamiento vertical y horizontal de solo cinco píxeles, además de un ligero desenfoque de 5 píxeles sin difusión. Para el color, especificaremos gris claro. Para hacerlo, agregamos la siguiente línea a ambos selectores:


    box-shadow: 5px 5px 5px lightgray;

Recuerda que si no especificas un cuarto valor para la propiedad box-shadow, estás especificando efectivamente que no debería haber margen. Por lo tanto, la línea anterior es igual que la siguiente:


    box-shadow: 5px 5px 5px 0px lightgray;

Después de especificar la sombra paralela de ambos cuadros, la parte derecha del encabezado aparece de la siguiente forma:

Parte derecha del encabezado de página después de aplicar una sombra al cuadro

La parte derecha del pie de página se muestra de la siguiente manera:

Parte derecha del pie de página después de aplicar una sombra al cuadro

Crear efectos de iluminación con sombras paralelas

Al configurar simplemente los dos primeros valores en la propiedad box-shadow en cero, puedes aplicar un efecto "brillante" a los cuadros.

Por ejemplo, observemos las vistas en miniatura del producto del ejemplo de la compañía de café en el tema sobre cómo agregar esquinas redondeadas con CSS3. La CSS para el selector de clase product_thumb es:


.product_thumb {
    clear: left;
    height: 80px;
    width: 80px;
    margin-right: 10px;
    padding: 5px;
    float: left;
    border-width: 1px;
    border-color: #7f7f7f;
    border-style: dashed;
    border-radius: 5px;
}


Agreguemos una sombra paralela a ese cuadro, pero dejemos los desplazamientos en cero. Le agregaremos un ligero desenfoque, algo de difusión (para que el desenfoque sea más visible, lo extenderemos más allá de los bordes del cuadro original) y un color siena que combine con el color de los granos de café.


    box-shadow: 0 0 5px 5px sienna;

Esto hace que las vistas en miniatura se vean de esta manera:

Una de las vistas en miniatura de los granos de café después de aplicar sombra al cuadro

Crear sombras paralelas internas

Por último, agreguemos una sombra paralela a la barra lateral. La CSS para el selector de Id. sidebar es:


#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: dashed;
    border-color: #996600;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
}


Cambiemos también el color y el estilo del borde para que combinen mejor con la nueva sombra paralela. Cambiaremos la propiedad border-style a lisa, la propiedad border-color a #663300 para que coincida con los vínculos de la barra de navegación y otros elementos de la interfaz y hicimos que el color de la sombra coincida con el color del fondo de encabezado y pie de página (#FFFFCC) para obtener cierta continuidad visual. De esta forma, el nuevo selector tendrá esta apariencia:


#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: solid;
    border-color: #663300;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
    box-shadow: 10px 10px 10px #FFFFCC inset;
}


La nueva barra lateral se muestra así: (Se ha reducido el tamaño de la imagen).

La barra lateral del diseño después de aplicar una sombra interna al cuadro

Crear sombras paralelas con otros exploradores

Al igual que las propiedades border-radius (como se explica en el tema sobre cómo agregar esquinas redondeadas con CSS3), la propiedad box-shadow tiene niveles variables de compatibilidad de diferentes proveedores y versiones de explorador.

La mejor manera de garantizar la compatibilidad con otros exploradores y versiones anteriores de estos es consultar el sitio web correspondiente al proveedor de cada uno. Según el explorador y la versión, es posible que simplemente puedas duplicar la propiedad box-shadow con el prefijo específico del proveedor correspondiente. Por ejemplo, para el ejemplo de la barra lateral de la última sección, el siguiente selector debe producir resultados similares en los exploradores más populares:


#sidebar {
    font-size: 12px;
    padding: 15px;
    margin: 10px 10px 10px 75%;
    border-style: solid;
    border-color: #663300;
    border-width: 5px;
    border-radius: 10em 0 5em 2em;
    -moz-border-radius: 10em 0 5em 2em;
    -webkit-border-radius: 10em 0 5em 2em;
    box-shadow: 10px 10px 10px #FFFFCC inset;
    -moz-box-shadow: 10px 10px 10px #FFFFCC inset;
    -webkit-box-shadow: 10px 10px 10px #FFFFCC inset;
}


Para estar seguro de la compatibilidad y el comportamiento de box-shadow, consulta el sitio web del proveedor del explorador correspondiente;

Implementación

Mira la nueva apariencia de la página después de todos los cambios descritos en este tema (y después de agregar los nombres de propiedades específicos para otros exploradores) . (Para descargar la CSS, haz clic con el botón secundario en el vínculo y haz clic en Guardar destino como..).

Crear sombras paralelas con versiones anteriores de Windows Internet Explorer

La compatibilidad con la propiedad box-shadow es nueva en Internet Explorer 9. Para agregar sombras paralelas a tu diseño para que los usuarios de Windows Internet Explorer 8 y versiones anteriores puedan verlas, puedes aprovechar una de las soluciones alternativas disponibles en Internet.

Aquí verás algunas opciones. (La inclusión de cualquier vínculo no implica que Microsoft promocione el sitio del vínculo).

Temas relacionados

Galería de fotos Contoso Images
Cómo agregar esquinas redondeadas con CSS3
Cómo crear botones elegantes con CSS3
CSS3

 

 

Mostrar:
© 2014 Microsoft