L'histoire derrière Tryshape, une vitrine pour la propriété CSS Clip-path

J'adore toutes sortes de formes, surtout des formes aux couleurs vives! Les formes sur le site Web sont aussi importantes que les couleurs d'arrière-plan, les images, les bannières, les séparateurs, les œuvres et plus encore: ils nous aident à comprendre le contexte et à nous guider à travers des avantages.

Il y a quelques mois, j'ai développé une application d'apprentissage mathématique pour ma fille de 7 ans. En plus de l'addition et de la soustraction de base, je veux également présenter le problème avec des formes. À cette époque, je me suis familiarisé avec la propriété CSS clip-path , un moyen fiable de créer des formes sur les pages Web. Ensuite, j'ai fini par construire une autre application appelée Tryshape en utilisant la puissance de clip-path .

Je vous guiderai à travers l'histoire derrière Tryshape et comment cela aide à créer, gérer, partager et exporter des formes. Dans le processus, nous plongerons dans CSS clip-path et comment cela m'a aidé à construire mon application rapidement.

Voici quelques liens importants:

• Site Web Tryshape
• Bibliothèque de code github
• Démo vidéo
• Package NPM de l'encapsulation de clip-path pour réagir

Attributs et formes CSS clip-path

Imaginez que vous avez un morceau de papier régulier et un crayon, et vous voulez dessiner une forme (comme un carré) dessus. que ferez-vous? Vous commencerez très probablement à un moment donné , puis tracerez une ligne vers un autre point et répétez trois fois avant de pouvoir revenir au point initial. Vous devez également vous assurer d'avoir des côtés parallèles et de la même longueur opposés.

Par conséquent, les éléments de base de la forme comprennent les points, les lignes, les directions, les courbes, les angles et les longueurs, etc. CSS clip-path aide à spécifier bon nombre de ces propriétés pour recadrer la zone des éléments HTML pour afficher une zone spécifique. Les portions de la zone recadrée seront affichées et le reste sera caché. Il offre aux développeurs de nombreuses opportunités pour créer différentes formes à l'aide clip-path .

En savoir plus sur la culture et comment il diffère du masquage.

Valeur clip-path pour la création de forme

clip-path accepte les valeurs suivantes pour créer une forme:

• circle()
• ellipse()
• inset()
• polygon()
• Clip Source à l'aide d'une fonction url()
• path()

Nous devons comprendre un peu le système de coordonnées de base pour utiliser ces valeurs. Lors de l'application de l'attribut clip-path sur un élément pour créer une forme, nous devons considérer l'axe X, l'axe Y et les coordonnées initiales (0,0) du coin supérieur gauche de l'élément.

Il s'agit d'un élément div avec l'axe x, l'axe y et les coordonnées initiales (0,0).

Utilisons maintenant circle() pour créer une forme de cercle. Nous pouvons utiliser cette valeur pour spécifier la position et le rayon du cercle. Par exemple, pour créer une forme circulaire avec un rayon de 70px à des positions de coordonnées (70, 70), nous pouvons spécifier clip-path comme:

 Clip Path: Circle (70px à 70px 70px)

Par conséquent, le centre du cercle est situé à des coordonnées (70, 70) et le rayon est de 70px. Maintenant, seule cette zone circulaire est recadrée et affichée sur l'élément. Le reste de l'élément est caché pour créer l'impression d'une forme circulaire.

Ensuite, que se passe-t-il si nous voulons spécifier la position comme (0,0)? Dans ce cas, le centre du cercle est situé en position (0,0) avec un rayon de 70px. Cela ne fait qu'une partie du cercle visible dans l'élément.

Allons-y et utilisons les deux autres valeurs de base inset() et polygon() . Nous utilisons inset pour définir des formes rectangulaires. Nous pouvons spécifier les lacunes que quatre bords peuvent avoir à recadrer une zone à partir de l'élément. Par exemple:

 Clip Path: encadré (30px)

