Cuando coloca algo, digamos, una hoja de papel normal, en una carpeta, algo de esa cosa puede sobresalir un poco de la carpeta. Lo mismo con la billetera y las tarjetas de crédito. Las cartas sobresalen un poco para que puedas echar un vistazo rápido a las cartas que llevas.
Yo llamo a esto una "rendija". Una ranura 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 da una indicación visual de que hay una ranura. Luego hay una cubierta para la ranura, que proporciona espacio para que el elemento expuesto se asome desde abajo.
Esto es lo que haremos juntos:
Comencemos por crear la sombra.
Es posible que se sorprenda de que la sombra del ejemplo no se haya creado 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 responda mejor, tanto en su estado estándar como en su estado animado.
La portada es el otro elemento de 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 pantalla y la cubierta.
La sombra está formada por un pequeño rectángulo vertical con un fondo degradado. El degradado es más oscuro en el medio. Entonces, cuando un 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, coloreado exactamente como el fondo del contenedor.
Tanto la cubierta como la sombra se mueven ligeramente hacia la izquierda para que parezcan estar en capas.
trabajando en la portada
Para que la portada se mezcle con el fondo del diseño, su color de fondo se hereda del elemento contenedor. Alternativamente, también puede intentar fusionar la portada con su fondo usando estándares como máscaras CSS y modos de fusión, según sus elecciones y requisitos de diseño.
Para obtener información básica sobre cómo se pueden implementar estos estándares, puede consultar estos artículos: Enmascaramiento frente a recorte de Sarah Drasner: Cuándo usar cada uno proporciona un excelente ejemplo de máscaras. También escribí sobre los modos de fusión CSS en este artículo donde puede refrescar el tema.
En mi código fuente de ejemplo, notará que alineé y ordené los elementos dentro del <main> 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 sea más apropiado para su aplicación para alinear las diferentes partes del diseño. En este caso, configuré una cuadrícula con una columna de <main> elemento que me permite centrar la portada, la sombra y la imagen.
Lo que CSS Grid también me permite hacer es establecer los tres divs por lo que son todos de ancho completo en <main> envase:
main > div {
grid-area: 1 / 1;
}Esto hace que todo se apile uno encima del otro. Por lo general, trabajamos duro para evitar cubrir elementos con otros elementos en una cuadrícula. Pero este ejemplo se basa en ello. Di .slit-cover al 50% de ancho, lo que naturalmente revela la imagen debajo de él. A partir de ahí puse un transform sobre él, que lo mueve un 50% en sentido negativo, más la pequeña cantidad que moví la sombra antes (25px) para asegurarse de que esto también se revelará.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}¡Y ahí está! 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 ejemplo, Flexbox puede hacer que los elementos se alineen y se alineen al centro de esa manera. Hay muchas maneras de poner las cosas juntas. Y tal vez usted tiene una manera de usar 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 modificarlo totalmente para obtener tu propia apariencia. Por ejemplo, intente intercambiar la posición de la sombra y la imagen. O juega con las combinaciones de colores y cambia blur() valor de filtro La forma de la cubierta y la sombra también se pueden cambiar. ¡Apuesto a que puedes crear una sombra curva en lugar de una recta y compartirla con nosotros en los comentarios!
Deja una respuesta