Comment faire un effet de «fente» de dossier avec CSS

simule l'effet du papier légèrement exposé à partir d'un dossier, ou l'effet visuel d'une carte de crédit s'étendant légèrement d'un portefeuille, qui est appelé effet "fissure" dans la conception. Avec CSS, nous pouvons intelligemment créer cette illusion visuelle, ce qui fait que l'élément semble être sorti d'une ouverture.

La clé de la conception est l'ombre, qui fournit des indices visuels qui impliquent une fissure. Ensuite, il y a des éléments couvrant les fissures, offrant un espace pour les éléments furtivement en dessous.

Ensemble, nous créerons un effet comme celui-ci:

Créer une ombre d'abord

Vous pouvez être surpris de constater que les ombres dans les exemples ne sont pas créées à l'aide d'ombres CSS réelles (telles que box-shadow ou drop-shadow() filtres). Au lieu de cela, l'ombre elle-même est un élément indépendant, plus foncé et de couleur floue. Ceci est crucial pour rendre la conception plus adaptable dans les états par défaut et d'animation.

Un autre élément est la superposition, qui chevauche l'ombre. L'image suivante montre comment les ombres et les superpositions sont combinées ensemble.

L'ombre se compose d'un petit rectangle droit avec un fond dégradé. Le gradient est plus sombre au milieu. Ainsi, lorsque l'élément est flou, il crée une ombre plus sombre au milieu; donc, il a un sens plus tridimensionnel.

La moitié gauche de l'ombre reproduite est maintenant recouverte d'un rectangle en haut, qui a exactement la même couleur que la couleur d'arrière-plan de son récipient.

La superposition et l'ombre se déplacent puis se déplacent un peu vers la gauche pour lui donner l'impression qu'il est superposé.

Traitez la couverture

pour mélanger la superposition avec l'arrière-plan conçu, sa couleur d'arrière-plan hérite de ses éléments contenus. Alternativement, en fonction de vos choix de conception et de vos exigences, vous pouvez également essayer d'utiliser des normes comme les masques CSS et des modes de mélange pour mélanger la superposition avec son arrière-plan.

Quelques bases sur la façon d'appliquer ces normes, vous pouvez vous référer à l'article suivant: "Masking vs Clipping: Quand utiliser chaque" par Sarah Drasner fournit une excellente introduction aux masques. J'ai également écrit sur le mode hybride CSS dans cet article où vous pouvez consulter des sujets connexes.

Dans le code source de mon exemple, vous remarquerez que j'aligne et empile les éléments dans <main></main> des éléments à l'aide de la grille CSS (la norme de mise en page que j'utilise souvent dans ma démo). Si vous recréez une conception similaire, utilisez la méthode de mise en page qui convient le mieux à votre application pour aligner différentes parties de la conception. Dans ce cas, j'ai configuré une seule grille de colonne sur l'élément <main></main>, ce qui me permet de centrer la superposition, l'ombre et l'image.

La grille CSS me permet également de définir les trois divs afin qu'ils soient tous pleine largeur dans le conteneur <main></main>:

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

Cela rend tout empilé. Souvent, nous essaierons d'éviter de couvrir des éléments avec d'autres éléments de la grille. Mais cet exemple en dépend. J'ai réglé la largeur de .slit-cover à 50%, ce qui montrera naturellement l'image ci-dessous. De là, j'ai réglé une transformation pour le déplacer de 50% dans la direction négative, plus J'ai déplacé une petite quantité d'ombres (25px) avant de m'assurer qu'elle était également affichée.

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

c'est tout! Une fissure très naturelle qui simule quelque chose qui jette un coup d'œil dans un dossier, un portefeuille ou quoi que ce soit d'autre.

Il y a plus de façons de le faire! Par exemple, un Flexbox peut faire aligner les éléments et le centre comme celui-ci. Il existe de nombreuses façons de faire apparaître les éléments côte à côte. Vous pouvez peut-être utiliser le filtre d'attribut

, box-shadow, ou même le filtre SVG pour obtenir le même effet d'ombre, ce qui améliore vraiment l'illusion. drop-shadow()

Vous pouvez l'ajuster comme vous aimez obtenir votre propre apparence. Par exemple, essayez d'échanger des ombres et des emplacements d'image. Ou jouez avec la combinaison de couleurs et modifiez la valeur du filtre

. La forme de la superposition et des ombres peut également être ajustée - je crois que vous pouvez créer une ombre incurvée au lieu d'une ombre droite et la partager avec nous dans les commentaires! blur()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!