15 générateurs de HTML5 et CSS3 géniaux
HTML5 et CSS3 sont d'excellents langages pour commencer à apprendre, et j'ai toujours pensé que l'une des meilleures façons de commencer à apprendre était de plonger et de manipuler le code. Comme vous le savez probablement, c'est là que les générateurs interviennent. Ils sont un excellent moyen de générer du code, de jouer avec et d'apprendre.
Non seulement cela, ils sont incroyablement utiles parce que souvent en tant que développeur ou concepteur, nous trouvons que nous faisons les choses encore et encore. Eh bien, les générateurs peuvent enlever ce bord et faire ces petites choses pour vous chaque fois.
Par exemple, j'ai un extrait de texte-expander qui crée un modèle HTML5 dont j'ai parlé ici . Maintenant, text-expander est génial mais il ne résout pas tous les besoins, et dans ce cas il y a un grand besoin de générateurs, donc j'ai pris le temps de trouver 20 de mes favoris et de décrire pourquoi je les aime.
Je dirai que la majeure partie de cette liste va se concentrer sur les générateurs CSS3, simplement parce qu'ils sont plus demandés que les générateurs HTML5, et nous allons apprendre pourquoi. Remarque: cliquez sur les images pour ouvrir les sites Web.
Générateurs CSS3
Il y a une connotation quelque peu négative en ce qui concerne ces générateurs, et je dois dire qu'en tant que concepteur et développeur, il n'y a rien de négatif à en utiliser. C'est un énorme gain de temps et, en toute honnêteté, je connais trois développeurs qui ont écrit leurs propres générateurs simplement parce qu'ils voulaient aider la communauté. Donc, gardez à l'esprit que ce n'est pas comme si vous utilisiez quelque chose de tabou fabriqué par AOL; Ce sont des générateurs très naturels et organiques qui ont vu le jour. Alors pourquoi ne pas partager une partie de la richesse? Passons en revue quelques-unes de mes préférées, et pourquoi vous pourriez les apprécier.
Générateurs Généraux
Cette section se concentrera sur les générateurs qui prennent en compte les besoins et les usages du spectre. Celles-ci couvriront presque tout ce dont vous pourriez avoir besoin, ou que vous voulez dans un générateur, mais de par leur nature même, elles peuvent être pires à certains égards. C'est pourquoi je donnerai autant d'options plus loin dans cet article pour des types spécifiques.
CSS3.me
C'est l'un des générateurs exacts dont je viens de parler. Celui-ci a été créé par l'un de mes designers préférés, Eric Hoffman , et c'est incroyable. Très simple, minimal et élégant, mais en même temps très fonctionnel. Vous permettant de modifier et de définir le rayon de la bordure, l'ombre portée, le dégradé et l'opacité - il est tout à fait fonctionnel.
Note: Jetez un coup d’œil au site d’Eric. c'est un excellent exemple de premier design mobile. Il est également designer chez Zendesk , alors envoyez lui un peu d'amour si vous avez déjà apprécié ce produit.
CSS3 Maker
Souvent, les gens trouvent des générateurs qu’ils aiment et s’y tiennent. Et c'est exactement ce qui s'est passé avec un client avec lequel j'avais travaillé précédemment concernant ce générateur. Il en était absolument amoureux et je peux comprendre pourquoi - il est sûrement fonctionnel. Ce n'est peut-être pas la plus belle chose qui ait jamais été faite, mais elle semble avoir tous les atouts.
Vous pouvez faire @ travail police-face, travail d'animation, ombres de boîte, ombres de texte, rotation de texte, transitions, dégradés, rayon de bordure et bien plus encore. C’est une méthode que j’ai souvent mise en signet, mais que je n’utilise que simplement parce que les petits générateurs fonctionnent bien dans chacune de leurs catégories respectives. Mais c'est certainement un bon générateur à essayer si vous en avez besoin d'un et que vous n'aimez pas sauter dans un tas d'autres.
CSS3 Generator
Ceci est un autre bon général qui fournit beaucoup de fonctionnalités. J'aime celui-ci car il dispose de menus déroulants simples et faciles à utiliser. Le design est aussi très sympa. Il offre également une fonctionnalité de taille de boîte agréable. Celui-ci offre une grande capacité à effectuer les opérations suivantes: rayon de bordure, ombrage de boîte, ombre de texte, RGBA, colonnes multiples, dimensionnement de boîte, contour, transitions, transformations, dégradés de sélecteurs. Je pense que c'est l'un de mes favoris, car le design et l'interface utilisateur sont si propres. J'utilise habituellement celui-ci quand j'oublie cssmaker.
Générateurs de boutons
CSS3-Tricks Button Maker
L'un des premiers fabricants de boutons que j'ai vus à l'époque m'a vraiment fait trembler. C'était très linéaire, il n'y avait pas d'interface utilisateur (ironiquement) et globalement, c'était un produit horriblement conçu. En guise de note, je parlerai de quelque chose de similaire ensuite, mais pour le moment je vais en montrer un que j'ai trouvé à css3tricks , et c'est vraiment sympa.
Un des points clés à mentionner ici est le fait qu’il est presque entièrement contrôlable par un curseur de glisser-déposer, ce qui est vraiment bien. Attendez simplement que vous deviez tout saisir manuellement à l'aide du clavier et vous souhaiterez avoir un bon curseur de déplacement. En guise de dernière remarque, CSS3 Tricks est un site merveilleux avec une tonne de contenu bien organisé et réfléchi que vous aimeriez tous découvrir.
CSS3 Button.net
Et maintenant nous arrivons au générateur dont je parlais juste. Le design manque peut-être, mais il offre beaucoup plus de choix que le précédent, ce qui est souvent la façon dont les choses fonctionnent. Parfois, vous aimeriez la facilité d'utilisation et vous avez parfois besoin d'un choix sérieux en ce qui concerne les générateurs, et ces deux derniers points sont vraiment importants.
Celui-ci offre la possibilité d'ajouter plusieurs ombres de texte, les ombres internes, les bordures et les couleurs de police, tandis que le dernier n'a pas beaucoup de détails. Il peut être difficile de comprendre au début, mais vous l'obtiendrez si vous ne jouez que pendant quelques minutes. Je trouve que celui-ci est le plus utile si vous êtes habitué à l'interface utilisateur de Windows. Par conséquent, j'ai demandé à des clients de me dire que c'était leur préféré car ils étaient coincés sur XP depuis des années et ne le connaissaient pas mieux. Et maintenant, je suis sûr que certains d'entre vous se demandent, mais honnêtement, cela se passe - certains clients veulent des liens vers des générateurs pour apprendre d'eux-mêmes après les avoir impressionnés. Je les relie habituellement à Lynda , TeamTreehouse et quelques-uns de ces générateurs pour faire bonne mesure.
CSS3 Button Generator
C'est vraiment amusant. Cela vous donne un gros bouton à manipuler, qui est également dans une couleur rétro. Vous pouvez ensuite manipuler l'ombre, la bordure, la couleur et, en plus, vous pouvez modifier le survol. J'aime celui-ci car c'est celui que j'ai découvert tout à l'heure lorsque je me suis lancé dans CSS, et cela m'a vraiment donné une idée de ce qu'il est possible de faire. Les curseurs de glisser-déposer sont parfaits pour les débutants en langues, car vous pouvez voir ce que vous pouvez faire immédiatement. Maintenant, je dirai que je n'utilise plus celui-ci en particulier, à la lumière de ceux qui sont apparus, mais c'est un bon souvenir.
Générateurs d'image et de rayon à la frontière
Image frontière
Rien ne vaut border-image.com quand il s'agit de prendre une image spécifique, puis de la reproduire pour trouver le style de bordure approprié. Assurez-vous de ne pas enfreindre les droits d'auteur et d'utiliser l'image de quelqu'un d'autre sans attribution.
Mais supposons que vous ayez dessiné une flèche ou un triangle et que vous souhaitiez trouver un générateur pour le répéter sur la frontière de votre site ou même sur celle d'un élément. Eh bien, rien n'est meilleur que ce site en ce qui concerne ce besoin. Vous pouvez manipuler le décalage, la taille et la répétition de l'image.
Dès que vous arrivez sur le site, vous verrez un exemple d’image qu’ils ont chargé, mais il est beaucoup plus utile que l’image affichée. Je l'utilise souvent pour des motifs d'arrière-plans que je veux répéter et / ou pour voir comment cela serait vraiment rapide, avant de reproduire l'intégralité de l'arrière-plan dans Photoshop. Vous pouvez l'utiliser pour tout ce qui concerne les images répétées.
Rayon frontière
C'est un petit outil génial et minimal que je trouve souvent très pratique. Avec cela, tout ce que vous faites est de définir combien de bord arrondi vous voulez à chaque coin. Très pratique, très simple. Et puis, il vous suffit de cocher le type de préfixe de navigateur que vous souhaitez inclure et le boom effectué. C'est une belle interface en toute honnêteté. Il devrait y avoir des tests dans les cours d'informatique où tout ce que vous faites est d'essayer de trouver quelque chose d'aussi simple et fonctionnel que cela.
Générateurs de dégradés CSS3
Éditeur de dégradé de couleur Zilla
Ceci est présenté comme l’éditeur de dégradé CSS3 par excellence, et pour de bon. En fait, c’est tellement génial que c’est le seul éditeur de dégradé que je vais inclure ici. Il a une tonne de fonctionnalités, et est très facile à utiliser et facile à utiliser. Faites simplement glisser les crayons noirs et bleus et vous verrez rapidement ce qu'ils font. Ils font également un éditeur de navigateur dans Chrome ou Firefox c'est vraiment utile pour les concepteurs travaillant sur le web. Assurez-vous également de jouer avec les préréglages de celui-ci, car souvent ceux-ci sont assez bons - quiconque les a choisis a fait du bon travail.
Générateurs typographiques / éditeurs
@fontface Generator
C'est un produit vraiment intéressant. Cela vous permet de télécharger des polices que vous avez choisies sur le Web ou sur l'ordinateur, puis de vous fournir un fichier de sortie prêt à être utilisé sur le Web. Vous obtenez plus d'une chose cependant, vous obtenez quelques choses. Vous obtenez le code CSS pour les propriétés @ font-face en fonction de la police choisie et un fichier HTML qui affiche la police et ses nombreuses utilisations. C'est vraiment un excellent outil pour vérifier le plein potentiel d'une police si vous n'en êtes pas sûr, et surtout si vous n'avez pas le temps de générer un site Web complet avec cette police avant de prendre la décision.
Reverse CSS3 Generator
CSS3 Please
C'est un produit vraiment fascinant. Fondamentalement, cela vous permet de disposer d'un ensemble de boîtes et de tous les éléments CSS nécessaires, puis vous permet d'activer et de désactiver les sections pour voir ce qu'elles font. Ainsi, vous pouvez essentiellement désosser le CSS3 pour savoir ce qu'il fait, puis vous pouvez voir ce que vous faites. C'est un excellent moyen d'apprendre CSS3 si vous êtes intéressé, mais pensez que les générateurs sont un peu trop compliqués.
CSS3 Générateurs d'ombre portée
Générateur d'ombres
J'aime beaucoup ce générateur d'ombres, car il va dans le détail et la profondeur des ombres portées que les autres générateurs ne font pas. Cela ne ressemble peut-être pas au produit le mieux conçu, mais c'est certainement génial. Il comporte des ombres, des ombres et des possibilités de manipulation des décalages, de définition des couleurs et de tout ce que vous pouvez faire avec du code, mais avec une belle barre de déplacement. Oh comme j'aime la barre de déplacement. Cochez cette option si vous avez besoin de voir de manière générale à quoi peut ressembler votre idée fictive avant de la coder en dur.
Générateurs HTML5
Les générateurs HTML5 sont en quelque sorte difficiles à trouver, et la raison en est probablement la grande HTML5 Boilerplate est. Nous ne parlerons pas de cela, car ce n’est pas spécifiquement un générateur, donc je résumerai ici: c’est essentiellement un modèle HTML5 déjà rempli et prêt à être utilisé, alors allez y faire un tour si vous ne l'avez pas vu C'est vraiment génial en fait. Beaucoup de gens l'utilisent comme un modèle de démarrage pour leurs sites et pour une bonne raison. Maintenant, revenons aux générateurs. Trouver une version de qualité est en fait assez difficile, mais j'ai réussi à en trouver quelques-unes ici que je montrerai - et ensuite, j'ai quelques autres plus générales qui abordent tous les sujets de cet article.
Générateur HTML5 Shikiryu
Le générateur HTML5 de Shikiryu est beaucoup plus complexe. Vous pouvez ajouter des fonctionnalités qui vous permettent de faire des choses à l’intérieur de Blueprint (mixins, etc.) et de type fantaisie - ce qui est en fait très utile. Je l'aime parce que c'est un peu plus sémantique que les autres options, et vous permet en même temps d'ajouter des applications tierces très populaires que les gens aiment utiliser.
Passer au générateur HTML5
C'est un générateur intéressant. Cela vous permet de créer un cadre simple et rapide pour la création de sites, mais contrairement à la version de Boilerplate HTML5, elle nous permet de choisir exactement les sélecteurs que nous préférons voir dans notre framework. En fait, j'ai eu tendance à l'utiliser pour générer du code au lieu de HTML5 Boilerplate lorsque j'ai besoin de quelques sélecteurs ou éléments supplémentaires. Maintenant, il ne suit pas exactement tous les principes magnifiquement conçus du balisage sémantique - comme le fait HTML5 Boilerplate - mais il fait assez bien le travail, et vous pouvez faire le reste si vous en avez vraiment besoin.
Générateur HTML5 de charlatan
Celui-ci fait un pas en arrière, et au lieu de simplement vous donner un groupe de code assez générique et simple, vous permet de saisir toutes vos propres informations. C'est vraiment utile, et j'ai trouvé que d'autres personnes plus récentes sur les sites Web l'aiment vraiment. Ils ont particulièrement aimé, j'ai trouvé, en ce sens qu'il génère la base HTML standard pour que vous puissiez ensuite faire comme vous le souhaitez avec CSS. Donc, si vous apprenez CSS et que vous êtes encore un peu flou sur le HTML (même si vous ne savez pas trop pourquoi cela serait le cas), vous pouvez le faire de cette façon.
Et ça va en venir à bout. Ces générateurs sont tout simplement incroyables pour travailler de manière rapide et agile, mais plutôt que pour les entrepreneurs, ils sont des designers. Et c'est vraiment génial à mon avis. Ayez une idée rapide d'un rayon de bordure (peut-être un onglet?), D'une ombre, d'un dégradé de couleur ou d'un modèle HTML5 avec un modèle inclus. Prenez note cependant que ce n’était pas une liste exhaustive, mais que c’étaient quelques-uns de mes favoris et ceux que mes collègues du passé ont utilisés. J'apprécie vraiment beaucoup d'utiliser ces derniers et j'espère que vous aussi.