Clip-Path
2020 | Projet personnel
Contexte et objectif
Comme vous pouvez le voir, lors de la création de mon portfolio, je me suis énormément amusé avec la propriété clip-path. J'ai exploré cette fonctionnalité en profondeur et j'ai réussi à réaliser plusieurs choses qui peuvent paraître complexes, mais qui sont en réalité assez simples une fois qu'on comprend comment elle fonctionne.
Connaissances Travaillées
- Maîtrise des formes basiques
- Autonomie
- Maîtrise de la composante CSS "transform"
- Maîtrise de la composante CSS "clip-path"
La Procédure
La forme simple
Créer une forme est simple avec un clip-path ; il suffit de coder chaque point de la forme vectorielle souhaitée.
Le masque
Un clip-path agit comme un masque. Donc, si l'on veut une forme plus complexe, il faut prendre en considération le fait de repasser sur nos lignes pour créer des zones de vide. C'est comme dessiner avec un Etch A Sketch.
Le mouvement
Pour animer cette forme, il est également nécessaire de considérer les espaces vides. Afin d'éviter que la forme ne revienne à sa position initiale à la fin de l'animation, il est important de prédéfinir où les points vectoriels doivent se positionner à la fin de la boucle.
Un résultat d'une complexité simple
Voici des exemples de ce que j'ai réalisé avec cet outil extrêmement puissant, mais peu exigeant pour l'ordinateur.