Quando metti qualcosa - diciamo un normale foglio di carta - in una cartella manilla, una parte di quella cosa potrebbe sbirciare un po' fuori dalla cartella. Lo stesso genere di cose con un portafoglio e carte di credito. Le carte sporgono solo un po' in modo da poter dare una rapida occhiata a quali carte stai trasportando.
Io chiamo questo genere di cose una "fessura". Una fessura è il punto in cui creiamo l'illusione di un'apertura attraverso la quale possiamo stuzzicare un elemento visivo che fa capolino da essa. E possiamo farlo in CSS!
La parte cruciale del design è l'ombra, che è ciò che dà l'idea visiva della presenza di una fessura. Poi c'è il coperchio per la fessura che offre lo spazio all'elemento esposto per sbirciare da sotto.
Ecco cosa faremo insieme:
Iniziamo con la creazione dell'ombra
Potresti essere sorpreso dal fatto che l'ombra nell'esempio non sia stata creata con un'ombra CSS reale, come box-shadow o drop-shadow() filtro. Invece, l'ombra è un elemento separato in sé, scuro e sfocato. Questo è importante per rendere il design più adattabile, sia nello stato predefinito che animato.
La copertina è l'altro elemento del design. La copertura è ciò che io chiamo l'elemento che si sovrappone all'ombra. Ecco una figura che descrive come l'ombra e la copertura si uniscono.
L'ombra è composta da un piccolo rettangolo verticale con uno sfondo sfumato. Il gradiente è più scuro nel mezzo. Quindi, quando l'elemento è sfocato, crea un'ombra più scura nel mezzo; quindi più dimensionale.
Ora, la metà sinistra dell'ombra ricreata è coperta da un rettangolo in alto, colorato esattamente come lo sfondo del suo contenitore.
Sia la copertina che l'ombra vengono quindi spostate leggermente a sinistra in modo da sembrare sovrapposte
Al lavoro sulla copertina
Affinché la copertina si fonda con lo sfondo del design, il suo colore di sfondo viene ereditato dall'elemento contenitore. In alternativa, puoi anche provare a fondere la copertina con il suo sfondo usando standard come Maschere CSS ed metodi di fusione, a seconda delle scelte e dei requisiti di progettazione.
Per apprendere alcune nozioni di base su come questi standard potrebbero essere applicati, puoi fare riferimento a questi articoli: Sarah Drasner's "Mascheramento e ritaglio: quando utilizzarli" fornisce un eccellente primer sulle maschere. Ho anche scritto delle modalità di fusione CSS in questo articolo dove puoi rispolverare l'argomento.
Nel codice sorgente del mio esempio, noterai che ho allineato e impilato gli elementi all'interno del file
Quello che CSS Grid mi permette anche di fare è impostarli tutti e tre divs quindi sono tutti a tutta larghezza nel
main > div {
grid-area: 1 / 1;
}Questo fa impilare tutto uno sopra l'altro. Normalmente, lavoriamo sodo per evitare di coprire gli elementi con altri elementi in una griglia. Ma questo esempio si basa su di esso. Ho dato il .slit-cover ad una larghezza del 50% che rivela naturalmente l'immagine sottostante. Da lì, ho impostato a transform su di esso che lo sposta del 50% in direzione negativa, più la piccola quantità ho spostato l'ombra prima (25px) per assicurarsi che anche questo venga rivelato.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}E ci siamo! Una fessura dall'aspetto piuttosto naturale che imita qualcosa che fa capolino da una cartella, un portafoglio o qualsiasi altra cosa.
Ci sono più modi per farlo! Per uno, Flexbox può far allineare gli elementi in una riga e allinearsi al centro in questo modo. Ci sono molti modi per mettere le cose fianco a fianco. E forse hai un modo per usare il box-shadow proprietà, drop-shadow() filtro, o anche Filtri SVG per ottenere lo stesso tipo di effetto ombra che vende davvero l'illusione.
E puoi totalmente riff su questo per ottenere il tuo look and feel. Ad esempio, prova a scambiare la posizione dell'ombra e dell'immagine. Oppure gioca con le combinazioni di colori e cambia il blur() filtro valore. La forma della copertina e l'ombra possono anche essere modificate: scommetto che puoi creare un'ombra curva invece di una dritta e condividerla con noi nei commenti!
