Cómo crear una sombra paralela con CSS

Aunque las tendencias de diseño varían cada año, puede contar con el uso de efectos de sombra básicos como sombra de la caja y sombra paralela para contribuir positivamente a la estética de un sitio web. Puedes usar sombras paralelas para crear efectos agradables y bellamente renderizados sin parecer cursi.

Echemos un vistazo más de cerca al CSS sombra paralela propiedad.

¿Qué es la sombra paralela de CSS?

sombra paralela () es un efecto CSS que muestra una sombra alrededor de la forma de un objeto específico. Aquí está la sintaxis para aplicar un CSS sombra paralela.

Sintaxis:
filtro: sombra paralela (desplazamiento-x desplazamiento-y color de radio de desenfoque);

Hay una amplia gama de funciones de filtro incluso difuminar (), brillo (), y sombra paralela ().

offset-x determina la distancia horizontal y offset-y determina la distancia vertical. Tenga en cuenta que los valores negativos colocan la sombra a la izquierda (offset-x) y por encima (offset-y) el objeto.

Los dos últimos parámetros son opcionales. Puede especificar el radio de desenfoque de la sombra como una longitud. De forma predeterminada, está establecido en 0. No puede tener un radio de desenfoque negativo.

El color de la sombra se especifica como. Si no ha especificado un color, sigue el valor de la color propiedad.

¿Cuándo es útil la sombra paralela de CSS?

Puede que ya sepas que sombra de la caja hace el trabajo bastante bien. Entonces, puedes pensar, ¿por qué necesitamos sombra paralela ¿en absoluto? Hay numerosos casos en los que sombra paralela () La función es un salvavidas. Echemos un vistazo a algunos de ellos:

Formas no rectangulares

A diferencia de un sombra de la caja, puedes agregar un sombra paralela a formas no rectangulares. Por ejemplo, tenemos un SVG o PNG transparente con una forma no rectangular, por ejemplo, una estrella. Aquí, agregar una sombra que corresponda al objeto en sí se puede completar con sombra de la caja o sombra paralela. Considere ambos escenarios:

HTML

CSS

.star-img img {
pantalla: bloque en línea;
altura: 15em;
ancho: 25em;
}
.sombra de la caja {
color rojo;
sombra de caja: 0.60em 0.60em 0.2em;
}
.drop-shadow {
filtro: sombra paralela (0.60em 0.60em 0.2em);
}

Producción:

Al comparar ambos efectos, es evidente que un sombra de la caja da una sombra rectangular; tampoco importa si la imagen es transparente o ya posee un fondo. Por otra parte, sombra paralela le permite crear una sombra que se adapta a la forma de la propia imagen.

Los factores limitantes son que sombra paralela () la función acepta todos los parámetros de tipo excepto el recuadro palabra clave y propagar parámetro.

Elementos agrupados

Hay varios casos en los que es posible que deba construir componentes superponiendo ciertos elementos. Si estas usando sombra de la caja, enfrentará el problema de tratar de proyectar una sombra de la manera correcta. Así es como funciona al agrupar una imagen y un componente de texto:

HTML

Vivir el momento

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

CSS básico

cuerpo {
acolchado: 5em 1em;
familia de fuentes: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Ginebra, Verdana, sans-serif;
}
h2 {
tamaño de fuente: 2rem;
}
pag {
tamaño de fuente: 0.8rem;
}
.parent-container {
pantalla: flex;
flex-direction: columna;
altura: 17rem;
ancho: 50em;
}
.image-container img {
ancho: 15em;
posición: absoluta;
índice z: 1;
arriba: 2em;
izquierda: 1.5em;
}
.text-container {
color: rgb (255, 236, 236);
color de fondo: rgb (141 0 35);
ancho: 30rem;
acolchado: 3rem;
align-self: flex-end;
posición: relativa;
}

Ahora, aplique el sombra de la caja y sombra paralela para ver la diferencia.

.drop-shadow {
filtro: sombra (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.5));
}
.caja,
.box img {
sombra de caja: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0.3);
}

Producción:

Como puede ver, el sombra de la caja se aplica en cada elemento individualmente mientras que el sombra paralela agrupa a ambos y aplica la sombra.

Elementos recortados

Puedes usar el ruta del clip propiedad para recortar una determinada región que determina qué partes de una imagen o elemento deben mostrarse. los filtro de sombra paralela nos permite crear un sombra paralela en el elemento recortado aplicándolo al padre de ese elemento:

HTML

CSS

.parent-container {
filtro: sombra (0rem 0rem 1.5rem granate);
}
.clipped-element {
ancho: 50em;
altura: 50em;
margen: 0 automático;
imagen de fondo: url (niña-sonriente.jpg);
ruta del clip: círculo (50%);
tamaño de fondo: cubierta;
repetición de fondo: no repetición;
}

Producción:

Hemos recortado el 50% de la imagen con una ruta circular. por lo tanto, el filtro de sombra paralela se aplica solo a la parte visible de la imagen. ¿No es asombroso?

Limitaciones y diferencias

Como comentamos anteriormente, sombra paralela no es compatible con propagar parámetro. Esto significa que no sería posible crear un efecto de contorno utilizando el sombra paralela () funciona porque se mata en todas partes. Además, genera diferentes efectos de sombra del sombra de la caja y sombra de texto (con los mismos parámetros). Puede sentir que las diferencias entre sombra de la caja y sombra paralela hervir hasta el Modelo de caja CSS. Uno lo sigue y el otro no. He aquí un ejemplo:

HTML

Cada artículo de MUO te acercará un paso más.


Cada artículo de MUO te acercará un paso más.



Cada artículo de MUO te acercará un paso más.

CSS básico

cuerpo {
acolchado: 5em 1em;
familia de fuentes: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Ginebra, Verdana, sans-serif;
}
.parent-container {
ancho: 72rem;
}
pag {
tamaño de fuente: 3em;
estilo de fuente: negrita;
}

Aplicar efectos de sombra

.drop-shadow {
filtro: sombra (0.5em 0.5em 0.1em # 555);
}
.sombra de la caja {
sombra de caja: 0.5em 0.5em 0.1em # 555;
}
.sombra de texto {
sombra de texto: 0.5em 0.5em 0.1em # 555;
}

Producción:

Puedes ver que el sombra de la caja da una sombra más densa y oscura que la sombra de texto y sombra paralela. Además, hay una ligera diferencia en la posición de la sombra entre los sombra de texto y sombra paralela. Sin embargo, es posible que prefiera diferentes efectos de sombra según sus necesidades.

Soporte del navegador

los sombra paralela () La función es compatible con todos los navegadores modernos, excepto los navegadores más antiguos como Internet Explorer. Aunque no es algo que obstaculice seriamente la UX, puede agregar una consulta de funciones con un sombra de la caja retroceder.

Experimente con diferentes efectos de sombra

La popularidad de sombra de la caja es bastante obvio debido a la multitud de casos de uso. sin embargo, el sombra paralela () la función está muy infrautilizada. Esperamos que experimente con diferentes efectos de sombra e intente implementar sombra paralela en tus proyectos futuros.

Las pseudoclases agregan una gama completamente nueva de funcionalidades a CSS y su repertorio de desarrollo web personal. Obtenga más información sobre ellos para convertirse en un desarrollador web más competente y eficiente.

Cómo usar CSS box-shadow: 13 trucos y ejemplos

Las cajas anodinas se ven aburridas. ¡Arreglelos con el efecto de sombra de caja CSS!

Leer siguiente

Sobre el Autor