CSS3PS – Copier le CSS depuis Photoshop

logo.PNG

CSS3Ps est une extension gratuite pour Photoshop, elle permet de convertir un calque en propriété CSS.

Différentes versions sont notamment disponible pour Photoshop CS3 jusqu'à la CC (Creative cloud).
Les utilisateurs de Mac ne sont pas oubliés puisqu'un patch de comptabilité et également disponible.

Le fonctionnement

Commençons par afficher notre extension.
Extension.jpg

Sélectionnez un élément de votre maquette, ici un calque de forme avec des styles pouvant servir de base pour l’intégration d’un bouton par exemple.
Photoshop.jpg

Appuyez sur CSS3PS.
Fenetre.jpg

5 secondes d’attente…
attente.jpg

Et voilà le résultat en CSS.
Il ne faut cependant pas se contenter de faire un copier-coller du code généré mais plutôt prendre le temps de l'étudier pour ainsi l'optimiser si cela est nécessaire.
css.jpg
(Image réduite pour des impératifs de mis en page et de lisibilité)

Si vous êtes un utilisateur des préprocesseurs, un résultat est également disponible en SCSS…
scss.jpg
(Image réduite pour des impératifs de mis en page et de lisibilité)

…et en SASS
sass.jpg
(Image réduite pour des impératifs de mis en page et de lisibilité)

Un commentaire

  1. Dans le genre, mais payant, il y a aussi « Css Hat » qui saute l’étape de requête vers un serveur centralisé pour avoir le résultat.

    Par ailleurs, les créateurs de « CSS Hat » on aussi sortie un plugin de découpage pas mal du tout.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.