D'accord, donc le la dernière fois que nous sommes arrivés, nous utilisions CSS Grid et les combinions avec CSS clip-path ainsi que mask techniques pour créer des grilles aux formes fantaisistes.
Voici juste une des grilles fantastiques que nous avons faites ensemble :
Prêt pour le second tour ? Nous travaillons toujours avec CSS Grid, clip-pathet mask, mais à la fin de cet article, nous nous retrouverons avec différentes façons d'organiser les images sur la grille, y compris certains effets de survol rad qui offrent une expérience authentique et interactive pour visualiser les images.
Et devine quoi? Nous utilisons le même balisage que nous avons utilisé la dernière fois. Voici encore cela :
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Comme dans l'article précédent, nous n'avons besoin que d'un conteneur contenant des images. Rien de plus!
Grille d'images imbriquées
La dernière fois, nos grilles étaient, eh bien, des grilles d'image typiques. Outre les formes soignées avec lesquelles nous les avons masqués, il s'agissait de grilles symétriques assez standard en ce qui concerne la façon dont nous avons positionné les images à l'intérieur.
Essayons d'imbriquer une image au centre de la grille :
Nous commençons par définir une grille 2✕2 pour quatre images :
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
}Rien de complexe encore. L'étape suivante consiste à couper le coin de nos images pour créer l'espace pour l'image imbriquée. J'ai déjà un article détaillé sur comment couper les coins en utilisant clip-path ainsi que mask. Vous pouvez également utiliser mon générateur en ligne pour obtenir le CSS pour masquer les coins.
Ce dont nous avons besoin ici, c'est de découper les coins à un angle égal à 90deg. Nous pouvons utiliser le même technique du gradient conique de cet article pour faire ça:
.gallery > img {
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }Nous pourrions utiliser le clip-path méthode pour couper les coins de ce même article, mais le masquage avec des dégradés est plus approprié ici car nous avons la même configuration pour toutes les images — il suffit d'une rotation (définie avec la variable --_a) obtiennent l'effet, donc nous masquons de l'intérieur au lieu des bords extérieurs.
Nous pouvons maintenant placer l'image imbriquée dans l'espace masqué. Tout d'abord, assurons-nous d'avoir un cinquième élément d'image dans le HTML :
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>Nous allons nous appuyer sur le bon vieux positionnement absolu pour le placer là-dedans :
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Les inset propriété nous permet de placer l'image au centre en utilisant une seule déclaration. Nous connaissons la taille de l'image (définie avec la variable --s), et nous savons que la taille du conteneur est égale à 100 %. Nous faisons quelques calculs, et la distance de chaque bord doit être égale à (100% - var(--s))/2.
Vous vous demandez peut-être pourquoi nous utilisons clip-path du tout ici. Nous l'utilisons avec l'image imbriquée pour avoir un écart cohérent. Si nous devions le supprimer, vous remarqueriez que nous n'avons pas le même écart entre toutes les images. De cette façon, nous coupons un peu de la cinquième image pour obtenir le bon espacement autour d'elle.
Encore le code complet :
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
position: relative;
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a: 0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Maintenant, beaucoup d'entre vous se demandent peut-être aussi : pourquoi toutes ces choses complexes alors que nous pouvons placer la dernière image en haut et y ajouter une bordure ? Cela cacherait les images sous l'image imbriquée sans masque, n'est-ce pas ?
C'est vrai, et nous obtiendrons ce qui suit :
Non mask, non clip-path. Oui, le code est facile à comprendre, mais il y a un petit inconvénient : la couleur de la bordure doit être la même que celle de l'arrière-plan principal pour que l'illusion soit parfaite. Ce petit bémol me suffit à complexifier le code en échange d'une réelle transparence indépendante du fond. Je ne dis pas qu'une approche frontalière est mauvaise ou mauvaise. Je le recommanderais dans la plupart des cas où l'arrière-plan est connu. Mais nous sommes ici pour explorer de nouvelles choses et, surtout, construire des composants qui ne dépendent pas de leur environnement.
Essayons une autre forme cette fois :
Cette fois, nous avons fait de l'image imbriquée un cercle au lieu d'un carré. C'est une tâche facile avec border-radius Mais nous devons utiliser un découpe circulaire pour les autres images. Cette fois, cependant, nous nous appuierons sur un radial-gradient() au lieu d'une conic-gradient() pour obtenir ce joli look arrondi.
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0% - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0% - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0% - var(--g)/2) calc(0% - var(--g)/2); }Toutes les images utilisent la même configuration que l'exemple précédent, mais nous mettons à jour le point central à chaque fois.
La figure ci-dessus illustre le point central de chaque cercle. Pourtant, dans le code réel, vous remarquerez que je tiens également compte de l'écart pour m'assurer que tous les points sont à la même position (le centre de la grille) pour obtenir un cercle continu si nous les combinons.
Maintenant que nous avons notre mise en page, parlons de l'effet de survol. Au cas où vous ne l'auriez pas remarqué, un effet de survol cool augmente la taille de l'image imbriquée et ajuste tout le reste en conséquence. Augmenter la taille est une tâche relativement facile, mais mettre à jour le dégradé est plus compliqué car, par défaut, les dégradés ne peuvent pas être animés. Pour surmonter cela, j'utiliserai un font-size hack pour pouvoir animer le dégradé radial.
Si vous vérifiez le code du dégradé, vous pouvez voir que j'ajoute 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));C'est connu que em les unités sont relatives à l'élément parent font-size, donc en changeant le font-size des .gallery modifiera également le calcul em valeur - c'est l'astuce que nous utilisons. Nous animons le font-size d'une valeur de 0 à une valeur donnée et, par conséquent, le dégradé est animé, agrandissant la partie découpée, suivant la taille de l'image imbriquée qui s'agrandit.
Voici le code qui met en évidence les parties impliquées dans l'effet de survol :
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gaps between images */
font-size: 0; /* initially we have 1em = 0 */
transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
font-size: calc(var(--s) / 5);
}Les font-size Cette astuce est utile si nous voulons animer des dégradés ou d'autres propriétés qui ne peuvent pas être animées. Les propriétés personnalisées définies avec @property peuvent résoudre un tel problème, mais le soutenir manque encore au moment de la rédaction.
J'ai découvert le font-size truc de @SelenIT2 tout en essayant de résoudre un défi sur Twitter.
Une autre forme ? Allons-y!
Cette fois, nous avons découpé l'image imbriquée en forme de losange. Je vous laisse disséquer le code comme un exercice pour comprendre comment nous en sommes arrivés là. Vous remarquerez que la structure est la même que dans nos exemples. Les seules différences sont la façon dont nous utilisons le dégradé pour créer la forme. Creusez et apprenez!
Grille d'image circulaire
Nous pouvons combiner ce que nous avons appris ici et dans les articles précédents pour créer une grille d'images encore plus excitante. Cette fois, rendons toutes les images de notre grille circulaires et, au survol, agrandissons une image pour révéler l'ensemble car elle couvre le reste des photos.
La structure HTML et CSS de la grille n'a rien de nouveau par rapport à avant, alors sautons cette partie et concentrons-nous plutôt sur la forme circulaire et l'effet de survol que nous voulons.
Nous allons utiliser clip-path et le circle() fonction à - vous l'avez deviné! — découpez un cercle dans les images.
Ce chiffre illustre la clip-path utilisé pour la première image. Le côté gauche montre l'état initial de l'image, tandis que le côté droit montre l'état survolé. Vous pouvez utiliser cet outil en ligne pour jouer et visualiser le clip-path valeurs.
Pour les autres images, nous pouvons mettre à jour le centre du cercle (70% 70%) pour obtenir le code suivant :
.gallery > img:hover {
--_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
clip-path: circle(var(--_c, 55% at 30% 30%));
}Notez comment nous définissons le clip-path valeurs comme repli à l'intérieur var(). De cette façon, nous pouvons mettre à jour plus facilement la valeur au survol en définissant la valeur du --_c variable. Lors de l'utilisation circle(), la position par défaut du point central est 50% 50%, nous pouvons donc l'omettre pour un code plus concis. C'est pourquoi vous voyez que nous ne faisons que fixer 50% au lieu de 50% at 50% 50%.
Ensuite, nous augmentons la taille de notre image au survol à la taille globale de la grille afin de pouvoir couvrir les autres images. Nous assurons également la z-index a une valeur plus élevée sur l'image survolée, c'est donc la première de notre contexte d'empilement.
.gallery {
--s: 200px; /* controls the image size */
--g: 8px; /* controls the gap between images */
display: grid;
grid: auto-flow var(--s) / repeat(2, var(--s));
gap: var(--g);
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
cursor: pointer;
z-index: 0;
transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
--_c: 50%; /* change the center point on hover */
width: calc(200% + var(--g));
z-index: 1;
transition: .4s, z-index 0s;
}
.gallery > img:nth-child(1){
clip-path: circle(var(--_c, 55% at 70% 70%));
place-self: start;
}
.gallery > img:nth-child(2){
clip-path: circle(var(--_c, 55% at 30% 70%));
place-self: start end;
}
.gallery > img:nth-child(3){
clip-path: circle(var(--_c, 55% at 70% 30%));
place-self: end start;
}
.gallery > img:nth-child(4){
clip-path: circle(var(--_c, 55% at 30% 30%));
place-self: end;
}Que se passe-t-il avec le
place-selfpropriété? Pourquoi en avons-nous besoin et pourquoi chaque image a-t-elle une valeur spécifique ?
Vous souvenez-vous du problème que nous avions dans l'article précédent lorsque créer la grille des pièces du puzzle? Nous avons augmenté la taille des images pour créer un débordement, mais le débordement de certaines images était incorrect. Nous les avons corrigés à l'aide du place-self propriété.
Même problème ici. Nous augmentons la taille des images pour que chacune déborde de ses cellules de grille. Mais si nous ne faisons rien, ils déborderont tous sur les côtés droit et inférieur de la grille. Ce dont nous avons besoin c'est :
- la première image à déborder du bord inférieur droit (le comportement par défaut),
- la deuxième image déborde du bord inférieur gauche,
- la troisième image déborde du bord supérieur droit, et
- la quatrième image pour déborder du bord supérieur gauche.
Pour obtenir cela, nous devons placer chaque image correctement en utilisant le place-self propriété.
Dans le cas où vous ne connaissez pas place-self, c'est le raccourci pour justify-self ainsi que align-self pour placer l'élément horizontalement et verticalement. Lorsqu'il prend une valeur, les deux alignements utilisent la même valeur.
Extension des panneaux d'image
Dans un article précédent, j'ai créé un effet de zoom sympa qui s'applique à une grille d'images où l'on peut tout contrôler : nombre de lignes, nombre de colonnes, tailles, facteur d'échelle, etc.
Un cas particulier était les panneaux expansibles classiques, où nous n'avons qu'une seule rangée et un conteneur pleine largeur.
Nous allons prendre cet exemple et le combiner avec des formes !
Avant de continuer, je vous recommande fortement de lire mon autre article pour comprendre comment fonctionnent les astuces que nous allons couvrir. Vérifiez cela, et nous continuerons ici à nous concentrer sur la création des formes de panneau.
Tout d'abord, commençons par simplifier le code et supprimer certaines variables
Nous n'avons besoin que d'une seule ligne et le nombre de colonnes doit être ajusté en fonction du nombre d'images. Cela signifie que nous n'avons plus besoin de variables pour le nombre de lignes (--n) et des colonnes (--m ) mais nous devons utiliser grid-auto-flow: column, permettant à la grille de générer automatiquement des colonnes lorsque nous ajoutons de nouvelles images. Nous considérerons une hauteur fixe pour notre conteneur ; par défaut, il sera en pleine largeur.
Découpons les images dans une forme inclinée :
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Encore une fois, chaque image est contenue dans sa cellule de grille, il y a donc plus d'espace entre les images que nous ne le souhaiterions :
Nous devons augmenter la largeur des images pour créer un chevauchement. Nous remplaçons min-width: 100% comprenant min-width: calc(100% + var(--s)), Où --s est une nouvelle variable qui contrôle la forme.
Maintenant, nous devons corriger les première et dernière images, afin qu'elles saignent en quelque sorte de la page sans lacunes. En d'autres termes, nous pouvons supprimer l'inclinaison du côté gauche de la première image et l'inclinaison du côté droit de la dernière image. Nous avons besoin d'un nouveau clip-path spécifiquement pour ces deux images.
Il faut aussi remédier au débordement. Par défaut, toutes les images déborderont des deux côtés, mais pour la première, nous avons besoin d'un débordement sur le côté droit alors que nous avons besoin d'un débordement à gauche pour la dernière image.
.gallery > img:first-child {
min-width: calc(100% + var(--s)/2);
place-self: start;
clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
min-width: calc(100% + var(--s)/2);
place-self: end;
clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}Le résultat final est un joli panneau en expansion d'images inclinées !
Nous pouvons ajouter autant d'images que vous le souhaitez, et la grille s'ajustera automatiquement. De plus, nous n'avons besoin de contrôler qu'une seule valeur pour contrôler la forme !
On aurait pu faire ce même layout avec flexbox puisqu'on a affaire à une seule rangée d'éléments. Voici ma mise en oeuvre.
Bien sûr, les images inclinées sont cool, mais qu'en est-il d'un motif en zigzag ? J'ai déjà taquiné celui-ci à la fin du dernier article.
Tout ce que je fais ici, c'est remplacer clip-path comprenant mask… et devine quoi? J'ai déjà un article détaillé sur créer cette forme en zigzag — sans parler d'un site en ligne générateur pour obtenir le code. Vous voyez comment tout s'assemble ?
La partie la plus délicate ici est de s'assurer que les zig-zags sont parfaitement alignés, et pour cela, nous devons ajouter un décalage pour chaque :nth-child(odd) élément d'image.
.gallery > img {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
--_p: var(--s);
}
.gallery > img:first-child {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
mask:
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}Notez l'utilisation du --_p variable, qui reviendra à 0% mais sera égal à --_s pour les images étranges.
Voici une démo qui illustre le problème. Survolez pour voir comment le décalage - défini par --_p — répare l'alignement.
Notez également comment nous utilisons un masque différent pour la première et la dernière image comme nous l'avons fait dans l'exemple précédent. Nous avons seulement besoin d'un zig-zag sur le côté droit de la première image et sur le côté gauche de la dernière image.
Et pourquoi pas des côtés arrondis ? Faisons-le!
Je sais que le code peut sembler effrayant et difficile à comprendre, mais tout ce qui se passe est une combinaison de différentes astuces que nous avons couvertes dans cet article et dans d'autres articles que j'ai déjà partagés. Dans ce cas, j'utilise la même structure de code que le zig-zag et les formes inclinées. Comparez-le avec ces exemples, et vous ne trouverez aucune différence ! Ce sont les mêmes trucs dans mon précédent article sur l'effet de zoom. Ensuite, j'utilise mon autre écriture ainsi que mon générateur en ligne pour obtenir le code du masque qui crée ces formes arrondies.
Si vous vous souvenez de ce que nous avons fait pour le zig-zag, nous avions utilisé le même masque pour toutes les images, mais nous avons ensuite dû ajouter un décalage aux images impaires pour créer un chevauchement parfait. Dans ce cas, nous avons besoin d'un masque différent pour les images impaires.
Le premier masque :
mask:
linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;
Le deuxième:
mask:
radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000)
calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))
Le seul effort que j'ai fait ici est de mettre à jour le deuxième masque pour inclure la variable d'écart (--g) pour créer cet espace entre les images.
La touche finale consiste à fixer la première et la dernière image. Comme tous les exemples précédents, la première image a besoin d'un bord gauche droit tandis que la dernière a besoin d'un bord droit droit.
Pour la première image, on connait toujours le masque qu'elle doit avoir, qui est le suivant :
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
Pour la dernière image, cela dépend du nombre d'éléments, il importe donc que cet élément soit :nth-child(odd) or :nth-child(even).
.gallery > img:last-child:nth-child(even) {
mask:
linear-gradient(to right,#0000 var(--s),#000 0),
radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}
.gallery > img:last-child:nth-child(odd) {
mask:
radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}C'est tout! Trois mises en page différentes mais les mêmes astuces CSS à chaque fois :
- la structure du code pour créer l'effet de zoom
- un masque ou un chemin de détourage pour créer les formes
- une configuration séparée pour les éléments impairs dans certains cas pour s'assurer que nous avons un chevauchement parfait
- une configuration spécifique pour la première et la dernière image pour conserver la forme d'un seul côté.
Et voici une grande démo avec tous ensemble. Tout ce dont vous avez besoin est d'ajouter une classe pour activer la mise en page que vous souhaitez voir.
Et voici celui avec l'implémentation Flexbox
Emballage en place
Ouf, nous avons terminé ! Je sais qu'il existe de nombreuses astuces et exemples CSS entre cet article et le dernier, sans parler de toutes les autres astuces que j'ai référencées ici à partir d'autres articles que j'ai écrits. Il m'a fallu du temps pour tout mettre en place, et il n'est pas nécessaire de tout comprendre d'un coup. Une lecture vous donnera un bon aperçu de toutes les mises en page, mais vous devrez peut-être lire l'article plus d'une fois et vous concentrer sur chaque exemple pour saisir toutes les astuces.
Avez-vous remarqué que nous n'avons pas du tout touché au code HTML, à part peut-être le nombre d'images dans le balisage ? Toutes les mises en page que nous avons créées partagent le même code HTML, qui n'est rien d'autre qu'une liste d'images.
Avant de terminer, je vous laisse avec un dernier exemple. C'est un "versus" entre deux personnages d'anime avec un effet de survol sympa.
Qu'en pensez-vous? Pouvez-vous créer quelque chose en vous basant sur ce que vous avez appris ? Cela n'a pas besoin d'être complexe - imaginez quelque chose de cool ou de drôle comme je l'ai fait avec ce match d'anime. Cela peut être un bon exercice pour vous, et nous pouvons terminer avec une excellente collection dans la section des commentaires.
