| |
👉 Box-shadow CSS3, las cajas de sombras son utilizadas para mejorar el aspecto de ciertos elementos dentro de una página web, en lo personal me gusta mucho utilizar esta propiedad en mis proyectos, porque su efecto en la presentación de una publicación es muy decorativo. |
|---|
La implementacion de Box-shadow es muy fácil pero hay que entender sus propiedades para logar un mejor resultado.
Ya conocemos la propiedad text-transform para aplicar sombras y efectos tridimensionales a texto, así como la propiedad border-style que permite generar algunos efectos tipo sombra pero en realidad bastante limitados. La propiedad box-shadow facilita la introducción de sombras y efectos 3D. Este efecto antiguamente no era fácil de conseguir y se solía recurrir al uso de imágenes u otras técnicas.
Con la propiedad box-shadow se ha hecho posible conseguir sombras y efectos 3D en las cajas contenedoras CSS con facilidad. Ten en cuenta que esta propiedad no es soportada por muchas de las versiones de navegadores que no son recientes, e incluso en algunos de los recientes todavía es posible que se considere experimental, lo que obliga al uso de prefijos específicos de navegador, aunque la mayor parte de los navegadores actuales ya las han introducido como estándar y no requieren de prefijo.
PROPIEDAD BOX-SHADOW
La sintaxis a emplear se basa en indicar uno o más efectos de sombra separados por comas. Cada efecto de sombra comprende hasta 5 parámetros:
La sintaxis a emplear es la siguiente:
|
selectorElemento {noEspecificado_none_o_inset_opcional |
Si no se especifica, la sombra será externa (hacia fuera de la caja). Si se escribe la palabra inset la sombra será interna (hacia dentro de la caja).
Blur crea un efecto de difuminado y brillo.
Spread crea un efecto de agrandamiento de la sombra, haciéndola más grande que la propia caja contenedora. Si spread es cero la sombra tiene el mismo tamaño que la caja, pero con un desplazamiento.
Si se especifica un color, la sombra tomará el color especificado. Si no se especifica color, la sombra tomará el valor que por defecto o explícitamente tenga la propiedad color de aplicación.
PROPIEDAD BOX-SHADOW
| PROPIEDAD CSS box-shadow | |
| Función de la propiedad | Permite crear sombras hacia fuera o hacia dentro de una caja contenedora. Se pueden especificar varios efectos separando su especificación por comas. |
| Valor por defecto | none |
| Aplicable a | Todos los elementos. |
| Valores posibles para esta propiedad | none (elimina el efecto de sombra) |
| Una especificación sintáctica con un desplazamiento horizontal (offset-x) y vertical (offset-y) en unidades de medida válidas (no se admiten %). | |
| Una especificación sintáctica que además de los desplazamientos puede incluir opcionalmente: el valor inset para indicar que la proyección de sombra debe ser hacia el interior, un valor de efecto blur en una unidad de medida válida (no se admiten porcentajes), un valor de efecto spread en una unidad de medida válida (no se admiten porcentajes) y un valor de color. | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com |
.myContainer { box-shadow: -5px -5px; } .myContainerSP { box-shadow: inset 0 0 15px 0 maroon; } |
Si el contenedor tiene un borde con forma distinta a la rectangular establecida con border-radius, la sombra establecida con box-shadow adopta la forma que tenga el borde.
Si los desplazamientos se establecen a cero, la sombra no se visualiza excepto si se establecen valores para el efecto blur o spread, en cuyo caso se crea una sombra uniforme en torno a toda la caja contenedora.
Los desplazamientos con valores positivos son hacia la derecha para el horizontal y hacia abajo para el vertical. Los desplazamientos con valores negativos son hacia la izquierda para el horizontal y hacia arriba para el vertical.
Supongamos que se especifican varias sombras: box-shadow: 0.5em -0.5em 0.4em red, 0.5em 0.5em 0.4em gold, -0.5em 0.5em 0.4em lime, -0.5em -0.5em 0.4em blue;
En este caso, la sombra relacionada en primer lugar se sitúa encima del resto de sombras (que pueden quedar ocultas por esta, parcial o totalmente). En este ejemplo la sombra roja estaría encima de la sombra oro, esta encima de la sombra lima y esta encima de la sombra azul.
Primordialmente tenemos que tener un elemento ya sea un div, aside, figure, article, imagen etc. Este elemento tiene que tener un ID o una clase CLASS para poder enlazar el estilo, veamos como seria esto.
<div id="caja"></div>
Una vez que tengas tu contenedor pasamos a la parte de los estilos CSS3 donde agregaremos el Box-shadow.
#caja{
background: red; /*Color de fondo*/
width: 200px; /*Ancho del div*/
height: 100px; /*Alto del div*/
box-shadow:10px 10px 20px #000000;
-moz-box-shadow:10px 10px 20px #000000;
-webkit-box-shadow:10px 10px 20px #000000;
}
Ya lo se, se estarán preguntando ¿No solo era Box-shadow?, ¿Que es todo eso que pusiste? , les explico cada parte, yo agregue background, width, height para darle color de fondo, ancho y alto así que podemos ignorar esa parte por el momento y centrarnos en Box-shadow.
Como lo habrán notado hay tres lineas muy similares que tienen en común la palabra box-shadow, en realidad eso es la misma propiedad solo que los agregamos para una mayor compatibilidad con los navegadores.
La mayoría de las actualizaciones de los navegadores ya permiten el uso correcto de CSS3, pero es recomendable adaptar el código para que funcione en la mayoría de los navegadores, podemos utilizar “-moz-box-shadow:” para Mozilla, “webkit-box-shadow:” para Google Chrome y Safari,”box-shadow” para Explorer y Opera, PUEDES UTILIZAR TODOS JUNTOS como en este ejemplo.
Ya sabemos el porqué de estas tres lineas ahora veamos como colocar las sombras a nuestro gusto, si notamos en el código podemos ver esta parte “10px 10px 20px #000000;”, los primeros 10px es la distancia que colocamos la sobra hacia la derecha (Podemos colocar números negativos para mover la sombra a la izquierda), los segundos 10px representan la posición vertical de la sombra, de igual manera que los primeros podemos utilizar numero negativos, los últimos 20px es el desenfoque de la sombra y terminamos con #000000 que es el color negro en hexadecimal.
Este seria el resultado final;
See the Pen Sombras con CSS3 (Box-shadow) by Angel Sanchez (@AzulWeb) on CodePen.
Pero esto no es todo, también podemos modificar el ancho de la sombra he incluso si queremos que sea sobra interna o externa. Para modificar el ancho necesitamos colocar otro numero de pixeles justo antes del código hexadecimal, algo así;
#caja{
background: red; /*Color de fondo*/
width: 200px; /*Ancho del div*/
height: 100px; /*Alto del div*/
box-shadow:10px 10px 20px 50px #000000;
-moz-box-shadow:10px 10px 20px 50px #000000;
-webkit-box-shadow:10px 10px 20px 50px #000000;
}
Para colocar la sombra interna solo basta con agregar “inset” al principio, algo así;
#caja{
background: red; /*Color de fondo*/
width: 200px; /*Ancho del div*/
height: 100px; /*Alto del div*/
box-shadow:inset 10px 10px 20px 50px #000000;
-moz-box-shadow:inset 10px 10px 20px 50px #000000;
-webkit-box-shadow:inset 10px 10px 20px 50px #000000;
}
Este es el resultado de los tres ejemplos;
See the Pen Box-shadow, sobre interna y externa by Angel Sanchez (@AzulWeb) on CodePen.
Para el mejor entendimiento y claro también para ahorrarnos tiempo y utilizarlo como herramienta de trabajo he creado un Generador de sombras CSS3 (Box-shadow) de código libre que puede utilizar para sus proyectos.
Escribe este código y visualiza sus resultados. Con los contenidos que hemos explicado a lo largo del curso debes ser capaz de interpretar todo el código que hemos incluido. También debes ser capaz de valorar las ventajas y desventajas que puede tener usar este tipo de propiedades.
|
<html> <head> |
El resultado que se obtiene en un navegador que acepte estas propiedades será similar a este:
EJERCICIO RESUELTO
Invertir todas las sombras del ejemplo anterior para que se proyecten hacia dentro de las cajas contenedoras y no hacia fuera y comprobar los resultados comparándolos con los anteriores.
SOLUCIÓN
Tenemos que añadir la especificación inset para las sombras. El código sería el siguiente:
|
<html> |
El resultado que se obtiene en un navegador que acepte estas propiedades será similar a este:
Fuentes. https://www.azulweb.net/sombras-con-css3-box-shadow/ https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=764:efecto-sombra-css-box-shadow-sombra-interior-inset-difuminado-blur-spread-ejercicio-resuelto-cu01059d&catid=75&Itemid=203 Complementario: https://devcode.la/tutoriales/box-shadow-css3/
