Evelb

CSS3: Cómo utilizar el box-shadow

CSS3: Cómo utilizar el box-shadow
Martín Dominguez
Desarrollador Web
«¡Dime qué código usas y te diré quién eres!»
Post más relevante: Top 10 novedades tecnológicas del 2015 – Parte 1

Hace varios años que el CSS3 se encuentra entre nosotros y muchos de los quebraderos de cabeza que veníamos sufriendo con el 2.1 han sido solucionados. En pleno 2015 es raro encontrar referencias nuevas a CSS3, pero en evelb pensamos que este es un buen momento para poder ir incorporando los atributos 100% CSS3 a nuestra categoría de Web Design ya que es ahora y no antes, cuando los navegadores ya lo tienen bastante bien implementado y asumido.

Añade un poco de volumen con Box-Shadow

¿Qué mejor manera de empezar nuestro estudio-repaso de los atributos CSS3 que por aquella que nos hizo el trabajo de maquetación más llevadero gracias a su funcionalidad y estilismo? sí, exacto, Box-Shadow es la función.

Hasta hace no mucho, aquel programador que quisiera incorporar una sombra a un div para tener un poco de profundidad en el aspecto de su web, tenía que decantarse por difíciles operaciones con Javascript y con imágenes semitransparentes que ocupaban 3/4 de la web. Ahora, gracias a un sencillo atributo de CSS3 se puede crear una sombra del color, posición y transparencia que queramos y, todo ello, sin tener que recurrir a más de un archivo de estilos y a un par de líneas de código.

Para este ejemplo, usaremos un HTML básico con dos divs de diferentes colores y diferentes tipos de Box-Shadow para que te puedas hacer una idea del potencial del CSS3.

Código:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ejemplo de Box-Shadow</title>
    <style>
        .objeto-con-sombra , .objeto-sin-sombra
        {
            background-color: grey;
            width: 100px;
            height: 100px;
            position: absolute;
            bottom: 0;
            top: 0;
            margin-top: auto;
            margin-bottom: auto;
            left: 0;
            right: 0;
            margin-left: 40%;
            margin-right: auto;
            text-align: center;
            padding: 2%;
        }
        .objeto-con-sombra
        {
            background-color: red;
            margin-left: 50%;
            box-shadow: 10px 10px 5px #888888;
        }
    </style>
</head>
<body>
    <div class="objeto-con-sombra">Este DIV tiene sombra</div>
    <div class="objeto-sin-sombra">Este DIV no tiene sombra</div>
</body>
</html>

En este código se pueden ver dos DIVs creados con el único fin de mostrar un ejemplo básico de sombra en el contenido. Hay que aclarar que lo recomendable no es poner el texto del estilo en la cabecera de la página, pero para mostrarlo en un tutorial es lo más óptimo.

Bien, analicemos la función CSS que hace referencia a la sombra del DIV, en este caso box-shadow.

 

box-shadow: 10px 10px 5px #888888;

Como se puede observar, disponemos de 4 variables dentro de la función. El primero de todos correspondería a la posición en horizontal o h-shadow, el segundo a la posición en vertical o v-shadow,  el tercer dato a la difuminación de la sombra o al blur y, por último, el color hexadecimal o RGB de la sombra.

El ejemplo anterior sería algo parecido a esto:

Imagen 1 de tutorial de CSS3 de evelb: Text-Shadow

Datos adicionales

Realmente, no tiene ningún tipo de complicación. Simplemente selecciona el div que quieras darle una sombra y descríbela. Ni más ni menos. Por supuesto, este ejemplo es uno muy básico sobre el Box-Shadow. Además de las 4 variables anteriores tendríamos el spread (o tamaño de la sombra)y el inset (para indicar una sombra interior). Usando todas estas caractarísticas podemos hacer sombras increíbles y darle un aspecto mucho más profesional a diferentes apartados de la página. Así, aplicando lo anterior a una sombra completa sería de la siguiente manera:

box-shadow: 10px 10px 30px 10px #888888 inset;

El orden es: 10px (h-shadow)10px (v-shadow) 30px(blur) 10px (spread) #888888 (color) inset (sombra interior).

Y la vista sería algo parecido a esto :

Imagen 2 de tutorial de CSS3 de evelb: Text-Shadow

Compatibilidad con navegadores

Al principio, esta función tenía que realizarse acompañada de los típicos hackers de otros navegadores, pero, como comentábamos al principio, poco a poco se fue amoldando a todos los navegadores y, a día de hoy, se puede hacer la crear la misma etiqueta para todos los navegadores.

Deja un comentario

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