Cuando pones algo, digamos una hoja de papel normal, en una carpeta manilla, una parte de esa cosa puede sobresalir un poco de la carpeta. El mismo tipo de cosas con una billetera y tarjetas de crédito. Las cartas sobresalen solo un poquito para que puedas echar un vistazo rápido a las cartas que llevas.

Llamo a este tipo de cosas una "hendidura". Una rendija es donde creamos la ilusión de una abertura a través de la cual podemos provocar un elemento visual que se asoma. ¡Y podemos hacer eso en CSS!

La parte crucial del diseño es la sombra, que es lo que da la señal visual de que hay una rendija. Luego está la cubierta de la rendija que proporciona el espacio para que el elemento exhibido se asome por debajo.

Esto es lo que vamos a hacer juntos:

Comencemos con la creación de la sombra.

Es posible que se sorprenda de que la sombra en el ejemplo no se crea con una sombra CSS real, como box-shadow o un drop-shadow() filtrar. En cambio, la sombra es un elemento separado en sí mismo, oscuro y borroso. Esto es importante para que el diseño sea más adaptable, tanto en su estado predeterminado como animado.

La portada es el otro elemento del diseño. La portada es como llamo al elemento que se superpone a la sombra. Aquí hay una figura que muestra cómo se unen la sombra y la cubierta.

La sombra está hecha de un pequeño rectángulo vertical que tiene un fondo degradado. El degradado es más oscuro en el medio. Entonces, cuando el elemento está borroso, crea una sombra que es más oscura en el medio; por lo tanto más dimensional.

Ahora, la mitad izquierda de la sombra recreada está cubierta con un rectángulo en la parte superior, exactamente del mismo color que el fondo de su contenedor.

Tanto la cubierta como la sombra se mueven ligeramente hacia la izquierda para que parezca que están en capas.

trabajando en la portada

Para que la portada se mezcle con el fondo del diseño, su color de fondo se hereda de su elemento contenedor. Alternativamente, también puede intentar mezclar la portada con su fondo usando estándares como Máscaras CSS y modos de mezcla, dependiendo de sus opciones de diseño y requisitos.

Para aprender algunos conceptos básicos sobre cómo se pueden aplicar estos estándares, puede consultar estos artículos: Sarah Drasner's “Enmascaramiento vs. Recorte: Cuándo Usar Cada Uno” proporciona una base excelente para las mascarillas. También he escrito sobre los modos de fusión CSS en este articulo donde puedes repasar el tema.

En el código fuente de mi ejemplo, notará que alineé y apilé los elementos dentro del

elemento usando CSS Grid, que es un estándar de diseño que uso a menudo en mis demostraciones. Si está recreando un diseño similar, use un método de diseño que se adapte mejor a su aplicación para alinear las diferentes partes del diseño. En este caso, configuré una cuadrícula de una sola columna en el

elemento que me permite centrar alinear la portada, la sombra y la imagen.

Lo que CSS Grid también me permite hacer es configurar los tres divs por lo que son todos de ancho completo en el

envase:

main > div {
  grid-area: 1 / 1;
}

Esto hace que todo se apile uno encima del otro. Normalmente, trabajamos duro para evitar cubrir elementos con otros elementos en una cuadrícula. Pero este ejemplo se basa en ello. he dado el .slit-cover con un ancho del 50%, lo que naturalmente revela la imagen debajo de él. A partir de ahí, establecí un transform en él que lo mueve 50% en la dirección negativa, más la pequeña cantidad que cambié la sombra antes (25px) para asegurarse de que eso también se revele.

.slit-cover {
  width: 50%;
  transform: translatex(calc(-50% - 25px));
  /* etc. */
}

¡Y ahí lo tenemos! Una hendidura de aspecto bastante natural que imita algo que se asoma de una carpeta, billetera o lo que sea.

¡Hay más formas de hacer esto! Por un lado, Flexbox puede hacer que los elementos se alineen en una fila y se alineen en el centro de esta manera. Hay muchas maneras de poner las cosas una al lado de la otra. Y tal vez usted tiene una manera de usar el box-shadow propiedad, drop-shadow() filtro, o incluso Filtros SVG para obtener el mismo tipo de efecto de sombra que realmente vende la ilusión.

Y puedes cambiar totalmente esto para obtener tu propia apariencia. Por ejemplo, intente cambiar la posición de la sombra y la imagen. O juega con las combinaciones de colores y cambia el blur() filtrar valor. La forma de la cubierta y la sombra también se pueden modificar. ¡Apuesto a que puedes crear una sombra curva en lugar de una recta y compartirla con nosotros en los comentarios!