En diseño web debemos tener recursos a mano que podamos aplicar con CSS en nuestra tienda online o a la hora de crear una web y uno de los más prácticos y vistosos son las sombras. No siempre utilizarás todas sus posibilidades en un diseño en particular, pero cuantos más conozcas más opciones de personalización podrás aplicar a tus trabajos. Las sombras CSS son una utilísima herramienta para aplicar un toque diferente a los elementos de la página, creando también un efecto de profundidad cuando lo desees.
Para ir a Indice:
Cómo se definen las sombras CSS
Comencemos viendo cómo se desarrolla el CSS para crear sombras, aclarando también que existen dos tipos de sombra:
Para dar la sombra insertada a un elemento, usaremos la propiedad box-shadow. En la propiedad box-shadow, definiremos el valor h-offset ( Es obligatorio para el efecto de sombra horizontal ), luego el valor v-offset (Es obligatorio para el efecto de sombra vertical ).
También podemos dar un efecto de desenfoque y extender la sombra utilizando valores de desenfoque y propagación. Al final, usaremos la palabra clave insertada que cambiará la sombra dentro del marco.
Es lo que aprenderemos en esta lección, así que, ¡manos a la obra!.
Para ir a Indice:
Sombras para las cajas
Tenemos sombras para los elementos en general, que se aplicará sobre la «caja» del elemento. Estas se consiguen con el atributo «box-shadow» y la sintaxis sería la siguiente:
box-shadow: 1px 1px 1px 1px rgba(32,32,32,0.3);
Por orden de aparición, los valores de unidades entregadas a box-shadow son los siguientes:
- Desplazamiento de la sombra en la horizontal (h-offset)
- Desplazamiento de la sombra en vertical (v-offset)
- Desenfoque de la sombra
- Propagación de la sombra
- Color aplicado
Los 4 valores iniciales los podemos entregar en distancia, por ejemplo píxeles. El último valor será un color. El color puede ser un RGB normal, pero es muy habitual que acabemos usando un RGBA porque le aplicará también una transparencia en el color de la sombra.
Dedico una publicación, exclusivamente a ahondar en este tema, en el siguiente enlace puedes revisarlo:
Para ir a Indice:
Sombras para el texto
Por su parte, existen sombras CSS que se pueden aplicar sobre el texto del elemento, mediante las que se pueden conseguir otros tipos de efectos.
text-shadow: 1px 1px 1px rgba(32,32,32,0.3);
De nuevo, los valores por orden de aparición son los siguientes:
- Desplazamiento en la horizontal (h-offset)
- Desplazamiento en la vertical (v-offset)
- Desenfoque
- Color de la sombra
Dedico una publicación, exclusivamente a ahondar en este tema, en el siguiente enlace puedes revisarlo:
Para ir a Indice:
Cómo crear efectos con sombras
Si lo que queremos es crear efectos vistosos con las sombras CSS podemos trabajar con tres principales alternativas que vamos a tratar ahora por separado. Las veremos con las sombras para las cajas, pero básicamente podrías hacer lo mismo con los textos.
Para ir a Indice:
Efectos 3D con sombras CSS
El primer efecto que podemos conseguir es la separación entre las cajas y el resto de la página. Para ello, podremos aplicar un desplazamiento de la sombra unido con un degradado.
El degradado siempre lo podemos asignar un poco mayor que el desplazamiento, para conseguir que la sombra no sea demasiado sólida. Unido a un color de la sombra con valor RBGA para transparencia conseguiremos efectos bastante atractivos. Aquí tenemos varias reglas CSS para sombras, que aplicadas a cajas conseguirán el mencionado efecto de separación, emulando un poco el 3D.
.separar0 { box-shadow: none; } .separar1 { box-shadow: 2px 2px 4px 0 rgba(20, 20, 20, 0.3); } .separar2 { box-shadow: 7px 7px 12px 0 rgba(20, 20, 20, 0.3); } .separar3 { box-shadow: 14px 14px 20px 0 rgba(20, 20, 20, 0.3); }
Aplicadas estas clases a 4 cajas, quedarían más o menos como aparece a continuación:
See the Pen
Ejercicio. Aplicación de sombras a contenedores by Angel Gilberto Paz Escalante (@angel-gilberto-paz-escalante)
on CodePen.
Para ir a Indice: Es posible aplicar una sombra al interior del elemento con el valor «inset».
Por defecto, la sombra se genera fuera de la caja pero mediante el uso de recuadro podemos crear la sombra dentro de la caja. Para las sombras en el interior de los elementos es preferible ser bastante conservadores y no pasarse de desplazamiento o degradado de la sombra, porque podría afectar a la visibilidad del contenido de las cajas. Incluso podemos trabajar únicamente con un poco de degradado sin aplicar desplazamiento, para que el sombreado sea equitativo en todos los lados de la caja. La sintaxis sería la siguiente: El valor «inset» lo aplicamos en la propiedad box-shadow a un ejemplo concreto, de la siguiente manera. Estos efectos aplicados tendrían el siguiente aspecto.
See the Pen
Ejercicio: aplicar una sombra al interior del elemento con el valor «inset» by Angel Gilberto Paz Escalante (@angel-gilberto-paz-escalante)
on CodePen.
Para ir a Indice: Es posible aplicar distintos valores de sombra al mismo tiempo sobre las cajas o textos de la página. Esto nos puede ayudar a conseguir toda una variedad de nuevos efectos, por ejemplo sombras de distintos colores o sombras con una propagación en colores diferentes. Para aplicar más de una sombra simplemente separamos las distintas especificaciones de cada sombra separadas por comas. Podemos poner tantas como queramos, mezclando desplazamientos, desenfoques y propagaciones distintas, así como colores. En estos ejemplos puedes ver sombras que mezclan varios colores, para conseguir un efecto muy particular. Observarás que no se trata de definir varias declaraciones box-shadow, pues en ese caso estaríamos simplemente sobrescribiendo la sombra. En realidad es una única declaración a la que le hemos añadido diversas sombras separadas por comas. El efecto que conseguimos mediante ese código se puede ver seguidamente.
See the Pen
Ejercicio: aplicando varias sombras al mismo tiempo by Angel Gilberto Paz Escalante (@angel-gilberto-paz-escalante)
on CodePen.
Nota : Se pueden definir múltiples efectos separados por comas. Fuente: https://developer.mozilla.org/ En el ejemplo anterior, llamado Caja con efectos múltiples, se aplicaron "simultáneamente" 5 efectos: 3 efectos offset (orange, blue y black) y 2 efectos inset green y pink). Para ir a Indice: Si el fondo de tu web es claro y trabajas con clusters o un grid de posts, es posible que venga bien un efecto que consiga hacer que los elementos se distingan del fondo. Para ello, el efecto de sombra del box-shadow viene genial, y podemos crear un efecto sutil y elegante. Para conseguir este efecto, tendremos que ponerle un id a la imagen (hemos elegido “sombra” como nombre) y también tendrás que añadir este código a tu css adicional, Apliquemos la propiedad en el siguiente ejemplo: Resultado:
See the Pen
Sombreado de imagen by Angel Gilberto Paz Escalante (@angel-gilberto-paz-escalante)
on CodePen.
Imagen con sombra pero eliminando padding 0 Para ir a Indice: Un efecto muy resultón para personalizar las imágenes de tu web es utilizar algún tipo de marco alrededor de ellas. En este caso vamos a aprender a crear un marco compuesto por 3 variantes: Y, además, incorporar el efecto sombra como detalle adicional, ¿se puede hacer?, pues claro que sí, y es lo que viene a continuación. Seguidamente los códigos, CSS y HTML, respectivamente: Para conseguir este efecto, tendremos que ponerle un id a la imagen (hemos elegido “marco” como nombre) y también tendrás que añadir este código a tu css adicional. El resultado es la imagen hermosamente decorada que se muestra seguidamente:
See the Pen
Sombreado de imagen con degradado by Angel Gilberto Paz Escalante (@angel-gilberto-paz-escalante)
on CodePen.
El CSS permite dar relevancia a tus post, y el requisito es la creatividad, porque estarás de acuerdo en la creatividad del modelo anterior, que agregó distinción a la imagen. Por supuesto, el paso previo es conocer sus propiedades, y ese es uno de los objetivos de esta publicación. Para ir a Indice: Soporte de Navegador Explorador Version Chrome 10.0 4.0 -webkit- Internet Explorer 9.0 Firefox 4.0 3.5 -moz- Safari 5.1 3.1 -webkit- Opera 10.5 Para ir a Indice: Efecto de sombra interior
.interior1 {
box-shadow: 5px 10px 20px 5px Green ;
}
.interior2 {
box-shadow: 5px 10px 20px 5px Green inset;
}
Aplicar varias sombras al mismo tiempo
Aplicar sombra a una imagen
#sombraimg{
border-radius:18px;
-webkit-box-shadow: 6px 4px 5px 1px red;
-moz-box-shadow: 6px 4px 5px 1px red;
box-shadow: 6px 4px 5px 1px red;
}
Aplicar sombra a un marco degradado alrededor de una imagen
#marco {
background: linear-gradient(to bottom right, #ff3021 16%,#c61fa3 51%,#1f33f0 84%);
padding: 12px; border-radius:18px;
-webkit-box-shadow: 6px 4px 5px 1px red;
-moz-box-shadow: 6px 4px 5px 1px red;
box-shadow: 6px 4px 5px 1px red; }
<img style="max-width:500px;" id="marco" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinxfJ4oJQBmUtRVBoo20A7d7Y7l_d9alVIFD1iMk4Kp0GKV56Q5lBWh2lMrDY0-ZiC2B6Ng4p82Hi184diN2WtOedgB26wDY2pEyMdAp-UATZUHYmVG5Jn9kVJy4gUtFBz95GkxrIkbmLwBJo1W3rp9bWI-1fvpsyEfT95HxRivxGz610nDDi2t3v-hw/s1600/12.PNG" >
Fuentes consultadas:
https://www.arsys.es/
https://www.euroresidentes.com/
https://nextline.es/web/marco-degradado-imagen/
https://nextline.es/web/anadir-sombra-imagen-css/
https://www.geeksforgeeks.org/
Generadores online
https://www.cssmatic.com/
https://html-css-js.com/
https://www.easycodetools.com/
https://cssgenerator.org/
