Introduction

Jusqu'à il y a quelques années, si vous vouliez des formes d'arrière-plan ou des sections d'un site Web autres que des rectangles, vous aviez probablement besoin d'un concepteur pour vous fournir une image PNG ou JPEG statique qui serait ajoutée selon les besoins, mais CSS a Du chemin parcouru depuis, mes amis.

Lorsque je travaillais sur une mise à jour de site Web qui divisait le contenu de la page en sections d'arrière-plan de différentes couleurs, alternant entre des couleurs blanc pur et gris doux, la maquette de conception que j'avais incluse une section dont le bord inférieur était incliné vers le haut et vers le haut. vers la droite au lieu de parcourir la page selon un angle parfait de 90 degrés, comme le fait un élément de bloc typique.

Maintenant, j'aurais pu demander au concepteur de créer une image d'arrière-plan pour le faire à ma place, mais je voulais plutôt voir si je pouvais le faire moi-même avec la puissance du CSS. Et voilà, je pourrais, avec le chemin du clip CSS.

Les formes et visuels intéressants dans le DOM ne sont plus uniquement le domaine des concepteurs, avec des outils comme le chemin de clip CSS, les développeurs ont le pouvoir de remodeler les éléments et je vais vous montrer comment.

Chemin de clip CSS

Si vous êtes moins familier avec la propriété CSS clip-path, comme moi, elle crée une région de découpage qui définit les parties d'un élément qui doivent être affichées. Les parties situées à l'intérieur de la région sont affichées, tandis que celles à l'extérieur sont masquées.

Une démo de la documentation MDN clip-path. Différentes options de tracé de clip offrent différentes vues de la montgolfière et du texte.

La propriété clip-path peut accepter une grande variété de valeurs :

• , qui accepte des valeurs telles que l'url pour un élément SVG avec un chemin de détourage défini.
• , qui accepte des valeurs telles que margin-box et border-box.
• , qui accepte des valeurs comme circle() et rect().
• valeurs globales, qui acceptent des valeurs telles que hériter et revenir.

Les valeurs et peuvent même être combinées dans un seul chemin de clip.

/* this CSS combines two different clip path properties */
clip-path: padding-box circle(50px at 0 100px);

Cet article n'entre pas dans les détails de toutes les propriétés que le chemin de clip peut accepter et de la manière dont elles peuvent être combinées pour créer des formes assez complexes. Si vous souhaitez plus d'informations et des exemples de clip=path en action, je vous recommande de commencer par la documentation de Mozilla.

L'une des propriétés acceptées par clip-path est polygon(), et cela a fini par être la solution dont j'avais besoin pour ma section d'arrière-plan inclinée.

Le polygone que je devais recréer avec CSS

Le fond de polygone gris que je devais créer avec CSS.

L'image ci-dessus est une capture d'écran de la section d'arrière-plan gris que je devais recréer avec la propriété polygon() de CSS clip-path. Et la première chose que je devais faire était de créer des éléments HTML auxquels appliquer le CSS.

polygon() clip-path vs rect() clip-path

Vous vous demandez peut-être pourquoi j'ai choisi d'utiliser la propriété polygon() au lieu de la propriété rect() avec clip-path. Bien que les deux soient similaires, polygon() peut créer des formes polygonales plus complexes et offre une plus grande polyvalence pour les conceptions avancées en acceptant des paires de coordonnées pour définir chaque sommet du polygone, tandis que rect() ne peut gérer que des formes rectangulaires.

Configurer le HTML et le CSS

Le site sur lequel je travaillais s'appuyait sur le générateur de site statique Hugo, un framework basé sur Go. Hugo utilise des modèles pour afficher le HTML du site, donc l'exemple de code ci-dessous devrait vous paraître relativement familier si vous connaissez le HTML.

Remarque sur les modèles :

Si vous avez déjà utilisé des composants JSX, Node.js avec Pug ou guidon, ou Jekyll, les modèles de Hugo sont similaires : des éléments HTML avec des variables et des fonctions Go parsemées de {{ }} pour afficher les informations correctes partout où les modèles sont injectés.

Voici le code de ce que j'avais surnommé la "section puzzle" de la page en raison de la pièce de puzzle au premier plan de cette section. Pour les besoins et la clarté de cet article, j'ai remplacé les variables Go injectées dans le modèle par le HTML généré.

single.html

  

    

    

        

          

              

                Lorem ipsum dolor
              
              

                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque.
              
              

                Duis aute irure dolor in reprehenderit
              
              

                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et.
              
          
          

            
        
      
    

Cette section de code est relativement compacte, mais elle mérite une discussion. En plus des éléments HTML, il existe de nombreuses classes CSS provenant de la bibliothèque Bootstrap, l'un des frameworks CSS open source originaux pour les conceptions Web réactives.

Parmi les classes personnalisées comme about-body, que j'ai utilisées pour ajouter un style personnalisé, il existe des classes comme conteneur, row, col-12 ou col-md-6, mb-5 et mb-3.

Toutes ces dernières classes sont des classes Bootstrap, qui servent à faire en sorte que les éléments de texte et d'image à l'écran partagent la largeur de la page lorsque la fenêtre d'affichage dépasse une certaine largeur (col-md-6), ou appliquent une marge inférieure d'un certain montant aux balises

(mb-3 ou mb-5).

Les classes Bootstrap ne sont pas pertinentes pour cet article, cependant, la classe sur laquelle se concentrer est la section puzzle qui enveloppe tout le texte et l'image des pièces de puzzle.

Cette classe de section de puzzle est l'endroit où nous allons ajouter la propriété clip-path pour afficher l'arrière-plan gris clair derrière le texte et l'image avec un design légèrement incliné vers le haut et vers la droite.

Ajoutez le chemin du clip CSS pour façonner la section du puzzle

Comme je ne savais pas vraiment comment donner une forme inégale à un

.about-body {
  // this white sets the white background color for the whole webpage
  background-color: white; 

  .puzzle-section {
    // clip-path code copied from the clip-path maker website
    clip-path: polygon(0 0, 100% 0%, 100% 75%, 0% 100%);
    background-color: light-grey;
    padding: 2rem 0 10rem 0;
  }
}