clip-path au-dessus des coupe la zone en excluant la valeur de 30px du bord de l'élément. Nous pouvons le voir dans l'image ci-dessous. Nous pouvons également spécifier une valeur inset différente pour chaque bord.

Vient ensuite polygon() . Nous pouvons utiliser un ensemble de sommets pour créer une forme de polygone. Veuillez consulter cet exemple:

 Clip Path: Polygone (10% 10%, 90% 10%, 90% 90%, 10% 80%)

Ici, nous spécifions un ensemble de sommets pour créer une zone de recadrage. La figure suivante montre l'emplacement de chaque sommet pour créer une forme de polygone. Nous pouvons spécifier autant de sommets que nécessaire.

Ensuite, jetons un coup d'œil aux valeurs ellipse() et url() . ellipse() aide à créer une forme en spécifiant deux valeurs de rayon et une position. Dans la figure ci-dessous, nous voyons une ellipse à une position avec un rayon (50%, 50%), avec une largeur de forme de 70px et une hauteur de 100 pix.

url() est une fonction CSS qui spécifie la valeur ID de clip-path pour rendre une forme SVG. Veuillez consulter l'image ci-dessous. Nous définissons une forme SVG en utilisant des éléments clipPath et path . Vous pouvez rendre cette forme en utilisant la valeur ID de l'élément clipPath comme argument à url() .

De plus, nous pouvons utiliser path directement dans path() pour dessiner la forme.

Très bien. J'espère que vous avez déjà compris les différentes valeurs d'attribut clip-path . Avec cette compréhension, regardons certaines implémentations et essayons-la. Voici un exemple, utilisez-le pour essayer d'ajouter, modifier des valeurs pour créer de nouvelles formes.

Introduction à Tryshape

Il est maintenant temps de parler de Tryshape et de sa trame de fond. TryShape est une application open source qui aide à créer, exporter, partager et utiliser toute forme de votre choix. Vous pouvez créer des bannières, des cercles, des œuvres d'art, des polygones et les exporter sous forme de fichiers SVG, PNG et JPEG. Vous pouvez également créer un extrait de code CSS pour copier et utiliser dans votre application.

Tryshape est construit en utilisant les frameworks et bibliothèques suivants (et bien sûr clip-path ):

• CLSS clip-path : Nous avons discuté de la fonctionnalité de cette puissante propriété CSS.
• Next.js: le cadre basé sur React le plus cool. Il m'aide à créer des pages, des composants, des interactions et des API pour me connecter à la base de données backend.
• HarperDB: une base de données flexible pour stocker les données et les interroger à l'aide des interactions SQL et NOSQL. Tryshape crée ses schémas et tables dans le nuage Harperdb. L'API suivant.js interagit avec les schémas et les tables pour effectuer des opérations CRUD requises par l'interface utilisateur.
• Firebase: service d'authentification de Google. TryShape l'utilise pour permettre la connexion sociale en utilisant Google, Github, Twitter et d'autres comptes.
• React-Icons: un magasin pour toutes les icônes pour les applications React
• Date-FNS: une bibliothèque légère moderne pour la mise en forme de date
• axios: simplifiez les appels d'API dans les composants de réaction
• Components stylisés: une façon structurée de créer des règles CSS à partir des composants React
• React-Clip-Path: un module fait maison pour gérer les propriétés des clip-path dans les applications React
• react-draggable: rend les éléments HTML dragables dans une application React. TryShape l'utilise pour ajuster la position des sommets de forme.
• Downloadjs: Trigger JavaScript Download
• HTML-IMAGE: Convertir les éléments HTML en images (y compris SVG, JPEG et PNG)
• Vercel: Mieux pour héberger les applications Suivant.js

Créez des formes dans Tryshape à l'aide de CSS clip-path

Permettez-moi de mettre en surbrillance le code source qui aide à créer des formes à l'aide de la propriété CSS clip-path . L'extrait de code suivant définit la structure de l'interface utilisateur d'un élément de conteneur (boîte) qui est un carré de 300px. L'élément de boîte a deux éléments enfants, l'ombre et les composants.

