Partant du principe que nous avons à peu prés tous désormais un navigateur dit moderne, et notamment dans mon cadre professionnel pour lequel je suis intervenu, j'ai voulu fabriquer grâce à CSS 3 une forme de ticket de boucherie, forme sur laquelle je voulais afficher simplement et la clef primaire d'un enregistrement. Tous les informaticiens comprendrond, pour les autre, je voulais juste afficher la référence unique de l'enregistrement de la base de donnée, pour le retrouver facilement.
Bien que j'ai compris comment fonctionnait, en CSS, la manière de dessiner une forme, il faut bien avouer que le manque de temps (et d'envie) m'empêche de coder le CSS adéquat, pour afficher cette forme relativement complexe.
Source : Pinterest
Après quelques recherches sur Internet, je suis tombé sur ce site que je voulais vous faire partager à travers cet article : img2css, hébergé sur le domaine http://javier.xyz.
Le principe est relativement simple. Il repose sur un drag and drop d'une image que vous souhaitez convertir en CSS. Pour ma part, je suis partie d'une image au format JPEG. Je reconnais n'avoir pas testé les autres formats des images.
Comme la forme que je souhaite obtenir en CSS et un ticket de boucherie, cous conviendrez que cette forme peut être qualifiée de complexe (il ne s'agit pas là d'un carré, un rectangle, mais bien un polygone, avec des formes arrondies).
Une petite recherche sur un site d'images libres m'a permis de trouver une image représentant un ticket de boucherie, sur un fond blanc. La couleur du fond a l'air importante, car pour pouvoir sortir la forme du fond, il faut une "zone de rupture", deux couleurs bien distinctes.
Une fois votre drag and drop effectué sur basket zone à l'aide de votre souris, de manière quasiment transparente et instantanée, vous verrez s'afficher à l'écran l'ensemble du code CSS correspondant à l'image que vous souhaitez transformer, aindi que le <div> "portant" le CSS.
Tout ce code est un code HTML, cela signifie que d'une manière technique, votre code généré et tout simplement une division HTML (un <div>), qui va prendre en paramètre une/des propriété de style. C'est dans ce style que la forme va prendre forme.
Un simple copier-coller du code généré dans une page HTML, bien entendu dans le body, va afficher "l'image", ou plutot la <div> et son style que vous avez demandé à transformer en CSS.
Alors, me direz-vous, cette forme et son contenu sont super simple, et je suis d'accord avec vous. C'est la raison pour laquelle j'ai récupéré l'icône représentant le spectacle "Le Lac des cygnes" programmé prochainement dans notre commune. Vous pouvez imaginer la complexité de l'images entre les cygnes, les danseurs, le titre et surtout le dégradé du fond de l'affiche.
Je n'ai pas été déçu du résultat.
Afin de conclure cet article avec quelques présentation CSS issu d'images, je joins quelques transformations que j'ai réalisé avec cet outil.
| Image | CSS généré |
 |
|
 |
|