Le laboratoire CSS réunit sur une seule page quatre familles de CSS visuel : les arrondis et formes organiques avec border-radius, le détourage polygonal avec clip-path: polygon(), les courbes d'accélération cubic-bezier() et 12 animations de chargement en HTML + CSS pur. Ce n'est pas un simple portail de redirection : chacun des quatre onglets embarque son éditeur temps réel et son code de sortie, ce qui justifie une fiche d'outil à part entière.

1. 01En haut de page, choisissez l'onglet arrondis, clip-path, cubic-bezier ou animation de chargement.
2. 02Dans l'onglet des arrondis, basculez entre « quatre coins » et le mode elliptique à 8 valeurs, puis réglez le pourcentage horizontal et vertical de chaque coin ou appliquez un préréglage.
3. 03Dans l'onglet clip-path, faites glisser les sommets du polygone, double-cliquez pour en supprimer et utilisez le bouton pour en ajouter ; dans l'onglet Bezier, déplacez les deux points de contrôle et comparez l'animation à un rendu linéaire.
4. 04Dans l'onglet Loader, choisissez la couleur principale et copiez directement le HTML + CSS de l'animation voulue parmi les 12 proposées.

• Chaque rayon horizontal ou vertical d'arrondi va de 0 à 100 % et l'outil propose 8 préréglages, dont cercle, feuille, goutte d'eau et pétale ; « forme aléatoire » s'appuie sur Math.random() et non sur le module aléatoire Web Crypto public.
• clip-path embarque 12 préréglages, dont triangle, losange, pentagone à octogone, étoile à cinq branches, flèche, croix, bulle de dialogue et trapèze ; au moins 3 sommets sont conservés et un nouveau sommet s'insère au milieu du côté le plus long.
• Les deux coordonnées x de cubic-bezier sont forcées entre 0 et 1, tandis que les y peuvent aller de -0,5 à 1,5 pour permettre l'anticipation et le rebond ; l'aperçu dure de 0,3 à 3 secondes et l'exemple de code fixe une transition de 600 ms.
• L'onglet Loader compte 12 animations, parmi lesquelles anneau, double arc, trois points, barres verticales, pulsation, ondulation, orbite, grille de neuf cases, barre de progression et retournement ; la copie contient à la fois le HTML et le CSS.
• Ce qu'il ne fait pas : aucun CSS utilisateur n'est exécuté, il n'y a pas d'éditeur de mise en page visuel complet, et rien n'est écrit automatiquement dans vos fichiers de projet.

Tous les paramètres CSS, les aperçus et les résultats copiés sont produits dans la page courante du navigateur : rien n'est envoyé et aucun code distant n'est exécuté.