Een effectformulier voor gestapeld papiereffect maken

Dit artikel maakt deel uit van ons "HTML5 / CSS3 Tutorials-serie" - toegewijd om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.

Aanmeldingsformulieren vormen een essentieel onderdeel van elke dynamische website. Ze bieden een mechanisme voor websitegebruikers om toegang te krijgen tot beperkte inhoud. In deze zelfstudie zullen we een groot aantal van de CSS3-functies verkennen, zoals tekstschaduw, doosschaduw, lineaire hellingen en overgangen om een eenvoudig en elegant aanmeldingsformulier te creëren met een gestapeld papier uiterlijk.

De bovenstaande afbeelding toont een voorbeeld van het inlogformulier dat we gaan bouwen. Klaar om in te duiken? Laten we beginnen!

1. Basic HTML-markup

De HTML-markup die we gaan gebruiken is heel eenvoudig, na de HTML5 Doctype-verklaring hebben we de en </code> -tags. Binnen de <code><body></code> tag, we hebben een <code><section></code> tag met een klasse van 'gestapeld'. Deze <code><section></code> tag wordt gebruikt om de breedte van het inhoudsvak te definiëren en om het uit te lijnen met het midden van de pagina. We gebruiken ook de klassenaam van deze tag om deze tag te targeten met behulp van CSS. EEN <code><form></code> tag volgt <code><section></code> label. De formuliertag heeft geen geldige waarde voor het kenmerk 'actie', omdat deze alleen wordt gebruikt voor demonstratiedoeleinden. In het formulierveld staan de verklaringen voor de e-mail- en wachtwoordlabels en het invoerveld, gevolgd door een verzendknop. Het belangrijke punt om hier op te merken is dat we een invoerveld hebben gebruikt met een soort 'e-mail'. Dit wordt ons geleverd door de HTML5-declaratie en deze degradeert elegant in een regulier tekstinvoerveld in oudere browsers.</p> <p>Dit is de volledige HTML-markering:</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Eenvoudig aanmeldingsformulier

  Log in
   E-mail  
   Wachtwoord

     En hier is een voorproefje van wat we tot nu toe hebben gemaakt:
  
 2. Basistijlen toevoegen
 Maak een nieuw css-bestand met de naam master.css en voeg een link naar dit bestand toe aan uw hoofd-HTML-bestand. We starten ons CSS-bestand met een snelle reset om uniformiteit in verschillende browsers te verkrijgen. Laten we ook een mooie achtergrondafbeelding toevoegen aan onze pagina. De afbeelding die ik heb gebruikt is overgenomen SubtlePatterns. Blader gerust op de site om een achtergrondafbeelding te vinden die bij u past. We kunnen de achtergrondafbeelding toevoegen met behulp van de volgende verklaring. Merk ook op dat ik de Open Sans lettertype uit Google Web Font voor de hoofdtekst.
  / * -------- Basisstijlen --------- * / body, html margin: 0; opvulling: 0;  body background: url ("https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") left top repeat; lettertype: 16px / 1,5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width: 400px; marge: 80 px auto; 
 3. Effect op gestapeld papier
 Nu we de basisindeling in gebruik hebben, kunnen we aan de slag gaan met het ontwerpen van het formulier. Voor het verkrijgen van het effect op gestapeld papier, zullen we gebruik maken van de :na en :voor pseudo-elementen. Deze pseudo-elementen worden meestal gebruikt voor het toevoegen van visuele effecten aan elke selector. 
 De :voor pseudo-element wordt gebruikt om inhoud toe te voegen vóór de inhoud van de selector en de :na pseudo-element voor na de inhoud van een selector. 
 We zullen beginnen door de sectie, met een klasse van 'gestapeld', een breedte van 400 px en een hoogte van 300 px te geven. Verder zullen we deze box een achtergrondkleur geven van # f6f6f6 en een 1-pixel-dikke rand met de kleur #bbb. De belangrijkste dingen om hier op te merken zijn de grensradiusverklaring en de doosschaduwverklaring. Hier zijn "-moz-" en "-webkit-" browser-voorvoegsels gebruikt om ervoor te zorgen dat dit werkt in gekko en webkit-gebaseerde browsers. 
 De grensradiusverklaring is heel eenvoudig en wordt gebruikt om afgeronde hoeken te maken, waarbij 3px de kromming voorstelt. De syntaxis voor de box-shadow-verklaring kan er gecompliceerd uitzien, maar laten we deze opsplitsen in kleinere stukjes om het beter te begrijpen. 
  / * -------- Border Radius --------- * / -webkit-border-radius: 3px; -moz-border-radius: 3px; grensradius: 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); vakschaduw: 0 0 3px rgba (0,0,0, .2);
 De eerste twee nullen geven de x-offset en de y-offset aan en de 3 px geeft de vervaging aan. De volgende is de kleurdeclaratie. Ik heb hier rgba-waarden gebruikt; rgba staat voor rood groen blauw en alpha (dekking). De 4 waarden binnen de haakjes geven dus de hoeveelheid rood, groen, blauw en de alpha aan (dekking).
  .gestapeld background: # f6f6f6; rand: 1px vast #bbb; hoogte: 300 px; marge: 50px auto; positie: relatief; breedte: 400 px; -webkit-box-shadow: 0 0 3px rgba (0,0,0, .2); -moz-box-shadow: 0 0 3px rgba (0,0,0, .2); vakschaduw: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; -moz-border-radius: 3px; grensradius: 3px; 
 Nu we het basisbegrenzingsvak voor het formulier hebben gemaakt, gaan we aan de slag met :na en :voor pseudo-elementen. 
  .gestapeld: after, .stacked: before background: # f6f6f6; border: 1px solid #aaa; onderkant: -8px; inhoud: "; 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); vakschaduw: 0 0 3px rgba (0,0,0, .2); -webkit-border-radius: 3px; - moz-border-radius: 3px; randradius: 3px; .stacked: before bottom: -14px; left: 5px; width: 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); vak -schaduw: 0 0 15px rgba (0,0,0,0.5);
 De code voor: na en: voordat pseudo-elementen vrijwel exact overeenkomen met die van het hierboven besproken begrenzingsvak. Het enige belangrijke om op te merken is dat deze pseudo-elementen absoluut gepositioneerd zijn ten opzichte van het begrenzingsvak. Elk van de pseudo-elementen wordt progressief met een paar pixels verlaagd om het een gestapeld papier uiterlijk te geven.
 4. Invoervelden
 In de HTML-markup hebben we een klasse van 'tekstinvoer' toegevoegd aan zowel het e-mailveld als het wachtwoordveld zodat we deze elementen gemakkelijk kunnen targeten met onze CSS-verklaringen. Dit is de CSS-verklaring die wordt toegepast op beide invoervelden.
  deel van de invoer van de kaart met de naam outline: 0; weergave: blok; breedte: 330 px; opvulling: 8px 15px; rand: 1px effen grijs; lettergrootte: 16px; font-gewicht: 400; -webkit-border-radius: 25px; -moz-border-radius: 25px; grensradius: 25px; box-shadow: inzet 0 2px 8px rgba (0,0,0,0.3); 
 Hier hebben we opnieuw gebruik gemaakt van de borderradius- en doosschaduwverklaringen. In het geval van tekstvelden krijgt de grensradius een hogere waarde om meer kromming te garanderen. In het geval van box-shadow-declaratie is de sleutelwoordinzet gebruikt om aan te geven dat de schaduw zich in het tekstveld zal bevinden. Hier is de verticale offset voor de schaduw 2 px en heeft deze een vervaging van 8 px, waarbij de kleur wordt gedeclareerd met behulp van het RGBA-formaat.
 Om wat interactiviteit toe te voegen aan de invoervelden, zullen we de box-shadow-eigenschap voor het invoerveld in de status 'zweven' wijzigen. De nieuwe box-shadow-declaratie heeft nul x- en y-verschuivingen maar heeft een vervaging van 5px, waarbij de kleur wordt gedeclareerd in rgba-formaat.
 5. Knop Verzenden
 Het laatste deel van dit formulier dat we moeten invullen, is de knop Verzenden. Net als bij het invoerveld geven we de knop Verzenden een straal van 25 px met behulp van de eigenschap border-radius. Een box-shadow-eigenschap met een y-offset van 1px is ook toegevoegd om de knop een te geven “innerlijke schaduw” effect.
  formulierinvoer [type = 'submit'] float: right; opvulling: 10px 20px; weergave: blok; cursor: pointer; lettergrootte: 16px; font-gewicht: 700; kleur: #fff; tekstschaduw: 0 1px 0 # 000; achtergrondkleur: # 0074CC; rand: 1px vast # 05C; -webkit-border-radius: 25px; -moz-border-radius: 25px; grensradius: 25px; achtergrondafbeelding: -moz-lineaire gradiënt (boven, # 08C, # 05C); achtergrondafbeelding: -ms-lineaire gradiënt (bovenaan, # 08C, # 05C); achtergrondafbeelding: -webkit-lineair verloop (bovenaan, # 08C, # 05C); achtergrondafbeelding: lineair verloop (bovenaan, # 08C, # 05C); -webkit-box-shadow: inzet 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow: inzet 0 1px 0px rgba (255, 255, 255, 0.5); box-shadow: inzet 0 1px 0px rgba (255, 255, 255, 0.5); 
 Het belangrijkste om op te merken is de verklaring voor het toevoegen van het verloop aan deze knop. CSS3-gradiënten is een vrij groot onderwerp en we zullen alleen maar aan het oppervlak krabben. Voor deze submit-knop voegen we een lineair verloop toe van # 08C tot # 05C. Zoals met alle andere CSS3-eigenschappen die we tot nu toe hebben gebruikt, zullen we voorvoegsels "-moz", "-webkit" en "-ms" toevoegen om ervoor te zorgen dat het verloop in verschillende browsers werkt.
 6. Demo en downloaden
 Ons inlogformulier is nu compleet. Bekijk de demo om te zien hoe het ingevulde formulier er uitziet. Als je op een bepaald moment verdwaald bent of de tutorial niet kunt volgen, maak je geen zorgen, download de bestanden gewoon naar je bureaublad en speel met de bestaande CSS-code om te begrijpen hoe het werkt.
 Ik hoop dat je deze tutorial leuk vond. Voel je vrij om met deze functies te experimenteren en vergeet niet om je gedachten te delen.
 demonstratie
 Download bestanden
 
Opmerking van de uitgever: Dit bericht is geschreven door Bharani M voor Hongkiat.com. Bharani is een ontwerper / ontwikkelaar uit New Delhi, India. Hij werkt momenteel aan Resumonk.com - een online CV-maker die je helpt om binnen enkele minuten een professioneel en mooi CV te maken. Bekijk ook zijn nevenproject - Quotescube.com - uw dagelijkse dosis offertes.