<box height="300px" onclick="{(e)"> props.handlechange (e)} width = "300px">
  {
    Prophes.shapeInformation.showshadow &&
    <shadow backgroundcolor="{props.shapeInformation.backgroundColor}"></shadow>
  }
  <component backgroundcolor="{props.shapeInformation.backgroundColor}" formula="{props.shapeInformation.formula}"></component>
</box>

Le composant de l'ombre définit la zone cachée par des clips clip-path . Nous le créons pour montrer un fond léger afin que l'utilisateur final puisse voir partiellement ce domaine. Le composant est utilisé pour attribuer des valeurs clip-path pour afficher la zone de clip.

Voir les définitions de composants stylisées de la boîte, de l'ombre et du composant ci-dessous:

 // Créer un code de composants stylisés pour les composants d'interface utilisateur à l'aide de propriétés CSS // Div conteneur
const box = Styled.div`
  Largeur: $ {props => props.width || '100px'};
  hauteur: $ {props => props.height || '100px'};
  marge: 0 auto;
  Position: relative;
`;

// Shadow définit la zone cachée par `Clip-path` Croping // Nous affichons un fond léger pour rendre cette zone partiellement visible.
const shadow = styled.div`
  Background-Color: $ {props => props.backgroundcolor || '# 00c4ff'};
  Opacité: 0,25;
  Position: absolue;
  En haut: 10px;
  Gauche: 10px;
  À droite: 10px;
  En bas: 10px;
`;

// Obtenez la valeur `clip-path` (formule) et définissez-le sur le composant réel de la propriété` clip-path ».
const Component = Styled.div`
  clip-path: $ {props => props.formula}; // Formule est la valeur de la valeur clip-path: $ {props => props.backgroundcolor || '# 00c4ff'};
  Position: absolue;
  En haut: 10px;
  Gauche: 10px;
  À droite: 10px;
  En bas: 10px;
`;

N'hésitez pas à afficher la base de code complète dans la base de code GitHub.

La direction du développement futur de Tryshape

TryShape gère la création et la gestion de formes de base en utilisant clip-path CSS d'arrière-plan. Il aide les formes d'exportation et les extraits de code CSS à utiliser dans votre application Web. Il a le potentiel de développer des fonctionnalités plus précieuses. La fonction principale est la capacité de créer des formes avec des bords incurvés .

Pour prendre en charge les formes de courbe, nous devons soutenir les valeurs suivantes dans Tryshape:

• Source de clip à l'aide de url()
• path() .

Avec ces valeurs, nous pouvons créer des formes à l'aide de SVG, puis utiliser l'une des valeurs ci-dessus. Ceci est un exemple de fonction CSS url() qui utilise le support SVG pour créer des formes.

<div> Cœur</div>
<svg><clippath clippathunits="objectBoundingBox"><path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z"></path></clippath></svg>

Ensuite, il y a CSS:

 .cœur {
  Clip Path: URL (# Heart Path);
}

Maintenant, créons une forme en utilisant path() . HTML devrait avoir un élément comme une div:

<div> Courbe</div>

Dans CSS:

 .Curve {
  Clip Path: Path ("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}

Conclusion

J'espère que vous apprécierez mon application Tryshape et que vous comprenez la philosophie derrière, les stratégies que je considère, la technologie sous-jacente et son potentiel pour l'avenir. Veuillez envisager de l'essayer et de vérifier le code source. Bien sûr, vous pouvez y contribuer à tout moment grâce à des questions, des demandes de fonctionnalités et du code.

Avant la fin, je veux vous montrer une courte vidéo pour le Hashnode Hackathon, Tryshape est l'entrée et a finalement été sélectionné pour les gagnants. J'espère que vous l'avez apprécié.

Contactons-nous. Vous pouvez commenter @ME (@tapasadhikary) sur Twitter ou le suivre à tout moment.

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!