Maison > Article > interface Web > Appuyez-vous sur CSS Clip Path pour créer des formes sympas dans le DOM sans images
Appuyez-vous sur CSS Clip Path pour créer des formes sympas dans le DOM sans images
- WBOYoriginal
- 2024-07-16 15:02:581159parcourir
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 avait inclus une section dont le bord inférieur était incliné vers le haut et vers le haut. vers la droite au lieu de traverser 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 faire cela à 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 de 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 quelles parties d'un élément doivent être affichées. Les parties qui se trouvent à 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 telles que circle() et rect(). - valeurs globales, qui acceptent des valeurs telles que hériter et revenir.
La
/* 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 formes
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.
chemin de clip polygon() vs chemin de clip rect()
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.
Une note 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 Go et des fonctions 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
<div class="about-body">
<!-- more HTML elements up here -->
<section class="puzzle-section section">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<h4 class="mb-3">
Lorem ipsum dolor
</h4>
<p class="mb-5">
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.
</p>
<h4 class="mb-3">
Duis aute irure dolor in reprehenderit
</h4>
<p class="mb-5">
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.
</p>
</div>
<div
class="col-sm-8 offset-sm-2 col-md-6 offset-md-0 col-lg-6 offset-lg-0"
>
<img
class="img-fluid"
src="/images/about/puzzle-pieces.png"
alt="Puzzle pieces"
/>
</div>
</div>
</div>
</section>
<!-- more HTML elements below -->
</div>
This section of code is relatively compact, but it deserves discussion. In addition to the HTML elements, there are quite a few CSS classes which come from the Bootstrap library, one of the original open source CSS frameworks for responsive web designs.
Among the custom classes like about-body, which I used for adding custom styling, there are classes like container, row, col-12 or col-md-6, mb-5, and mb-3.
All of the latter classes are Bootstrap classes, which serve to make the text and image elements onscreen share the width of the page when the viewport is over a certain width (col-md-6), or apply a margin-bottom of a certain amount to the
tags (mb-3 or mb-5).
The Bootstrap classes are beside the point for this post though, the class to focus on is the puzzle-section which wraps all the text and puzzle piece image.
This puzzle-section class is where we're going to add the clip-path property to display the light grey background behind the text and image with the slightly tilted, up-and-to-the-right design.
Add the CSS clip-path to shape puzzle-section
As I wasn't quite sure how to style a normal, rectangular
This CSS clip-path maker website is fantastic because it has a whole slew of preset shapes, adjustable image sizes and backgrounds, and the currently displayed image's vertices can be dragged into any arrangement you want. The line at the bottom of the screen shows the exact clip-path CSS values that you can copy/paste into your own project's CSS.
I chose the parallelogram preset shape as my starting point, and then dragged the corners to match the angle of the background section I was trying to recreate from scratch. Once I was satisfied it looked accurate, I copied the CSS line at the bottom of the page to my clipboard.
In my project's SCSS file, I added the copied clip-path CSS in addition to the light grey background-color property and some padding to give the text and puzzle piece images some breathing room on the page.
NOTE: Even though this file shown in the example code is SCSS instead of pure CSS, for this post it shouldn't make a difference here. It should be a direct 1:1 comparison.
about.scss
.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;
}
}
That little bit of CSS for clip-path was all that was needed to take my perfectly rectangular DOM element and turn it into an imperfect polygon instead. Not too shabby!
Conclusion
CSS is pushing the boundaries of what web developers can do without resorting to images, videos, and custom designed elements all the time. And the satisfaction of figuring out how to do a cool little bit of design on all on your own feels pretty empowering.
A recent example of this was using the CSS clip-path property to create a background box for some text and images that had an uneven bottom edge. With the help of an interactive website dedicated decoding to clip-paths of all shapes and sizes, I was able to make quick work of this slightly skewed polygon.
And let me take a moment to shout out how much I appreciate the folks putting out those little sites or code snippets that solve a very specific problem for another developer - you folks continue to make the Internet a better place.
Check back in a few weeks — I’ll be writing more about JavaScript, React, IoT, or something else related to web development.
If you’d like to make sure you never miss an article I write, sign up for my newsletter here: https://paigeniedringhaus.substack.com
Thanks for reading. I hope learning to reshape how elements look in the DOM with just the power of CSS helps you as much as it's helped me.
Further References & Resources
- MDN docs, CSS clip-path
- CSS clip-path generator website
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!