En esta maravillosa lección aprenderás a colocar sombras a diversos elementos HTML con CSS3, podemos poner sombra a elementos como contendores div o a cualquier otro elemento como pueden ser imágenes, bloques de texto, botones, tablas, campos de formularios, etc. En realidad a casi cualquier elemento de HTML.
Ver índice del contenido
Cómo poner sombras con CSS
Poner sombras a un elemento con CSS3 es relativamente sencillo, simplemente debemos establecer el tamaño o dimensiones de la sombra a aplicar, además características como el color y desenfoque, también podemos especificar, todo ello mediante propiedades de CSS y eso es lo que aprenderemos en esta lección.
Ahora nos enfocaremos en sombras para cajas, pues en otra lección, básicamente anterior a esta aprendimos a crear sombras para textos propiamente dichos, de manera similar aplicaremos, pero en este caso para cajas, contenedores o como quieras llamarlos, bloques.
La propiedad Box-shadow
La propiedad box-shadow nos permite poner sombra a las cajas con CSS, para que esta propiedad funcione se deben especificar ciertos valores separados por espacios, dichos valores determinarán las dimensiones y características de la sombra; a continuación veamos cuáles son.
Principales valores de box-shadow
Para especificar una sombra, se declara la propiedad box-shadow y a continuación se colocan los valores que determinaran la forma de sobra; para que entiendas, la sintaxis quedaría algo así: box-shadow: sombraX sombraY color;
- Sombra X.- específica el tamaño de sombra a lo largo del eje X, se trata de un valor numérico con su respectiva unidad de medida longitudinal, en nuestro caso pueden ser px, em, etc. los valores positivos crean sombras hacia la derecha y valores negativos hacia la izquierda.
- Sombra en Y.- especifica la dimensión de la sombra a lo largo del eje Y, es decir verticalmente, es un valor numérico con su unidad de medida longitudinal, ya sea px, em, etc. valores positivos crean sombras hacia abajo y valores negativos sombras hacia arriba del elemento.
- Color de sombra.- el color puede especificarse con palabras clave como: red, blue, Green, yellow, etc. también con valores hexadecimales o con los ya conocidos y admitidos.
El orden es importante, el primer valor corresponde siempre a la sombra horizontal, el segundo valor a la sombra vertical y luego va el color.
Ejemplo de box-shadow
En el siguiente ejemplo tenemos un boque, un contendor div con class="bloque", mediante CSS aplicaremos una sombra, veamos.
<div class="bloque"></div>
<style>
.bloque {
width: 250px;
height: 200px;
background: #f0f0f0;
border: 1px solid black;
box-shadow: 12px 12px #474747;
}
</style>Valores complementarios
Hasta el momento aprendimos a poner dimensión de sombra y color, un color sólido por cierto, pero se puede mejorar el efecto; para que nuestras sombras de caja queden maravillosamente terminadas complementaremos con valores de desenfoque y propagación, veamos de qué se tratan.
- Desenfoque (blur).- este valor especifica un desenfoque o radio de desenfoque para la sombra establecida, se trata de un valor numérico mayor a cero, es decir no admite valores negativos, cuanto menor es el valor menos desenfocado es la sombra, cuanto mayor es el valor más desenfocado es la sombra.
- Propagación (spread).- el radio de propagación nos permite establecer cuanto se propaga la sombra, puede admitir valores negativos, cuanto menor es el valor la sombra se encoge y cuanto mayor es el valor que toma, la sombra se propaga.
Tanto el valor de desenfoque, como el valor de la propagación se establecen a continuación de las dimensiones y antes del color; por lo tanto el orden sería:
- Sombra en X
- Sombra en Y
- Desenfoque
- Propagación
- Color
Ejemplo de box-shadow CSS
A continuación se muestra un ejemplo
<div class="bloque"></div>
<style>
.bloque {
width: 250px;
height: 200px;
background: #f0f0f0;
border: 1px solid black;
box-shadow: 10px 10px 6px 3px #474747;
}
</style>Sombras internas con CSS box-shadow inset
Mediante la palabra clave “inset”, Ahora tenemos la posibilidad de crear sombras internas para los elementos; hasta ahora aprendimos a crear sombras, sin embargo, dichas sombras por defecto son hacia fuera de la caja, podemos revertir la situación haciendo uso de la palabra “inset” antes de empezar con las dimensiones y características de la sombra, eso hará que el resultado sea una sombra hacia dentro del elemento. Por ejemplo: box-shadow: inset 10px 10px 2px 5px red;
Valores
Valores positivos en el eje horizontal harán que la sombra se genere del lado izquierdo de la caja hacia adentro y valores negativos harán que la sombra se genere del lado derecho de la caja, hacia el interior.
En tanto, valores positivos en el eje vertical harán que la sombra se genere a partir del borde superior hacia el interior de la caja, mientras que los valores negativos harán que la sombra se genere desde el borde inferior de la caja hacia el interior.
Ejemplo de sombras internas
<div class="bloque"></div>
<style>
.bloque {
width: 250px;
height: 200px;
background: #f0f0f0;
border: 1px solid black;
box-shadow: inset 10px 10px 6px 3px #474747;
}
</style>Sombras múltiples
Podemos crear múltiples sombras para un elemento, simplemente debemos separar con comas simples (,) cada sombra creada; la primera sombra se mostrará primero, cerca al elemento sombreado y la última sombra se mostrará al último, es decir más alejado; veamos un ejemplo.
Ejemplo de múltiples sombras con CSS3
<div class="bloque"></div>
<style>
.bloque {
width: 250px;
height: 200px;
background: #f0f0f0;
border: 1px solid black;
box-shadow:
10px 10px 1px 3px #ff2317,
20px 20px 2px 4px #ffe417,
30px 30px 3px 5px #23ff17,
40px 40px 4px 6px #174dff;
}
</style>
Cada sombra parte desde el borde del elemento, por ende si la primera sombra es más grande que todas, entonces es posible que el resto no aparezca, es decir puede superponerse y tapar al resto, así que, a tomar en cuenta.
Efecto de transparencia de sombras
Para conseguir un efecto de transparencia de sombras podemos hacer uso de los colores RGBA, básicamente se trata de los colores RGB, pero adicionalmente se tienen el control de la transparencia de color mediante el parámetro alfa, cuyo valor especifica la opacidad del color.
Para que te hagas una idea, la forma sería: rgba (rojo, verde, azul, alfa) donde rojo, verde y azul son valores numéricos que definirán en conjunto, un color determinado, mientras que el valor alfa es un número entre 0 y 1, donde 0 es totalmente transparente y 1 totalmente opaco, los efectos de transparencia se pueden lograr con valores intermedios; veamos algún ejemplo.
Ejemplo de sombras con efecto de transparencia
<div class="bloque"></div>
<style>
.bloque {
width: 250px;
height: 200px;
background: #f0f0f0;
border: 1px solid black;
box-shadow: 12px 15px 6px 3px rgba(0, 0, 0, 0.4);
}
</style>[popup_anything id=»5821″]