Chargement…
Formulaire de Contact CSS3 et HTML5

Créer Un Formulaire de Contact CSS3



Dans ce web design tutoriel on va créer un formulaire de contact css3 avec des transitions et des animations. Plus besoin d’utiliser Flash ou Javascript qui prennent beaucoup de temps à se charger, les propriétés de transition CSS3 améliore l’interface graphique et nous donnent la possibilité d’avoir plusieurs styles d’animations totalement personnalisée par rapport à notre besoin.

Formulaire de Contact CSS3 et HTML5

Créer Un Formulaire de Contact CSS3

Dans ce tutoriel, je veux montrer comment nous pouvons ajouter des effets dans les champs de notre formulaire de contact HTML5.

La Partie HTML

Notre CSS

Le formulaire de contact id= »formulairecontact » est centrée sur la page avec une largeur limitée à 660px. Les éléments de ligne internes sont décorées (Les conteneurs de bloc, Les étiquettes internes, champs du formulaire…)

Les champs de notre formulaire

La petite class req est celle chargée des champs requis, j’ai aussi ajouter une propriété placeholder text qui affiche du texte dans les champs (votre nom, address@domain.com…).

Puis j’ai utilisé une transition css3 pour les champs de notre formulaire. Les styles les plus importantes sont les class txt et txtarea utilisées sur chaque élément de formulaire.

Puis j’ai créer un style arrondis pour le bouton :

Télécharger Code Source

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire