La sombra paralela es un efecto que coloca o agrega una sombra detrás de los elementos HTML seleccionados cuando se representan en la página web. Este efecto se puede lograr usando el “ sombra paralela() 'método como un valor para CSS' filtrar ” propiedad o usando el “ sombra de la caja ' propiedad. Al utilizar la propiedad 'box-shadow', la mejora visual, la experiencia del usuario, el énfasis y el enfoque se pueden dibujar en un elemento HTML objetivo específico.
Esta guía demuestra el procedimiento para crear un efecto de sombra con la propiedad box-shadow:
-
- Hacer una sombra paralela sólida usando la propiedad box-shadow
- Hacer una sombra paralela borrosa usando la propiedad box-shadow
- Ampliar el área de sombra paralela
¿Cómo hacer sombras paralelas en CSS3 usando la propiedad box-shadow?
El ' sombra de la caja La propiedad ” permite al desarrollador establecer una jerarquía visual al indicar la posición relativa de los elementos en la página. Al usarlo, los creadores de páginas web pueden crear la ilusión de que los objetos proyectan sombras sobre las superficies, dando a los elementos una sensación más interactiva.
Sintaxis
La propiedad 'box-shadow' tiene una sintaxis de:
sombra de la caja: [ desplazamiento horizontal ] [ desplazamiento vertical ] [ radio de desenfoque ] [ radio de propagación ] [ color ] ;
Una explicación de los términos utilizados en la sintaxis anterior:
-
- Inicialmente, el “ desplazamiento horizontal ” recupera/almacena la posición del eje X, y el “ negativo El valor ” establece la sombra a la izquierda y viceversa.
- El ' desplazamiento vertical El valor ' almacena la posición del eje Y, el valor ' positivo El valor ” establece la sombra en dirección hacia abajo, y viceversa en el caso del “ negativo ' valor.
- A continuación, el “ radio de desenfoque El valor a partir del nombre establece la borrosidad de la sombra.
- El ' radio de propagación El valor especifica cuánto radio debe expandirse la sombra.
- El ' color ” establece el color de la sombra, puede estar en el “ LGV ' o ' RGB formato ” también.
Ahora, veamos un par de ejemplos para una mejor comprensión:
Ejemplo 1: aplicar sombra paralela sólida usando la propiedad box-shadow
Para configurar la sombra paralela sólida, solo se insertan las direcciones y el color de la sombra como valor para el “ sombra de la caja ' propiedad:
< estilo >.boxShadowEjemplo {
ancho: 210px;
borde: 2px seda de maíz sólida;
altura: 210px;
color de fondo: #f0f0f0;
caja-sombra: 10px 10px forestgreen;
}
estilo >
En el código anterior:
-
- Primero, se selecciona el elemento HTML que tiene una clase de “ boxShadowEjemplo ”. Y el valor de “ 210px ” se proporciona a la “ altura ' y ' ancho ' propiedades. Además, utilice el “ borde ' y ' color de fondo ” propiedades para una mejor visualización.
- A continuación, establezca el valor de “ 10px 10px verde bosque ' hacia ' sombra de la caja ” Propiedad CSS. El ' 10px ” es el desplazamiento horizontal y vertical que determina la ubicación donde se debe aplicar la sombra. Y el ' bosque verde ” es el color de la sombra.
Después de la compilación, la página web aparece así:
El resultado confirma que se ha colocado una sombra paralela de tipo sólido mediante la propiedad box-shadow.
Ejemplo 2: aplicar sombra paralela borrosa utilizando la propiedad box-shadow
Para hacer que la sombra ya aplicada sea borrosa, se inserta un valor numérico más antes del color para el “ sombra de la caja ' propiedad. Visite el código actualizado a continuación:
< estilo >.boxShadowEjemplo {
ancho: 210px;
borde: 2px seda de maíz sólida;
altura: 210px;
color de fondo: humo blanco;
caja-sombra: 10px 10px 15px forestgreen;
}
estilo >
De acuerdo con el código anterior, la sombra ahora es ' 15px ”borroso. Después del final de la fase de compilación, la página web se ve así:
La figura de arriba muestra que la sombra ahora está borrosa.
Ejemplo 3: Ampliación del área de sombra paralela
El valor diferencial se proporciona a la “ sombra de la caja ” propiedad para expandir la región de la sombra. El valor del spread debe estar en formato numérico. Al igual que en el fragmento de código a continuación, la región de la sombra se expande a ' 20px ”:
< estilo >.boxShadowEjemplo {
ancho: 210px;
borde: 2px seda de maíz sólida;
altura: 210px;
color de fondo: humo blanco;
caja-sombra: 10px 10px 15px 20px forestgreen;
}
estilo >
Después de la ejecución, la sombra paralela ahora aparece así:
Como puede ver, la región de la sombra ahora aumenta en 20 px.
Conclusión
El ' sombra de la caja ” propiedad se utiliza para la creación de un “ sombra paralela ” efecto en elementos HTML seleccionados. El ' sombra paralela ” propiedad acepta cinco valores, “ desplazamiento horizontal ”, “ desplazamiento vertical ”, “ radio de desenfoque ”, “ radio de propagación ' y ' color ”. Los valores de 'desplazamiento horizontal' y 'desplazamiento vertical' establecen las dimensiones de la sombra de donde debe surgir la sombra paralela. El valor de 'radio de desenfoque' hace que la sombra sea borrosa y el valor de 'radio de propagación' extiende la región de la sombra.