C’est toujours agréable d’avoir un séparateur de section fantaisie sur son site Web. Et c’est encore mieux si on peut les rendre réactifs et faciles à ajuster. C’est ce que vous allez apprendre dans cet article.
Nous allons explorer différents séparateurs de section réalisés uniquement à l’aide de CSS et d’un code optimisé facile à manipuler.
Voici un exemple de séparateurs de section en action :
Avant d’entrer dans la partie technique, j’ai créé un générateur en ligne de séparateurs de section. Tout ce que vous avez à faire est de sélectionner votre configuration et d’obtenir le code CSS en un rien de temps.
D’accord, je peux entendre dire : « Pourquoi un tutoriel ennuyeux ? Je vais simplement utiliser le générateur chaque fois que j’en aurai besoin ! »
Bien sûr, vous pouvez le faire – mais il est toujours bon de savoir ce qui se passe sous le capot afin de comprendre le code que vous utilisez et d’être en mesure de l’ajuster manuellement.
Ensuite, vous serez en mesure de créer votre propre séparateur personnalisé après avoir compris ceux que j’ai faits !
Alors plongeons et apprenons comment c’est fait.
Comment créer un séparateur incliné pour votre site Web
Dans la figure ci-dessus, nous avons deux éléments séparés par un espace incliné. Pour obtenir cet effet, nous allons couper une partie de chacun d’eux. Regardons une illustration étape par étape pour mieux comprendre.
Au départ, nous avons deux éléments placés l’un au-dessus de l’autre. Nous commençons par couper la partie inférieure de l’élément supérieur (étape (2)) en utilisant le clip-path comme ci-dessous :
clip-path : polygone(0 0,100% 0,100% 100%,0 calc(100% - 50px)) ;Nous avons un chemin de quatre points où nous rendons la partie inférieure gauche un peu plus haute pour créer l’effet de coupe. Vous pouvez remarquer l’utilisation de calc(100% - 50px) au lieu de 100%.
Nous faisons la même chose pour le deuxième élément dans l’étape (3) en utilisant :
clip-path : polygone(0 0,100% 50px,100% 100% 100%,0 100%) ;Cette fois, nous abaissons le coin supérieur droit de la même quantité de pixels(50px au lieu de 0). Si vous n’êtes pas familier avec le clip-path, voici une figure pour mieux voir les points.
Les points ne sont rien d’autre que des coordonnées x,y dans un espace 2D avec l’intervalle [0 100%]. Vous pouvez facilement identifier les quatre coins, et à partir de là, nous pouvons trouver tous les autres points.
Enfin, nous ajoutons un margin-top négatif au deuxième élément pour réduire l’espace et obtenir un écart égal à 10px. Le code final sera :
.top {
clip-path : polygone(0 0,100% 0,100% 100% 100%,0 calc(100% - 50px)) ;
}
.bottom {
clip-path : polygone(0 0,100% 50px,100% 100% 100%,0 100%) ;
margin-top : -40px ;
}C’est le code que vous obtiendrez à partir du générateur en ligne que j’ai créé. Nous pouvons l’améliorer en introduisant des variables CSS :
:root {
--size : 50px ; /* la taille de la coupe */
--gap : 10px ; /* l'écart */
}
.top {
clip-path : polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--size))) ;
}
.bottom {
clip-path : polygone(0 0,100% var(--size),100% 100%,0 100%) ;
margin-top : calc(var(--gap) - var(--size)) ;
}Comme je l’ai dit dans l’introduction, nous avons un code simple et facile à ajuster qui produit un séparateur de section réactif.
Comment créer un séparateur fléché pleine largeur pour votre site Web
Celui-ci est assez similaire au séparateur précédent. Nous allons simplement traiter un plus grand nombre de points de clip-path.
Je pense que vous avez probablement compris l’idée maintenant. Nous suivons les mêmes étapes et nous terminons avec le code suivant :
.top {
clip-path : polygon(0 0,100% 0,100% calc(100% - 50px),50% 100%,0 calc(100% - 50px)) ;
}
.bottom {
clip-path : polygone(0 0,50% 50px,100% 0,100% 100%,0 100%) ;
margin-top : -40px ;
}Et ci-dessous, une autre illustration pour comprendre les nouveaux points que nous utilisons pour ce séparateur de section.
À première vue, cela peut sembler difficile, mais c’est en fait assez simple.
Nous créons des formes en reliant différents points dans l’espace 2D de notre élément. L’astuce consiste à créer 2 « formes de puzzle » (je viens d’inventer ce terme) pour créer l’illusion d’un séparateur de section. Avec un peu de pratique, vous pouvez facilement créer votre séparateur en suivant la même logique.
Avant de passer à la suite, voici le code utilisant les variables CSS :
:root {
--size : 50px ; /* taille de la coupe */
--gap : 10px ; /* l'écart */
}
.top {
clip-path : polygon(0 0,100% 0,100% calc(100% - var(--size)),50% 100%,0 calc(100% - var(--size))) ;
}
.bottom {
clip-path : polygone(0 0,50% var(--size),100% 0,100% 100%,0 100%) ;
margin-top : calc(var(--gap) - var(--size)) ;
}Vous pouvez déjà voir un modèle dans le code de nos séparateurs puisque nous utilisons la même technique. Deux clip-path, une margin-top négative, et deux variables CSS. Aussi simple que cela !
Comment créer un séparateur en forme de flèche pour votre site Web ?
Ce séparateur est un peu plus délicat que les précédents car je vais ajouter une autre variable qui est l’angle de la flèche. La technique reste la même mais nous aurons plus de maths pour calculer les coordonnées des points.
Pour celui-ci, mon générateur en ligne sera très utile (surtout si vous n’êtes pas à l’aise avec les formules mathématiques) afin que vous puissiez obtenir les valeurs finales sans problème.
Pour les curieux, voici le code générique :
:root {
--size : 50px ; /* taille de la coupe */
--gap : 10px ; /* l'écart */
--angle : 90deg ; /* angle de la flèche */
}
.top {
clip-path : polygone(0 0,100% 0,100% calc(100% - var(--size)),calc(50% + tan(var(--angle)/2)*var(--size)) calc(100% - var(--size)),50% 100%,calc(50% - tan(var(--angle)/2)*var(--size)) calc(100% - var(--size)),0 calc(100% - var(--size)) ;)
}
.bottom {
chemin de clip : polygone(0 0,calc(50% - tan((180deg - var(--angle))/4)*var(--gap) - tan(var(--angle)/2)*var(--size)) 0,50% calc(var(--size) + (1/sin(var(--angle)/2) - 1)*var(--gap)),calc(50% + tan((180deg - var(--angle))/4)*var(--gap) + tan(var(--angle)/2)*var(--size)) 0,100% 0,100% 100%,0 100%) ;
margin-top : calc(var(--gap) - var(--size)) ;
}Je vous entends crier en voyant cela, mais ne vous inquiétez pas si vous ne le comprenez pas complètement. Je continue à créer différentes formes en utilisant le clip-path mais cette fois le calcul est un peu plus complexe.
Le code ci-dessus est un code CSS valide, mais au moment où j’écris ces lignes, il n’y a pas de support pour les fonctions trigonométriques et il ne fonctionnera dans aucun navigateur. Vous pouvez soit calculer les valeurs manuellement, soit utiliser le générateur en ligne pour obtenir les valeurs de clip-path.
Jusqu’à présent, nous avons réalisé 3 diviseurs différents en utilisant la même technique. Chaque fois, nous avons considéré une nouvelle forme en jouant avec les valeurs de clip-path. Vous pouvez créer n’importe quel séparateur en utilisant la même technique, et les combinaisons sont illimitées. La seule limite est votre imagination.
C’est un bon exercice pour se familiariser avec le clip-path. Je vous recommande d’utiliser un stylo et du papier pour dessiner la forme que vous avez en tête. Vous identifiez les différents points de votre forme. Puis vous les convertissez en valeurs de clip-path.
Vous pouvez trouver de nombreux outils en ligne qui peuvent vous aider. Mon outil préféré est le suivant : https://bennettfeely.com/clippy/
Comment créer un séparateur arrondi pour votre site Web
Pour ce séparateur, nous allons utiliser le masque au lieu du clip-path. La différence entre le clip-path et le masque est que le masque s’appuie sur des images pour couper/cacher des parties d’un élément. Lorsqu’on parle d’images, on parle aussi de dégradés.
Voici une illustration pour comprendre le type de dégradés dont nous avons besoin :
Pour le premier élément, nous avons besoin de deux dégradés : un linear-gradient() pour créer une forme rectangulaire en haut, laissant un espace en bas, et un radial-gradient() pour créer un cercle placé en bas. Les deux combinés nous donneront la forme finale du premier élément.
Le deuxième élément n’a besoin que d’un radial-gradient() pour créer un trou en haut afin de compléter le puzzle.
Notre code sera le suivant :
.top {
masque
linear-gradient(#000 0 0) top/100% calc(100% - 50px) no-repeat,
radial-gradient(farthest-side,#000 98%,#0000) bottom/100px 100px no-repeat ;
}
.bottom {
masque : radial-gradient(60px at 50% -10px,#0000 98%,#000) ;
margin-top : -40px ;
}Et avec les variables CSS, il sera :
:root {
--size : 50px ; /* la taille de la coupe */
--gap : 10px ; /* l'écart */
}
.top {
masque
linear-gradient(#000 0 0) top/100% calc(100% - var(--size)) no-repeat,
radial-gradient(farthest-side,#000 98%,#0000) bottom/calc(2*var(--size)) calc(2*var(--size)) no-repeat ;
}
.bottom {
mask : radial-gradient(calc(var(--gap) + var(--size)) at 50% calc(-1*var(--gap)),#0000 98%,#000) ;
margin-top : calc(var(--gap) - var(--size)) ;
}Même avec la méthode du masque, le modèle de code est toujours le même que celui qui utilise clip-path.
Conclusion
Désormais, en plus de disposer d’un générateur en ligne de séparateurs de section, vous connaissez le secret de leur création.
Vous avez peut-être remarqué dans le générateur que chaque séparateur est accompagné de deux instructions, mais je n’en ai expliqué qu’une pour chaque séparateur. Je l’ai fait exprès pour vous permettre d’essayer de comprendre quelles valeurs nous devons mettre à jour pour obtenir la direction opposée. Vous pouvez le faire – ce n’est pas difficile et vous apprendrez beaucoup en le faisant.
Je publierai d’autres générateurs à l’avenir, alors mettez ce lien dans vos favoris : https://css-generators.com/ et suivez-moi sur Twitter pour ne pas les manquer.
Merci de votre lecture !
Vous voulez me soutenir ? Vous pouvez m’offrir un café ou devenir un mécène.
