Transformer un dessin de Photoshop sur le Web en un clic n’est même pas une idée nouvelle et lointaine. Depuis aussi longtemps qu'il y a? Concepteurs de sites Web? il y a eu le rêve d'un tel flux de travail. Aujourd'hui, nous allons examiner un autre outil qui fait cette promesse: CSS Hat.
CSS Hat est différent des autres applications que vous avez vues. Ce n'est pas un WYSIWYG complet destiné à vous permettre de construire un site entier sans écrire de code, c'est plutôt un moyen d'extraire quelques styles CSS3 rapides sur un seul élément en utilisant le processus que vous avez utilisé depuis une décennie ou plus, droit dans Photoshop. Alerte spoiler: c'est bon. Très bien. Lisez la suite pour voir pourquoi.
Rencontrez CSS Hat
Parlons de ce qu'est et n'est pas CSS Hat. Tout d'abord, ce n'est pas une application autonome. Au lieu de cela, c'est un plugin Photoshop. Et je ne parle pas de l'un de ces énormes plugins Photoshop qui ressemble vraiment à une application séparée, je parle d'un panneau très simple qui n'a vraiment rien à voir avec la sortie textuelle.
Cela signifie pour vous que la courbe d'apprentissage est remarquablement basse. En fait, c'est pratiquement inexistant si vous connaissez bien Photoshop.
CSS Hat a pour astuce la possibilité d’examiner un calque dans Photoshop, d’analyser ses diverses caractéristiques, puis de tenter de le dupliquer avec du CSS pur. De toute évidence, il ne peut pas tout reproduire, mais la gamme est assez impressionnante et répondra à vos besoins pour la plupart des objectifs. Voici certaines des choses qu'il peut gérer avec succès:
- Styles de calque: C'est là que réside vraiment l'avantage. De nombreux styles de calque de Photoshop se traduisent remarquablement bien en CSS (pas tous, mais beaucoup). Certains exemples de styles pris en charge incluent les ombres, les lueurs et les superpositions de dégradés.
- Coins arrondis: Si vous dessinez une forme vectorielle avec un rayon de coin arrondi, le CSS résultant utilisera une valeur équivalente de bord de rayon.
- Couleur de fond et opacité: Remplit une forme avec une couleur et elle sera également appliquée dans vos CSS.
- Styles de typographie: Pas si vite. Apparemment, cette fonctionnalité est à venir, mais n'a pas encore été implémentée. Les styles de calque, les remplissages, etc. fonctionnent toujours, mais pas les propriétés liées aux polices.
Pointe: Pour avoir une idée de ce que serait l'utilisation de Photoshop pour générer du CSS, jetez un œil à Styles de calques de l'application Web gratuite. Ce n'est pas aussi lisse que CSS Hat, mais c'est une petite alternative amusante.
Mais je déteste les WYSIWYG!
Je sais, je sais, vous détestez Dreamweaver et toute autre application qui tente de minimiser l’aspect de codage de la création de sites Web. Je suis là avec toi. Je code les sites à la main et j'aime le faire de cette façon afin que vous puissiez être assuré que je ne vous mènerai pas dans une voie qui ternirait vos processus de codage et produirait une sortie épouvantable.
CSS Hat n'est pas un moyen pour les non-développeurs de tricher et de créer un site Web attrayant avec une base de code merdique. En fait, il est évident que CSS Hat est en fait un utilitaire destiné aux codeurs, et non aux non-codeurs. Si vous voulez l'utiliser efficacement, vous devez bien maîtriser le CSS: ce qu'il est possible de faire, comment il est implémenté et comment différentes propriétés sont appliquées dans les navigateurs.
Bien sûr, CSS Hat va faire beaucoup de travail pour vous avec la génération de code, mais il vous fournit simplement un minuscule morceau du puzzle énorme qui est un site web et c'est à vous de l'intégrer correctement.
Alors pourquoi s'embêter? C'est une question valide. Je crois que la réponse réside dans le fait indéniable que CSS3, malgré toutes ses capacités étonnantes, est aussi encombrant que volumineux. Même pour obtenir des résultats simples, il faut beaucoup de code. Si vous pouvez utiliser un outil qui réduira votre investissement en temps tout en générant un code pratiquement identique à celui que vous écririez à la main, pourquoi ne pas l'utiliser?
Essayons!
Je suis toujours très sceptique face à des outils comme celui-ci, mais après avoir vu certains exemples fournis par CSS Hat, j'étais impatient d'essayer moi-même. Pour commencer, construisons un bouton de base dans Photoshop et voyons comment CSS Hat gère la tâche.
Le processus décrit ici est fondamentalement identique à celui que vous prendriez toujours pour créer un bouton dans Photoshop. Je commencerai par dessiner une boîte avec un rayon de 10px.
Ensuite, nous ajouterons un calque dégradé, commençant par # 009ced et se terminant par # 0065bd.
Nous allons maintenant nous tourner vers une ombre intérieure pour fournir une mise en valeur subtile au sommet.
Accélérons les choses ici et passons au bouton terminé. Fondamentalement, à partir de là, j'ai ajouté une lueur intérieure assombrie (fonctionne plutôt comme une ombre intérieure), un trait d'un pixel et une ombre portée. N'oubliez pas que même si cela prend un certain temps à expliquer, il ne s'agit en réalité que d'une minute ou moins du travail de Photoshop.
Allez Gadget CSS Hat!
Maintenant que nous avons le bouton que nous voulons, il ne nous reste plus qu'à ouvrir notre panneau CSS Hat et nous allons trouver un gros morceau de code en attente de copie.
Avant de voir à quoi cela ressemble dans le navigateur, rendons la sortie encore meilleure. En bas, vous verrez cinq boutons. Le premier copie le code dans votre presse-papiers et les quatre autres sont des options que vous pouvez activer et désactiver:
- Ajoutez des commentaires pour expliquer d'où provient cette ligne.
- Générez des CSS avec les préfixes spécifiques au fournisseur, si nécessaire.
- Ajoutez la largeur et la hauteur du calque sélectionné au CSS.
- Enveloppez le CSS dans une règle nommée d'après le calque.
Pour plus de commodité, je vais vérifier tout les quatres Options et nommer ma couche? .button ?. Je vais maintenant passer à un éditeur de code et coller le code résultant dans mon CSS:
Cela a-t-il fonctionné?
Vient maintenant le moment de vérité, à quoi ressemble la démo en direct par rapport à la version Photoshop. Voici votre réponse:
Comme vous pouvez le constater, ils ne sont certainement pas parfaitement identiques. Cela étant dit, ils sont assez proches et, à bien des égards, la version CSS est en fait plus fluide et plus esthétique. A mon avis, c'est une amélioration de mon concept Photoshop!
Il y a certaines mises en garde dont vous devez être conscient. Certains aspects des styles Photoshop ne peuvent tout simplement pas être traduits en CSS pour le moment. Par exemple, Photoshop ajoute un mode de fusion de? Multiplier? pour supprimer des ombres par défaut, mais cela ne peut pas être reporté sur votre CSS.
Cela étant dit, les possibilités avancées sont nombreuses et vous pouvez facilement ajouter à votre travail avec un bon codage manuel traditionnel. Le site Web CSS Hat présente des démonstrations vraiment impressionnantes qui ont été construites à l'aide de cet outil génial, tel que celui ci-dessous de musHo.
Tant de code!
Je sais déjà ce que certains d'entre vous pensent à ce stade, alors laissez-moi vous attraper avant de laisser un commentaire désagréable. L’inconvénient évident des exemples ci-dessus est qu’ils prennent beaucoup de code. Cependant, ce n'est pas du tout la faute de CSS Hat. Le code qu'il produit est en fait bien organisé et aussi concis que possible.
En réalité, si vous souhaitez utiliser des images pour créer ces types d’effets, vous pouvez facilement emprunter cette voie. De nos jours, cependant, dans un monde où tout doit être redimensionné en fonction de différents périphériques (dont certains ont une résolution d'écran époustouflante), nous aimons créer des choses avec du code pur, de sorte que la taille et la pixellisation ne sont jamais un problème.
Pour ce faire, nous nous tournons vers notre ami CSS3, qui est toujours en pleine mutation et nous demande donc d’utiliser ces énormes blocs de code redondant remplis de préfixes de navigateur pour accomplir tout ce qui mérite d’être discuté. Lorsque vous voyez les énormes morceaux de code ci-dessus, si vous avez une réaction indésirable, vous réagissez à l'état de la conception web, pas à cet outil spécifique.
La seule chose que l’on puisse dire contre des outils comme CSS Hat est qu’ils permettent d’oublier très facilement que vous travaillez vraiment avec du code. Lorsque vous écrivez du code à la main, vous êtes beaucoup plus conscient du résultat et êtes donc plus apte à être concis, à la fois par correction et par paresse. Lorsque vous utilisez un générateur de code, assurez-vous d’examiner de près le résultat et demandez-vous si l’effet en vaut la chandelle.
Que pensez-vous de CSS Hat?
Après un essai complet, je suis époustouflé par la facilité avec laquelle CSS Hat permet de générer du code CSS valide et bien codé à l'aide de Photoshop. C'est un rêve devenu réalité pour de nombreux designers et je pense qu'il mérite pleinement tout le battage médiatique qu'il suscite et plus encore.
Si vous codez beaucoup de styles CSS3 et adorez Photoshop, vous devriez penser à prendre votre copie. C'est 20 $ en ce moment, ce qui semble beaucoup. Mais vous savez, si Photoshop publiait ces fonctionnalités demain, vous seriez ravi de débourser des centaines de dollars pour la mise à niveau.
Maintenant que vous avez lu mon article, j'aimerais entendre ce que vous pensez. Est-ce un nouvel outil génial pour les concepteurs et les codeurs ou juste un jouet stupide qui ne doit pas être pris au sérieux? Rant sur!