Personnalisez vos boîtes de message (X)HTML

Lien :- .com/tutoriels/css/messages-personnalises/

Introduction
Les messages d'information
Messages de réussite
Messages d'alerte
Messages d'erreur
Procédé de design
Messages de validation
Conclusion
Remerciements

IntroductionPouvez-vous y croire :

• Récemment, je suis allé à la banque vérifier l'état de mon compte.
  
• L'employé entre mes données personnelles et envoie une requête.
  
• L'application Web répond en affichant une boîte de message jaune avec un point d'exclamation indiquant que la demande était en cours.
  
• Il vérifia plusieurs autres fois, mais n'a pas fait attention qu'à un moment, le message se changea en "Compte valide".
  
• La boîte de message n'avait pas changé.
  
• Il continua d'essayer et s'aperçu enfin que la demande avait réussi.

Je ne sais pas ce qu'il y avait dans la tête des développeurs, mais ils ne pensaient sûrement pas aux utilisateurs. Ce pauvre employé était réellement embêté. Je n'ose pas imaginer à quoi doit ressembler le reste de l'application.
Pour éviter cela, différents types de boîtes de message devraient être affichés différemment. Je pense que chaque application Web devrait prévoir quatre types de messages : information, opération réussie, alerte et erreur. Chaque type de message devrait être affiché avec une couleur et une icône spécifique. Il existe aussi un type particulier de message que sont les validations.
Je vais vous montrer un remake des boîtes de message que j'ai utilisées pour mon dernier projet. Je les ai légèrement modifiées pour qu'ils soient plus simples dans cet exemple. Vous verrez aussi comment donner un style particulier de façon similaire pour vos messages de validation.
Voyons maintenant les différents types de messages.