Création d'un formulaire de connexion d'effet sur papier empilé

Cet article fait partie de notre "Série de tutoriels HTML5 / CSS3" - dédié à vous aider à faire de vous un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

Les formulaires de connexion sont une partie essentielle de tout site Web dynamique. Ils fournissent aux utilisateurs de sites Web un mécanisme leur permettant d’accéder à un contenu restreint. Dans ce didacticiel, nous allons explorer de nombreuses fonctionnalités CSS3 telles que l'ombre sur le texte, l'ombre de la boîte, les dégradés linéaires et les transitions pour créer un formulaire de connexion simple et élégant avec un aspect de papier empilé..

L'image ci-dessus montre un aperçu du formulaire de connexion que nous allons créer. Prêt à plonger? Commençons!

1. Balisage HTML de base

Le balisage HTML que nous allons utiliser est très simple. Après la déclaration de Doctype HTML5, nous avons le et </code> Mots clés. Dans le <code><body></code> tag, nous avons un <code><section></code> balise avec une classe de 'empilés'. Ce <code><section></code> La balise est utilisée pour définir la largeur de la zone de contenu et l’aligner au centre de la page. Nous utiliserons également le nom de classe de cette balise pour cibler cette balise à l'aide de CSS. UNE <code><form></code> la balise suit <code><section></code> étiquette. La balise de formulaire n'a pas de valeur valide pour l'attribut 'action', car elle est uniquement utilisée à des fins de démonstration. À l'intérieur du champ de formulaire se trouvent les déclarations des étiquettes d'email et de mot de passe et du champ de saisie, suivies d'un bouton d'envoi. Le point important à noter ici est que nous avons utilisé un champ de saisie avec un type de "courrier électronique". Ceci nous est fourni par la déclaration HTML5 et se dégrade gracieusement en un champ de saisie de texte normal dans les anciens navigateurs..</p> <p>Voici le balisage HTML complet:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Formulaire de connexion simple

  S'identifier
   Email  
   Mot de passe

     Et voici un aperçu de ce que nous avons créé jusqu'à présent:
  
 2. Ajouter des styles de base
 Créez un nouveau fichier css appelé master.css et ajoutez un lien vers ce fichier dans votre fichier HTML principal. Nous allons commencer notre fichier CSS avec une réinitialisation rapide pour obtenir une uniformité sur différents navigateurs. Ajoutons également une belle image de fond à notre page. L'image que j'ai utilisée a été prise à partir de Modèles subtils. N'hésitez pas à parcourir le site pour trouver une image de fond qui correspond à vos goûts. Nous pouvons ajouter l'image de fond à l'aide de la déclaration suivante. Notez également que j'utilise le Open Sans police de Google Web Font pour le corps du texte.
  / * -------- Styles de base --------- * / body, html margin: 0; rembourrage: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") à gauche en haut répéter; police: 16px / 1.5 "Open Sans", Helvetica, Arial, sans serif;  div.wrap width: 400px; marge: auto 80px; 
 3. Effet papier superposé
 Maintenant que la structure de base est opérationnelle, commençons par la conception du formulaire. Pour obtenir l’effet de papier empilé, nous allons utiliser le :après et :avant pseudo-éléments. Ces pseudo-éléments sont principalement utilisés pour ajouter des effets visuels à n’importe quel sélecteur.. 
 le :avant Le pseudo-élément est utilisé pour ajouter du contenu avant le contenu du sélecteur et le :après pseudo-élément pour après le contenu d'un sélecteur. 
 Nous allons commencer par donner à la section, avec une classe de "empilés", une largeur de 400px et une hauteur de 300px. De plus, nous allons donner à cette zone une couleur de fond de # f6f6f6 et une bordure de 1 pixel d'épaisseur avec la couleur #bbb. Les éléments clés à noter ici sont la déclaration border-radius et la déclaration box-shadow. Ici, les préfixes de navigateur "-moz-" et "-webkit-" ont été utilisés pour garantir que cela fonctionne dans les navigateurs basés sur gecko et webkit.. 
 La déclaration border-radius est très simple et permet de créer des angles arrondis, 3px représentant la courbure. La syntaxe de la déclaration box-shadow peut paraître compliquée, mais décomposons-la en fragments plus petits pour mieux la comprendre.. 
  / * -------- Rayon de la bordure --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; / * -------- Box Shadow --------- * / -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2);
 Les deux premiers zéro indiquent le décalage x et le décalage y et le 3px indique le flou. Vient ensuite la déclaration de couleur. J'ai utilisé les valeurs de rgba ici; rgba signifie rouge vert bleu et alpha (opacité). Ainsi, les 4 valeurs entre parenthèses indiquent la quantité de rouge, de vert, de bleu et son alpha (opacité).
  .stacked background: # f6f6f6; bordure: 1px solide #bbb; hauteur: 300px; marge: auto 50px; position: relative; largeur: 400px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; 
 Maintenant que nous avons créé le cadre de sélection de base pour le formulaire, commençons par le :après et :avant pseudo-éléments. 
  .stacked: after, .stacked: before background: # f6f6f6; bordure: 1px solide #aaa; en bas: -8px; content: "; height: 250px; left: 2px; position: absolute; width: 394px; z-index: -10; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); - moz-box-shadow: 0 0 3px rgba (0,0,0, .2); box-shadow: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; border-radius: 3px;. empilés: avant en bas: -14px; à gauche: 5px; largeur: 388px; -webkit-border-radius: 3px; -moz-border-radius: 3px ; border-radius: 3px; -webkit-box-shadow: 0 0 15px rgba (0,0,0,0.5); -moz-box-shadow: 0 0 15px rgba (0,0,0,0,5); box -shadow: 0 0 15px rgba (0,0,0,0,5);
 Le code pour les pseudo-éléments: after et: before est presque identique à celui du cadre de sélection décrit ci-dessus. La seule chose importante à noter ici est que ces pseudo-éléments sont positionnés absolument par rapport à la boîte englobante. Chacun des pseudo-éléments est progressivement réduit de quelques pixels pour lui donner un aspect papier empilé.
 4. Champs de saisie
 Dans le balisage HTML, nous avons ajouté une classe de "saisie de texte" aux champs email et mot de passe pour nous permettre de cibler facilement ces éléments avec nos déclarations CSS. Voici la déclaration CSS appliquée aux deux champs de saisie.
  formulaire input.text-input contour: 0; bloc de visualisation; largeur: 330px; rembourrage: 8px 15px; bordure: 1px gris uni; taille de police: 16px; poids de la police: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; box-shadow: encart 0 2 pixels 8 pixels rgba (0,0,0,0,3); 
 Ici encore, nous avons utilisé les déclarations border-radius et box-shadow. Dans le cas des champs de texte, le rayon de la bordure reçoit une valeur plus élevée pour assurer davantage de courbure. Dans le cas d'une déclaration box-shadow, le mot-clé insert a été utilisé pour spécifier que l'ombre sera à l'intérieur du champ de texte. Ici, le décalage vertical de l'ombre est de 2 pixels et le flou est de 8 pixels, la couleur étant déclarée au format rgba..
 Pour ajouter une certaine interactivité aux champs de saisie, nous allons modifier la propriété box-shadow du champ de saisie en état de survol. La nouvelle déclaration box-shadow a des décalages x et y nuls, mais a un flou de 5 pixels, la couleur étant déclarée au format rgba.
 5. Bouton Soumettre
 La dernière partie de ce formulaire que nous devons compléter est le bouton Soumettre. Semblable au champ de saisie, nous allons donner au bouton de soumission un rayon de 25px en utilisant la propriété border-radius. Une propriété box-shadow avec un décalage y de 1px a également été ajoutée pour donner au bouton une “ombre intérieure” effet.
  entrée de formulaire [type = 'submit'] float: right; rembourrage: 10px 20px; bloc de visualisation; curseur: pointeur; taille de police: 16px; poids de police: 700; couleur: #fff; ombre du texte: 0 1px 0 # 000; couleur de fond: # 0074CC; bordure: 1px solide # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; image d'arrière-plan: -moz-linear-gradient (top, # 08C, # 05C); image d'arrière-plan: -ms-linear-gradient (top, # 08C, # 05C); image d'arrière-plan: -webkit-linear-gradient (en haut, n ° 08C, n ° 05C); image d'arrière-plan: dégradé linéaire (haut, # 08C, # 05C); -webkit-box-shadow: encart 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow: encart 0 1px 0px rgba (255, 255, 255, 0.5); box-shadow: encart 0 1px 0px rgba (255, 255, 255, 0.5); 
 La chose importante à noter ici est la déclaration pour ajouter le dégradé à ce bouton. Les dégradés CSS3 sont un sujet assez vaste et nous ne ferons que gratter la surface. Pour ce bouton d'envoi, nous allons ajouter un dégradé linéaire allant de # 08C à # 05C. Comme pour toutes les autres propriétés CSS3 que nous avons utilisées jusqu'à présent, nous ajouterons les préfixes de fournisseur "-moz", "-webkit" et "-ms" afin de garantir le bon fonctionnement du dégradé sur différents navigateurs..
 6. Démo et téléchargement
 Notre formulaire de connexion est maintenant complet. Consultez la démo pour voir à quoi ressemble le formulaire rempli. Si vous êtes perdu à tout moment ou si vous ne parvenez pas à suivre le didacticiel, ne vous inquiétez pas, téléchargez simplement les fichiers sur votre bureau et modifiez le code CSS existant pour comprendre son fonctionnement..
 Nous espérons que vous avez apprécié ce tutoriel. N'hésitez pas à expérimenter avec ces fonctionnalités et n'oubliez pas de partager vos impressions.
 Démo
 Telecharger des fichiers
 
Note de l'éditeur: Cet article est écrit par Bharani M pour Hongkiat.com. Bharani est un concepteur / développeur de New Delhi, en Inde. Il travaille actuellement sur Resumonk.com - un constructeur de CV en ligne qui vous aide à créer un CV professionnel et magnifique en quelques minutes. Découvrez également son projet parallèle - Quotescube.com - votre dose quotidienne de citations.