Lorsque vous mettez quelque chose - disons une feuille de papier ordinaire - dans un dossier de manille, une partie de cette chose peut sortir un peu du dossier. Le même genre de chose avec un portefeuille et des cartes de crédit. Les cartes sortent juste un peu pour que vous puissiez avoir un aperçu rapide des cartes que vous transportez.
J'appelle ce genre de chose une "fente". Une fente est l'endroit où nous créons l'illusion d'une ouverture à travers laquelle nous pouvons taquiner un élément visuel qui en sort. Et nous pouvons le faire en CSS !
La partie cruciale de la conception est l'ombre, qui donne l'indice visuel de l'existence d'une fente. Ensuite, il y a le couvercle de la fente qui permet à l'élément exposé de jeter un coup d'œil par le dessous.
Voici ce que nous allons faire ensemble :
Commençons par créer l'ombre
Vous pourriez être surpris que l'ombre dans l'exemple ne soit pas créée avec une ombre CSS réelle, comme box-shadow ou drop-shadow() filtre. Au lieu de cela, l'ombre est un élément distinct en soi, sombre et flou. Ceci est important pour rendre la conception plus adaptable, à la fois dans ses états par défaut et animés.
La couverture est l'autre élément du design. La couverture est ce que j'appelle l'élément qui recouvre l'ombre. Voici une figure illustrant comment l'ombre et la couverture se rejoignent.
L'ombre est constituée d'un petit rectangle vertical qui a un fond dégradé. Le dégradé est plus foncé au milieu. Ainsi, lorsque l'élément est flou, il crée une ombre plus sombre au milieu ; donc plus dimensionnel.
Maintenant, la moitié gauche de l'ombre recréée est recouverte d'un rectangle sur le dessus, coloré exactement de la même manière que l'arrière-plan de son conteneur.
La couverture et l'ombre sont ensuite légèrement déplacées vers la gauche pour qu'elles semblent superposées
Travail sur la couverture
Pour que la couverture se fonde avec l'arrière-plan du dessin, sa couleur d'arrière-plan est héritée de son élément contenant. Alternativement, vous pouvez également essayer de mélanger la couverture à son arrière-plan en utilisant des normes telles que Masques CSS et les modes de fusion, en fonction de vos choix de conception et de vos exigences.
Pour connaître les bases de l'application de ces normes, vous pouvez consulter ces articles : Sarah Drasner's « Masquage ou écrêtage : quand utiliser chacun » fournit une excellente base sur les masques. J'ai aussi écrit sur les modes de fusion CSS dans cet article où vous pourrez approfondir le sujet.
Dans le code source de mon exemple, vous remarquerez que j'ai aligné et empilé les éléments à l'intérieur du
Ce que CSS Grid me permet également de faire est de définir les trois divs pour qu'ils soient tous en pleine largeur dans
main > div {
grid-area: 1 / 1;
}Cela permet de tout empiler les uns sur les autres. Normalement, nous travaillons dur pour éviter de recouvrir des éléments avec d'autres éléments dans une grille. Mais cet exemple en dépend. j'ai donné le .slit-cover à une largeur de 50% qui révèle naturellement l'image en dessous. A partir de là, j'ai mis un transform dessus qui le déplace de 50% dans le sens négatif, plus la petite quantité que j'ai déplacée l'ombre plus tôt (25px) pour s'assurer que cela est également révélé.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}Et là, nous l'avons! Une fente assez naturelle qui imite quelque chose qui sort d'un dossier, d'un portefeuille ou autre.
Il y a plus de façons de le faire! D'une part, Flexbox peut faire en sorte que les éléments s'alignent dans une rangée et s'alignent au centre comme ceci. Il existe de nombreuses façons de mettre les choses côte à côte. Et peut-être avez-vous un moyen d'utiliser le box-shadow propriété, drop-shadow() filtrer, ou même Filtres SVG pour obtenir le même genre d'effet d'ombre qui vend vraiment l'illusion.
Et vous pouvez totalement riffer dessus pour obtenir votre propre apparence. Par exemple, essayez d'échanger la position de l'ombre et de l'image. Ou jouez avec les combinaisons de couleurs et changez le blur() une fonction filtre évaluer. La forme de la couverture et de l'ombre peut également être modifiée - je parie que vous pouvez créer une ombre incurvée au lieu d'une droite et la partager avec nous dans les commentaires !
