Les concepteurs ont peut-être remarqué une utilisation croissante des propriétés de transition CSS3. Les interfaces de site Web ont été considérablement améliorées avec des styles d'animation personnalisés, le tout sans l'aide de JavaScript (lorsqu'il est utilisé judicieusement, bien sûr!)
Dans ce tutoriel, je veux montrer comment créer des effets d’animation dans des champs de saisie HTML5. Je vais concevoir un formulaire de contact simple avec quelques champs et une zone de texte. Utiliser le CSS3 :valide pseudo-classe, il est plus facile que jamais de personnaliser les entrées de texte. Regardez mon exemple de démonstration en direct pour avoir une idée de ce à quoi ressemble le produit final.
Live Demo - Télécharger le code source
Commencer le document
Nous devons commencer par un fichier index.html vide utilisant le doctype HTML5 standard. Je vais inclure des polices Web alternatives pour améliorer le design. Mais rien n’affectera considérablement la qualité du didacticiel.
La section la plus intéressante de la page concerne la configuration d’un formulaire HTML5 générique. Le bouton d'envoi ne fait que recharger la page. Cependant, cela ne suggère pas que vous ne pouvez pas créer de lien vers un script PHP ou Ruby backend pour le traitement de données, ou même une connexion via Ajax. Les transitions CSS3 ne devraient affecter que les styles frontaux et rien de plus.
Chaque entrée est contenue dans une div avec la classe .rangée garder les éléments séparés. De cette façon, il est beaucoup plus facile d’afficher l’étiquette juste à côté du champ de saisie. Et de même pour inclure d'autres avis ou avertissements sur le côté droit des champs. Chaque entrée est donnée à la classe .SMS tandis que l'élément textarea est stylé à l'aide de .txtarea.
Structure de mise en forme CSS
Je veux sauter dans notre code CSS et commencer par expliquer les réinitialisations de CSS. J'utilise un modèle de bloc similaire pour réinitialiser les navigateurs sur des valeurs par défaut similaires, telles que la taille des polices, la hauteur de ligne et la taille de la boîte. De plus, je configure les différentes polices Web et structure les éléments de base avec un espacement approprié. N'hésitez pas à enregistrer ce modèle pour l'utiliser dans d'autres projets Web.
En nous déplaçant dans la section principale du corps, nous avons une division wrapper utilisant l'ID #w. Ceci est centré sur la page avec une largeur limitée à 660px. Les éléments de ligne internes sont stylés en tant que conteneurs de bloc, avec des étiquettes internes et des champs de saisie de formulaire.
La petite classe .req est destiné aux caractères astérisques obligatoires utilisés dans toutes les étiquettes. Mais encore plus intéressant est la dernière section de code permettant de remplacer le texte de l’espace réservé interne. Tous les navigateurs CSS3 ne prennent pas totalement en charge ces propriétés, mais ils fonctionnent dans les moteurs Webkit et Mozilla mis à jour.
Vous remarquerez que les espaces réservés au texte de formulaire interne sont désormais en italique et prennent une nuance de couleur de texte de gris foncé / bleu. Je trouve que ce supplément de CSS aide à distinguer les lettres typées par l'utilisateur par rapport au texte d'exemple réservé.
Styling with Transitions
Je souhaite passer à la dernière section et expliquer comment utiliser des pseudo-classes pour réaliser des animations. Les styles les plus importants commencent par le .SMS et .txtarea classes utilisées sur chaque élément de formulaire.
J'ai fait beaucoup de personnalisation avec les nouvelles propriétés CSS3. Notez également que j'ai divisé les paramètres d'arrière-plan en fonction de leurs propriétés uniques - comme Couleur de fond et image de fond. Cela est nécessaire lorsque nous devons animer la coche dans l'entrée sans glisser complètement de la gauche. Au lieu de cela, nous le gardons bien caché à droite, là où il est caché, puis nous animons à partir du côté droit.
Vous remarquerez également que les codes pour :concentrer et :valide sont très différents. C'est une autre raison pour laquelle le fractionnement des propriétés est une bonne idée, car nous pourrions animer quelque chose dans une pseudo classe mais pas dans l'autre. Chaque propriété de transition cible toutes les modifications. Cela signifie donc que vous devez faire attention aux propriétés mises à jour.
Considérez que l'utilisateur peut entrer un nom valide uniquement pour le supprimer quelques secondes plus tard. Notre sélecteur valide devra ré-animer les propriétés de base - tout en conservant les propriétés :concentrer propriétés affichant aussi bien. Une animation segmentée est la clé pour faire fonctionner ces styles. Cela nécessitera quelques essais et erreurs, mais ces effets pourraient également être dupliqués sur chaque navigateur existant avec du JavaScript supplémentaire.
Un autre aspect du formulaire animé est le bouton d'envoi. Évidemment, les effets supplémentaires sont négligeables par rapport aux champs de saisie. Mais je pense que toutes les propriétés méritent d'être examinées car elles se rapportent les unes aux autres.
Au lieu de définir différentes propriétés d'arrière-plan, je viens d'utiliser des dégradés CSS3 et leurs préfixes spécifiques au fournisseur. Ceci maintient l’arrière-plan stable tout en améliorant les ombres de la boîte via les états de survol et actif.
Live Demo - Télécharger le code source
Dernières pensées
Le processus de création d'animations CSS3 formelles prend du travail. Il existe des bibliothèques externes telles que Animate.css qui peuvent aider, mais ne fournissent toujours pas autant de support que JavaScript. Heureusement, les normes CSS3 sont suffisamment avancées pour fournir des animations de base - survol, focus et pseudo-classes similaires.
J'espère que ce tutoriel peut offrir un exemple de base de code pour les développeurs Web. Vous pouvez apprendre beaucoup en pratiquant des techniques pendant quelques heures. N'hésitez pas à télécharger une copie de mes exemples de codes et à jouer avec différents paramètres. Ce n’est pas aussi difficile que vous le souhaiteriez d’implémenter des transitions similaires sur votre propre site Web.