Depuis quelques mois plusieurs plug-ins ont fait leur apparition sur le web, donnant la possibilité de générer directement une feuille de style à partir d’un style Photoshop. Faisons le point sur cette technologie.
Lors de la phase d’intégration d’un site, vous reportez naturellement à la main, les effets de boutons par exemple pouvant être afficher grâce aux CSS3. Cette opération prend du temps, mais assure un résultat sans bavures, dans la limite du support de CSS3 par les navigateurs bien entendu… Pour nous faire gagner du temps (et non pour remplacer totalement « le travail manuel ») de petits plug-ins bien sympathiques ont fait leur apparition sur la toile. Il en existe pour l’instant deux à ma connaissance. Le premier, CSS Hat a ouvert la voie au printemps dernier. Petit comparatif des services et capacités de ces plugs-ins.
CSS Hat
Vous n’êtes probablement pas passé à côté de CSS Hat, qui a fait pas mal de bruit lors de son lancement. Bien évidement CSS Hat ne vas pas parcourir tout votre PSD pour ensuite générer un code HTML/CSS complet prêt pour une mise en ligne. Une belle utopie qui n’est pas pour tout de suite ou voir pour jamais… Le tout est plutôt pratique, dans la limite bien sûr de ne pas cumuler des effets vraiment très poussés. Évitez pas exemple des modes de fusions qui ne pourrai de toute manière pas être compatible avec du CSS. CSS Hat permet tout de même de convertir les ombres de texte, les dégradés, les angles arrondis, etc. Voici une liste exhaustive des effets à l’heure actuelle :
- Dégradés et fonds de couleurs
- Remplissage et transparence de calque
- Effets de calque :
- Ombre portée
- Ombre interne
- Lueur interne
- Lueur externe
- Dégradés
- Incrustation couleur
- Contour
- Calque de texte :
- Export de la couleur de la police et de l’ombre portée
- Hauteur et largeur de l’élément
- Angles arrondis — en dessinant un rectangle arrondi ou un cercle CSS Hat exporte la valeur de la propriété border-radius.
Ce plug-in Photoshop est payant, il est actuellement proposé à 19,99$ au lieu de 29,99$. CSS Hat prévoit le support futur LESS, Sass et Stylus. Petite démonstration du plug-in en image :
Ayant récolté plusieurs avis sur le plug-in, le ressenti général est plutôt bon. En effet pour des effets limités comme des ombres, des dégradés ou des coins arrondis le gain de temps n’est pas négligeable. Certains sont déçus des performance par rapport au prix du plug-in. Le meilleur moyen de savoir est de tester ou bien jeter un œil à une solution gratuite.
CSS3PS
Second plug-in au banc d’essai, CSS3PS qui offre presque les mêmes fonctions que CSS Hat. Le fonctionnement et les propriétés CSS sont assez similaires. Point positif, le plug-in est gratuit ! Pour l’avoir testé le dois dire qu’il fonctionne plutôt bien ! Découvrez une petite vidéo de présentation ci-dessous :
Markupwand
Ici pas de plug-in, mais un service en ligne qui permet de convertir un ficher PSD en HTML/CSS. Le tout est évidement bien limité et demande quelques contraintes (par exemple un maquette sur fond transparent avant tout envoi). Vous l’imaginez bien, il ne faut pas s’attendre à des miracles avec ce type de site. Le but vous l’aurez compris est de simplement vous faire gagner un peu de temps lors de l’intégration de votre maquette.
Pour conclure
Les plug-ins et services en ligne offre une évolution non négligeable dans la phase d’intégration d’un projet web. Lors de son processus de réflexion sur l’amélioration des flux dans un projet web, Adobe s’intéresse d’ailleurs de plus à ce genre de possibilités techniques en matière de CSS. Quel est votre avis sur la question, avez-vous déjà testé un de ces plug-ins ? Si non, vous semblent-il utiles ?