Générateur et Visualiseur CSS border-image ｜ Découpe 9-Slice en Ligne

Cet outil interactif permet aux développeurs front-end et aux intégrateurs web de configurer et de prévisualiser la propriété CSS border-image. Il simplifie la manipulation du concept de 9-slice scaling en générant instantanément le code CSS de production. Toutes les images sont traitées localement dans votre navigateur ; aucune donnée n'est envoyée vers un serveur, garantissant ainsi la confidentialité de vos assets.

💡 Fonctionnalités principales et cas d'usage

• Découpe interactive (9-Slice) : Définissez les valeurs top, right, bottom et left en glissant directement les repères sur l'image source, ou utilisez les champs numériques pour une précision au pixel près.
• Prévisualisation en temps réel : Observez immédiatement l'impact de vos réglages sur un conteneur d'interface. Le panneau de rendu reflète la configuration exacte des découpes.
• Gestion des comportements de répétition : Basculez rapidement entre les modes stretch (étirement), repeat (répétition en mosaïque) et round (répétition ajustée pour éviter les coupures).
• Ajustement de l'échelle et du remplissage : Contrôlez l'épaisseur finale via le multiplicateur d'échelle (Border Scale de 0.1x à 3.0x) et gérez l'application de l'image sur l'arrière-plan du conteneur avec l'attribut fill.

🧐 Foire aux questions (FAQ)

Q. Comment interpréter les valeurs générées pour border-image-slice ?

A. En CSS, les valeurs définissant les tranches de l'image ne prennent pas d'unité (ex: border-image-slice: 30 40). Elles correspondent aux pixels intrinsèques de l'image raster. Il est essentiel que la somme des valeurs opposées (gauche + droite, ou haut + bas) ne dépasse pas la dimension totale de l'image. Si tel est le cas, le comportement de la bordure deviendra imprévisible et la zone centrale ne pourra pas être générée.

Q. Quelle est la différence technique entre les modes repeat et round ?

A. Le mode repeat va simplement répéter la tranche d'image le long de la bordure. Si l'espace disponible n'est pas un multiple exact de la taille de la tranche, l'image sera visuellement coupée à la fin. Le mode round, en revanche, va légèrement compresser ou étirer l'image de manière dynamique afin de s'assurer qu'un nombre entier de motifs s'insère parfaitement, éliminant ainsi les coupures abruptes.

📚 Maîtriser le 9-Slice Scaling en CSS

Le concept de 9-slice scaling (découpe en 9 grilles) est une technique standardisée pour créer des composants d'interface utilisateur adaptatifs (infobulles, fenêtres modales, boutons texturés de jeux vidéo) sans avoir à charger des images distinctes pour chaque dimension. L'image est divisée en quatre coins fixes, quatre arêtes étirables ou répétables, et une zone centrale.

Optimisation pour le web moderne (HiDPI / Retina) : Pour garantir une netteté absolue sur les écrans à haute densité de pixels, il est recommandé d'utiliser une image source dont la résolution est le double (2x) ou le triple (3x) de la taille d'affichage souhaitée. Dans ce cas, configurez les repères de découpe sur la résolution native de l'image, puis utilisez le paramètre Border Scale (ex: 0.5x) pour réduire le border-width calculé dans le code CSS final. Privilégiez les formats avec un canal alpha propre (PNG-24 ou WebP) pour éviter tout artefact sombre ou contour blanc irrégulier lors du chevauchement des bordures transparentes.