Sombras para cajas con CSS3

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.

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.
Te recomendamos ver:  La propiedad Word-wrap

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:

  1. Sombra en X
  2. Sombra en Y
  3. Desenfoque
  4. Propagación
  5. 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.

Te recomendamos ver:  La regla @ font-face de CSS3

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.

Te recomendamos ver:  Introducción a CSS3

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>
Curso css3 - temas
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos