Créer un formulaire de connexion Slick CSS3

Le but de ce post est de tirer parti de nouvelles fonctionnalités fournies par CSS3 et de s'éloigner des images. Nous allons créer un formulaire de connexion sans CSS3 images tout en ayant un résultat visuellement agréable.

Première permet de commencer par créer le balisage HTML qui compose le formulaire de connexion. Commencez avec la page HTML de base que je ne comprend pas la partie dans le code.

C'est le balisage de base avec quelques étiquettes et des éléments d'entrée.Maintenant, il ya plusieurs façons de le balisage du HTML que vous voyez ci-dessus, mais j'ai essayé de le rendre aussi simple que possible. Assurez-vous d'ajouter la classe à votre bouton SOUMETTRE parce qu'il faudra un style différent.
Démo HTML uniquement



Comme vous pouvez le voir ci-dessus nous avons vraiment besoin de la puissance de CSS afin de donner à ce formulaire de connexion certain attrait visuel. Entrez CSS3!
La rédaction du CSS

Il est maintenant temps de donner à ce formulaire de connexion un peu de vie.CSS3 a quelques fonctionnalités vraiment nouveaux et puissants et nous couvrirons que quelques-uns d'entre eux. Première permet d'obtenir quelques-uns des styles de présentation de base vers le bas rien avoir à faire avec CSS3
Coiffeuse l'élément de formulaire

Nous allons commencer à écrire notre CSS ciblant l'élément de formulaire que certains des autres éléments de la page s'appuiera sur l'élément parent. Je vais passer par les propriétés dans un ordre logique non par ordre alphabétique.Nous voulons régler la largeur à 250px 20px de padding avec tous les côtés et une bordure 1px aussi.

forme {
largeur : 250px ;
padding : 20px ;
frontière : 1px solide # 270644 ;
}

Ajout CSS3 à l'élément de formulaire

Maintenant passons à ajouter à la magie CSS3 pour apporter ce formulaire à vie.

forme {
largeur : 250px ;
padding : 20px ;
frontière : 1px solide # 270644 ;

/ *** Ajout dans CSS3 *** /

/ *** Coins arrondis *** /
-Moz-border-radius: 20px ;
-Webkit-border-radius: 20px ;

/ Dégradé Arrière-plan *** - 2 déclarations un pour Firefox et un autre pour Webkit *** /
arrière-plan :-moz-linear-gradient ( 19% 75% 90 degrés, # 4E0085 , # 963AD6 );
Fond :-webkit-gradient (linéaire, 0% 0% , 0% à 100% , à partir de ( # 963AD6 ), à ( # 4E0085 ));

/ *** Ombre derrière la boîte *** /
-Moz-box-shadow: 0px 5px- 300px # 270644 ;
-Webkit-box-shadow: 0px 5px- 300px # 270644 ;
}

Styling les éléments d'entrée

Styling les éléments d'entrée est assez facile, mais il a quelques complications qui peuvent frustrer. Nous allons appliquer une couleur d'arrière-plan, une bordure supérieure, un rembourrage et une largeur.

entrée {
largeur : 230px ;
arrière-plan : # 8a33c6 ;
padding : 6px ;
margin-bottom : 10px ;
border-top : 1px solide # ad64e0 ;
border-left : 0px ;
border-right : 0px ;
border-bottom : 0px ;
}

Ajout CSS3 à l'élément d'entrée

Pour l'élément d'entrée nous mettrons en oeuvre les nouvelles fonctionnalités de transitions CSS3 dits. Malheureusement cela ne fonctionne que dans les navigateurs Webkit comme Safari et Chrome.

entrée {
largeur : 230px ;
arrière-plan : # 8a33c6 ;
padding : 6px ;
margin-bottom : 10px ;
border-top : 1px solide # ad64e0 ;
border-left : 0px ;
border-right : 0px ;
border-bottom : 0px ;

/ *** Ajout CSS3 *** /

/ *** Sélecteurs de transition - Quelles sont les propriétés d'animer et combien de temps *** /
-Webkit-transition-property:-webkit-box-shadow, arrière-plan;
-Webkit-transition-durée: 0,25 s;

/ *** Ajout d'une petite ombre *** /
-Moz-box-shadow: 0px 0px 2px # 000 ;
-Webkit-box-shadow: 0px 0px 2px # 000 ;
}

Maintenant que nous avons les styles pour les entrées en place permet de styliser les événements hover pour ces mêmes entrées.

entrée: hover {
-Webkit-box-shadow: 0px 0px 4px # 000 ;
arrière-plan : # 9d39e1 ;
}

Certains d'entre vous ne l'ayez pas pris, mais j'ai augmenté le rayon de l'ombre au survol de 2px à 4px. C'est pourquoi nous avons utilisé les effets de transition sur les entrées car il déclenche ce changement sur le vol stationnaire.


Styling sur le bouton

Ok, nous avons presque terminé, sur le bouton! Depuis, nous avons donné notre bouton SOUMETTRE la classe, nous pouvons utiliser ce sélecteur dans notre CSS.

input.submit {
largeur : 100px ;
couleur : # fff ;
text-transform : uppercase ;
text-shadow : # 000 1px 1px ;
border-top : 1px solide # ad64e0 ;
margin-top : 10px ;
}

C'est tout! Maintenant vous avez un formulaire de connexion super stylé strictement avec CSS3 et pas d'images. Bien sûr, il ne fonctionne que dans les navigateurs webkit qui sont actuellement Safari et Chrome, mais CSS3 soutien viendra à un navigateur près de chez vous bientôt. Si vous avez aimé ce post s'il vous plaît faire la promotion ci-dessous!