J'aime garder un œil sur le monde en pleine croissance d'applications Web à usage unique qui visent spécifiquement à faciliter un peu votre travail de concepteur Web. Aujourd'hui, nous allons découvrir trois de ces outils que j'ai récemment trouvés amusants et utiles.
Nous commencerons par examiner Colllor, un excellent moyen de transformer une seule couleur en plusieurs. Nous passerons ensuite à Warp CSS et créerons une typographie CSS étonnante que vous ne pensiez probablement même pas possible. Enfin, nous allons examiner Bear CSS, un moyen de générer rapidement une feuille de style de démarrage basée sur votre code HTML. Commençons!
Collectionneur
Le premier nouvel outil que nous allons examiner est Colllor, une application amusante qui vous aidera à ajouter de la variété à vos palettes de couleurs. Le concept ici est simple: «Transformez une couleur en un tableau de couleurs alternatives». Voyons voir comment ça fonctionne.
Comment ça marche
La première étape consiste simplement à choisir une couleur. Prenez cette couleur de départ, tapez-la et cliquez sur le bouton "Choisir une couleur". bouton. Vous pouvez taper un code hexadécimal ou même une couleur standard nommée. Alternativement, vous pouvez appuyer sur le bouton de couleur aléatoire pour le tester.
A partir de là, le résultat est assez impressionnant. Vous avez le choix entre quatre barres horizontales contenant de nouvelles nuances de couleurs: nuances / teintes, tons, mélange et similaires. Votre couleur d'origine est clairement mise en évidence pour référence.
Vous avez accès à plus de cinquante échantillons associés, chacun portant une étiquette bien étiquetée, un effet de survol 3D cool et pouvant être copié dans votre presse-papiers en un seul clic.
Mes pensées sur le collectionneur
Je suis une ventouse pour les applications de couleur et celui-ci m'a attiré immédiatement. Il est vraiment bien conçu et suffisamment interactif pour faire de la recherche des couleurs une expérience des plus agréables. Au début, j’étais un peu confus quant à la raison pour laquelle les options standard telles que la génération de nuances complémentaires n’étaient pas incluses, mais il existe de nombreuses applications offrant cette fonctionnalité et j’aime bien que Colllor cherche à être unique dans son approche.
Généralement, pour trouver différentes nuances d'une seule couleur, j'utilise 0to255, cependant, ce site a tendance à être assez lent. Colllor est à la fois plus rapide et plus polyvalent. Le? Mix? Cette option vous permet de choisir deux couleurs pour voir un dégradé de couleurs individuelles entre les deux.
Une autre chose qui fonctionne bien est la copie dans le presse-papier. fonctionnalité. De nombreux utilitaires de couleurs ressentent le besoin d'inclure le? #? lorsque la couleur est copiée, ce qui est utile pour CSS, mais non pour Photoshop (CS6 l’adresse). Pour le moment, je préfère que le symbole soit omis, c'est-à-dire l'itinéraire emprunté par Colllor.
Je n'ai vraiment rien à redire ici. Colllor est un utilitaire de couleurs fantastique et gratuit que vous devez absolument ajouter à votre liste de signets.
CSS Warp
CSS Warp est un outil fou qui vous permet de créer un type de Web en direct qui suit un chemin compliqué. L'outil est remarquablement similaire à la fonctionnalité de type de chemin d'accès d'Illustrator. Le flux de travail doit donc être suffisamment familier pour que vous puissiez le saisir rapidement.
Comment ça marche
Passons en revue un test pour voir comment cela fonctionne. La première chose à faire est de saisir du texte. Parce que le code final généré peut être énorme (nous en parlerons dans une minute), je vous recommande de garder votre texte court et sympathique. Une fois que vous avez terminé, cliquez sur le bouton Warp.
Votre prochaine étape consiste à définir la courbe que votre type suivra. Les options ici sont assez flexibles, vous pouvez définir votre propre chemin de style de Bézier ou choisir un cercle. Les points créent des courbes arrondies par défaut, mais une option au bas de l'application permet de les modifier en angles vifs.
Vous effectuez le moulage dans la petite fenêtre d’aperçu qui apparaît à côté de toutes ces commandes. Cette mise à jour en direct avec toutes les modifications que vous apportez afin que vous puissiez toujours dire exactement à quoi ressemblera le produit final.
Vous pouvez également définir plusieurs options concernant la police, ce qui inclut la possibilité de définir la taille, la hauteur de ligne, le crénage * et la police. J'aime que vous puissiez choisir parmi la bibliothèque de polices Web de Google ici. Vous avez également quelques options pour aligner le texte sur le chemin.
* J'ai utilisé le terme? Crénage? ici parce que c'est le nom du contrôle sur l'application réelle. En fait, c'est mal étiqueté, ce curseur contrôle vraiment le suivi du type. La différence est importante. Lisez cela pour plus d'informations.
Une fois que vous avez terminé et que vous avez le type souhaité, cliquez sur? Générer HTML? bouton au-dessus de l'aperçu pour obtenir le fragment de texte à copier et coller dans votre code.
Mes pensées sur CSS Warp
Honnêtement, je peux dire que je n’ai jamais vu un autre outil réussir aussi bien avec du texte Web en direct. Les résultats sont tout à fait impressionnants et n’ont tout simplement pas quelque chose que vous voudriez faire à la main. J'adore quand les développeurs prennent l'initiative de repousser les limites de ce qui est possible sur le Web et de distribuer leur travail librement.
Mon seul vrai problème ici est vraiment quelque chose qui échappe totalement au contrôle du développeur. CSS et HTML n’ont pas de fonctionnalités intégrées pour taper le long d’un chemin. La seule façon de le faire est d’envelopper chaque lettre dans une plage, puis de positionner et de faire pivoter les lettres indépendamment les unes des autres. Cela conduit à une énorme quantité de code difficile à interpréter. Comme je l'ai dit, le développeur ne peut vraiment pas s'en empêcher, d'autres outils destinés à des lettres individuelles, tels que Kern.js, sont obligés de fonctionner de la même manière.
Dans l'ensemble, j'ai été époustouflé par la qualité de développement de l'application dans son ensemble. Il est extrêmement facile d'obtenir l'effet souhaité et de nombreuses options vous sont proposées. Il existe également une version JavaScript que vous devriez vérifier.
Bear CSS
Bear CSS ne fait qu'une chose: il sert une feuille de style de départ lorsque vous téléchargez un fichier HTML.Il ne fait pas le travail de style de votre page Web, il vous permet simplement de commencer en tapant les crochets de style évidents pour vous.
Comment ça marche
Bear CSS ne nécessite aucune réflexion ni aucun effort de votre part. En fait, tout ce que vous pouvez faire, c'est télécharger un document HTML.
Une fois que vous avez téléchargé votre document HTML, il est temps de cliquer sur le bouton? Télécharger le CSS? bouton. J'ai pris un document au hasard que je disposais juste pour le tester et j'ai reçu le résultat suivant.
Mes pensées sur les ours CSS
J'étais assez sceptique à propos de cet outil. J'aime écrire mon propre CSS et je n'étais pas folle de l'idée d'essayer de le faire pour moi. Cela étant dit, j'ai été agréablement surpris par le résultat. L’organisation, bien qu’elle ne convienne pas pour tous les projets, est résolument logique et assez largement applicable. J'aime ça sans effort, j'ai un bon document CSS de départ avec les principaux crochets que je pourrais vouloir cibler, clairement séparés en catégories comme la typographie et la mise en page.
De toute évidence, ce n'est pas un outil magique. Il ne lit pas votre esprit et ne crée pas de sélecteurs complexes, ce sont juste les "nécessités de l'ours". (trouver?). Tout le monde n'écrit pas l'intégralité du code HTML d'une page Web avant de commencer le CSS, mais si vous le faites, alors vous devriez l'essayer.
L'une des fonctionnalités que j'aimerais vraiment voir est la possibilité de coller du code HTML plutôt que de télécharger un fichier. Ce serait bien de faire une copie rapide depuis mon éditeur de texte ouvert. En outre, dans certains de mes tests contenant des classes répétées, le CSS généré a également répété ce sélecteur de classe, ce qui est évidemment redondant et inutile.
Une autre chose que j'aimerais voir est quelques options supplémentaires pour les utilisateurs professionnels à modifier. Quelques méthodes d'organisation différentes, incluant ou non des survols pour tout ce qui est enveloppé dans une ancre, et éventuellement une réinitialisation / normalisation de l'inclusion.
Conclusion
J'espère que vous avez trouvé un nouvel outil ou peut-être trois nouveaux outils à ajouter à votre sac de développement Web. Les trois applications ci-dessus n'affecteront pas considérablement votre flux de travail, mais elles peuvent en faciliter certaines parties.
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez des trois applications ci-dessus. En avez-vous déjà utilisé? Quels autres excellents outils vous ont aidé récemment?