Créer texte parfait arc avec CSS et jQuery
Un tutoriel simple montrant comment créer l'effet de texte arc-en-CSS simple et polir avec lettering.js autres.
texte arc en ciel avec CSS est chose assez facile, vous pouvez créer tout en jouant avec l'attribut de couleur.
L'idée est simple - séparer chaque caractère dans votre texte éléments, et les style avec l'aide de CSS. Une chose que vous devez savoir (ou vous savez peut-être) est les couleurs de l'arc en ciel. Cela fait partie importante car elle vous aidera à ajouter des couleurs parfaites arc-en-à votre texte.
Dans le cas si vous ne savez pas, le Rainbow a 7 couleurs en elle nommant Violet, Indigo, Bleu, Vert, Jaune, Orange et Rouge. Vous pouvez rappeler toutes ces couleurs comme VIBGYOR, dans lequel chaque personnage représente un nom de couleur.
Eh bien, je ne vais pas vous entraîner dans toute l'histoire de ce qu'un Rainbow est, mais si vous voulez en savoir plus, lisez ce wiki.
Pour en revenir au sujet, voir la démo de ce que nous allons créer. Maintenant, nous savons que les couleurs que nous avons à jouer avec, permet de commencer à coder.
Disons que nous avons notre texte dans un
tag, tout comme ci-dessous:
Permet de tous les personnages séparés dans notre texte s et donner notre étiqueter une classe:
Notez que j'ai donné une classe distincte pour chaque travée aussi, qui aidera à coiffer tous les personnages individuellement avec des couleurs arc en ciel.
Suivant le concept VIBGYOR, permet de commencer à ajouter des couleurs à elle.
C'est tout! Notre texte est prêt arc en ciel.
Rendre plus efficace avec lettering.js
En long et court, avec ce plugin, vous aurez pas besoin de séparer le texte avec des éléments de portée. Avant d'aller plus loin, assurez-vous que vous utilisez jQuery dans votre projet, comme lettering.js est un plugin jQuery.
Après avoir téléchargé le script, appelez-le dans votre code HTML et de cibler notre titre arc-en-comme indiqué ci-dessous:
Après cette mise en œuvre, vous pouvez remarquer en inspectant votre code que le script a fait fait son travail en toute transparence.
Voir en action vous-même dans la démo.