Hallo allemaal. We hebben dus een paar elementen geleerd om vormen te creëren. Het is tijd om onze kennis te combineren om een groter probleem op te lossen. Laten we het eenvoudigste autorisatieformulier op de site maken. Om dit te doen, hebben we twee velden nodig, we maken er handtekeningen aan en voegen er handtekeningen aan toe.
Het eerste veld is voor de login, het tweede is voor het wachtwoord. En bij de tweede is het niet zo eenvoudig. Omdat het op dit moment slechts een tekstinvoerveld is.
Resultaat in browser:
Om de daarin ingevoerde tekst te laten vervangen door sterretjes, zoals gebruikelijk is voor een veld van dit type, moet u één eenvoudige handeling uitvoeren. Namelijk om de attribuutwaarde te vervangen type op wachtwoord:
Resultaat: 
Knop voor het verzenden van formulieren
Alsjeblieft. Ons formulier is bijna klaar. Om de creatie ervan te voltooien, moet u nu een knop maken die zal worden gebruikt om het formulier in te dienen. Het probleem wordt opgelost met behulp van een tag met soort indienen.
Als de knop een soort inscriptie moet hebben, dan kan dit worden gedaan met behulp van het attribuut waarde. Het is aan jou om al dan niet een naam aan de knop toe te wijzen; als je dit doet, ontvangt de server deze naam, evenals de waarde van de knop.
In de regel is de naam van een formulierverzendknop nodig als het formulier meerdere knoppen heeft, die elk een specifieke actie uitvoeren. Dankzij dit begrijpt de server, die de naam en waarde van de knop van de browser ontvangt, op welke knop de gebruiker heeft geklikt en wat er dienovereenkomstig moet gebeuren.
Als gevolg hiervan is de code voor ons formulier als volgt:
Resultaat in browser: 
Hallo, lieve habravriend! In deze tutorial leren we hoe u twee HTML5-formulieren kunt maken: een inlogformulier en een registratieformulier. Deze vormen zullen met elkaar worden uitgewisseld met behulp van de CSS3:target pseudo-klasse. We zullen CSS3 en een pictogramlettertype gebruiken. Het idee van deze demo is om de gebruiker een inlogformulier te laten zien en hem een ‘ga naar’-link naar het registratieformulier te geven.
In deze tutorial zal ik in detail vertellen hoe je een effect kunt creëren zoals in Demo 1.
HTML
Ben je al lid? Ga en log in verbergt automatisch wat de gebruiker typt en vervangt tekens door punten of sterretjes (afhankelijk van de browser). Element typ=e-mail Hiermee kan de browser controleren of het e-mailadres correct is opgemaakt. Daarnaast hebben we de parameter gebruikt vereisen=vereist; Browsers die deze instelling ondersteunen, staan de gebruiker niet toe het formulier in te dienen totdat het veld is ingevuld; JavaScript is hier niet vereist. Parameter automatisch aanvullen=aan zal automatisch enkele velden invullen. We hebben ook alt-tekst gebruikt om de gebruiker te helpen het formulier in te vullen.
Nu ongeveer twee lastige punten. Je hebt waarschijnlijk twee links opgemerkt aan het begin van het formulier. Met deze handige truc kan ons formulier zich correct gedragen bij het werken met ankers.
Het tweede punt heeft betrekking op het gebruik van een lettertype met pictogrammen. We zullen data-attribuut gebruiken om de pictogrammen weer te geven. Parameter instellen data-icon=”icon_character” Met de overeenkomstige tekens in de HTML hoeven we in CSS slechts één regel toe te wijzen om alle pictogrammen op te maken. U kunt meer over deze techniek lezen op de website: 24 manieren: pictogrammen weergeven met lettertypen en gegevensattributen.
CSS
Voor de zuiverheid van de code sla ik dit over basisparameters(html, body, etc.), maar je kunt ze vinden in de bronbestanden. Nogmaals, ik gebruik CSS3-technieken die niet in alle browsers werken. Dus laten we aan de slag gaan!Formulieren opmaken met CSS3
Laten we eerst onze formulieren een basisstijl geven.#subscribe, #login( positie: absoluut; bovenaan: 0px; breedte: 88%; opvulling: 18px 6% 60px 6%; marge: 0 0 35px 0; achtergrond: rgb(247, 247, 247); rand: 1px effen rgba(147, 184, 189,0.8); box-schaduw: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inzet; z-index: 22 )
Hier zullen we eigenschappen voor de header toewijzen:
/**** tekst ****/ #wrapper h1( lettergrootte: 48px; kleur: rgb(6, 106, 117); opvulling: 2px 0 10px 0; lettertypefamilie: "FranchiseRegular", "Arial Narrow ",Arial,sans-serif; lettertype-gewicht: vet; tekst-uitlijning: gecentreerd; opvulling-onder: 30px; ) /** Momenteel ondersteunt alleen webkit achtergrond-clip:tekst; **/ #wrapper h1( achtergrond: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); " "; weergave: blokbreedte: 100%; hoogte: 2px; achtergrond: lineair verloop (links, rgba(147.184.189,0) 0%, rgba(147.184.189,0,8) 20% 147.184.189,1) 53%, rgba( 147.184.189,0,8) 79%, rgba(147.184.189,0) 100%));
Houd er rekening mee dat er momenteel alleen browsers zijn met webkit-ondersteuning achtergrondclip: tekst, dus we maken een gestreepte achtergrond die alleen voor webkits geschikt is en koppelen deze aan de H1-header. Sinds de parameter achtergrondclip: tekst werkt alleen in Webkit-browsers, ik besloot alleen met webkit-eigenschappen te werken. Daarom heb ik de CSS in twee delen gesplitst en alleen het webkit-verloop gebruikt. U moet echter niet alleen webkit op uw websites gebruiken! Dus bijvoorbeeld de parameter -webkit-tekst-vulkleur: transparant staat ons toe een transparante achtergrond te hebben, maar alleen voor webkit-browsers zullen alle andere browsers deze eigenschap negeren.
We hebben ook een dunne lijn onder de titel gemaakt met behulp van het :after pseudo-class-element. We gebruikten een verloop met een hoogte van 2px en verminderden de dekking aan de randen tot nul.
Laten we nu voor de invoervelden zorgen en ze er mooi uit laten zien.
/**** geavanceerde invoerstijl ****/ /* placeholder */ ::-webkit-input-placeholder ( kleur: rgb(190, 188, 188); lettertype: cursief; ) input:-moz- placeholder, textarea:-moz-placeholder( kleur: rgb(190, 188, 188); lettertype: cursief; ) input ( overzicht: geen; )
Eerst gaan we de marges stylen en de streek verwijderen. Maar wees voorzichtig: de omtrek helpt de gebruiker te begrijpen op welk veld hij zich bevindt. Als u het verwijdert, moet u de eigenschappen toepassen: actief en: focus.
/* alle velden zijn exclusief indienen en selectievakje */ #wrapper input:not())( breedte: 92%; marge-top: 4px; opvulling: 10px 5px 10px 32px; rand: 1px effen rgb(178, 178, 178); box -size: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) overgang: alles 0.2s lineair; focus(rand: 1px effen rgba(91, 90, 90, 0.7); achtergrond: rgba(238, 236, 240, 0.2); vakschaduw: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inzet )
Hier hebben we de pseudo-klasse:not gebruikt om alle velden op te maken, behalve de selectievakjes. Bovendien besloot ik de streek te verwijderen en de eigenschappen:focus en:actief toe te voegen.
Nu is het tijd om plezier te hebben: lettertype met pictogrammen. Omdat we de :before en :after pseudo-klassen niet kunnen gebruiken, voegen we het pictogram toe aan de labelparameter en plaatsen het vervolgens in het veld. Ik zal de fontomas-bibliotheek gebruiken. Je kunt de iconen zelf matchen met de bijbehorende letter. Onthoud attribuut data-icoon? Hier moet u de brief invoegen. Ik gebruikte data-icon=’u’ voor inloggen, 'e' voor e-mail, 'p' voor wachtwoord. Nadat ik de letters had geselecteerd, heb ik het lettertype gedownload en de lettertypegenerator Fontsquirrel gebruikt om het te converteren naar een formaat dat geschikt is voor @font-face.
@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); lettertypegewicht: normaal; lettertypestijl: normaal; ) /** goocheltruc! **/ :after ( inhoud: attr(data-icon); lettertypefamilie: "FontomasCustomRegular"; kleur: rgb(106, 159, 171); positie: absoluut; links: 10px; boven: 35px; breedte: 30px; )
Dat is alles. U hoeft niet voor elk pictogram een aparte klasse te hebben. We hebben de parameter gebruikt inhoud: attr(data-icoon) om de letter uit het data-icon attribuut te halen. We hoeven dus alleen een lettertype toe te wijzen, een kleur te selecteren en een pictogram te plaatsen.
Laten we nu regels toewijzen aan de knop voor het verzenden van formulieren.
/*stijl beide knoppen*/ #wrapper p.button input( breedte: 30%; cursor: aanwijzer; achtergrond: rgb(61, 157, 179); opvulling: 8px 5px; lettertypefamilie: "BebasNeueRegular", "Arial Narrow ",Arial,sans-serif; kleur: #fff; lettergrootte: 24px; rand: 1px effen rgb(28, 108, 122); marge-onder: 10px; tekst-schaduw: 0 1px 1px rgba(0, 0 , 0, 0,5); randradius: 3px; vakschaduw: 0px 1px 6px 4px rgba(0, 0, 0, 0,07) inzet, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb (210, 210, 210); overgang: allemaal 0,2s lineair; ) #wrapper p.button input:hover( achtergrond: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. knopinvoer: focus( achtergrond: rgb(40, 137, 154); positie: relatief; boven: 1px; rand: 1px effen rgb(12, 76, 87); vakschaduw: 0px 1px 6px 4px rgba(0, 0 , 0, 0.2) inzet; ) p.login.button, p.signin.button( tekst uitlijnen: rechts; marge: 5px 0; )
De truc is om box-shadow te gebruiken om meerdere frames te maken. Je kunt uiteraard slechts één frame gebruiken, maar je kunt er ook meerdere gebruiken. We zullen de lengteparameter gebruiken om een “nep” tweede witte rand te maken, 3px breed, zonder vervaging.
Laten we nu het selectievakje vormgeven, we zullen hier niets ongewoons doen:
/* stijl het selectievakje "Onthoud mij"*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) . keeplogin input#loginkeeping( marge-rechts: 5px; ) .keeplogin label( breedte: 80%; )
De formuliervoettekst opmaken met behulp van veelvouden lineaire gradiënten om een gestreept verloop te creëren.
P.change_link( positie: absoluut; kleur: rgb(127, 124, 124); links: 0px; hoogte: 20px; breedte: 440px; opvulling: 17px 30px 20px 30px; lettergrootte: 16px; tekstuitlijning: rechts; randboven: 1px effen rgb(219, 229, 232); randradius: 0 0 5px 5px; achtergrond: rgb(225, 234, 235); 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); weergave: inline-blok; lettertype-gewicht: vet; achtergrond: rgb(247, 248, 241); opvulling: 2px 6px; kleur: rgb(29, 162, 193); randradius: 4px; rand: 1px effen rgb(74, 179,); 198) #wrapper p.change_link a:active( positie: relatief; boven: 1px; )
Nu kun je zien dat we twee mooie vormen hebben, maar we willen er maar één laten zien. Het is tijd voor animatie!
Animatie maken
Het eerste dat we gaan doen is de tweede vorm verbergen door de dekking op 0 te zetten:#register( z-index: 21; dekking: 0; )
Weet je nog dat het inlogformulier een z-index heeft: 22? Voor het tweede formulier wijzen we deze parameter toe aan 21 om deze “onder” het inlogformulier te plaatsen.
Nu het leuke gedeelte: we wisselen de formulieren uit met behulp van de pseudoklasse:target. Je moet één ding begrijpen over :target: we zullen ankers gebruiken om het te verplaatsen. Het normale gedrag van een anker is om naar een specifiek pagina-element te springen. Maar dat willen we niet, we willen alleen de vormen verwisselen. Dit is waar onze truc om twee links bovenaan de pagina te gebruiken te hulp komt. In plaats van ons rechtstreeks naar de tweede vorm te leiden en het sprongeffect te riskeren, geven we de links een parameter weergave: geen. Dit helpt springen te voorkomen. Ik ontdekte deze truc op de site: CSS3 create (Frans).
#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; animatienaam: fadeInLeft; animatie-vertraging: .1s; )
Dit is wat er gebeurt: wanneer we op de knop klikken Meedoen, we gaan naar #toregistreren. Dan vindt de animatie plaats en pas dan gaan we naar het element #register. We gebruiken een animatie genaamd fadeInLinks. Omdat we de vorm ‘verbergen’ zonder transparantie, passen we een animatie toe die geleidelijk verschijnt. We hebben ook de z-index gewijzigd, zodat deze bovenop de andere vorm verschijnt. Hetzelfde gebeurt voor de andere vorm.
Hier is de code voor de animatie. We gebruikten het CSS3-animatieframework van Dan Eden en pasten dit raamwerk aan voor onze tutorial.
Animate( animatieduur: 0,5s; animatietimingfunctie: gemak; animatie-vulmodus: beide; ) @keyframes fadeInLeft ( 0% ( dekking: 0; transformeren: translateX(-20px); ) 100% ( dekking : 1; transformeren: vertalenX(0);
De vorm die "verdwijnt" heeft een vervagingsanimatie aan de linkerkant:
#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animatienaam: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( dekking: 1; transformeren: translateX(0); ) 100% ( dekking : 0; transformeren: vertalenX(-20px);
Je kunt nu andere animaties uit het animate.css-bestand van Dan Eden gebruiken: verander gewoon de klasse .animate en de animatienamen. Aan het einde van het bestand animate-custom.css vindt u ook verschillende andere animaties.
Dat is alles, vrienden. Ik hoop dat je deze tutorial leuk vond!
Houd er rekening mee dat in sommige browsers de optie achtergrondclip: tekst niet ondersteund. Animaties werken niet in Internet Explorer 9. In Internet Explorer 8 en lager wordt de pseudo-class:target pseudo-class niet ondersteund, dus dit effect zal daar helemaal niet werken.
P.S. Eventuele opmerkingen over de vertaling ontvang ik graag in een persoonlijk bericht. Bedankt!
Tags: tags toevoegen
We zullen het opmaken met behulp van CSS3 en een pictogramlettertype. Het idee achter deze demo is om de gebruiker het inlogformulier te laten zien en een link te bieden waarmee hij naar het registratieformulier kan ‘overschakelen’.
Merk op dat dit alleen voor demodoeleinden is, het werkt alleen in een browser die de:target pseudo-klasse ondersteunt, en u mag deze code niet gebruiken op een live website zonder een solide terugval te bieden.
Hieronder doorlopen we demo 1.
De HTML-code
In de HTML plaatsen we beide formulieren en verbergen we de tweede met CSS. Hier is de code. Ik zal later enkele interessante delen uitleggen.
We hebben hier wat HTML5-goedheid toegevoegd en enkele nieuwe invoer gebruikt. De invoer Ga en log in verbergt automatisch wat de gebruiker typt en vervangt dit door punten (afhankelijk van de browser). De invoer typ=e-mail Hiermee kan de browser controleren of wat de gebruiker heeft ingevoerd het formaat heeft van een geldig e-mailadres. Wij hebben ook gebruik gemaakt van de vereisen=vereist attribuut; Browsers die dit attribuut ondersteunen, laten de gebruiker het formulier pas indienen als dit veld is ingevuld. JavaScript is niet vereist.
De automatisch aanvullen=aan attribuut vult waarden vooraf in op basis van eerdere gebruikersinvoer. We hebben ook een aantal leuke tijdelijke aanduidingen voor de invoer gebruikt die enige richtwaarde zullen tonen als de invoer niet is gevuld.
Nu de twee lastige delen. Misschien heb je de twee opgemerkt links bovenaan het formulier. Dit is een kleine truc die ervoor zorgt dat ons formulier zich goed gedraagt bij het spelen met ankers, zodat het niet op lange pagina's "springt" wanneer we op de schakellink klikken en de:target pseudo-klasse activeren.
Het tweede kleine trucje heeft te maken met het gebruik van het pictogramlettertype. We zullen een data-attribuut gebruiken om de pictogrammen weer te geven. Door in te stellen data-icon=”icon_character” met het overeenkomstige teken in de HTML hebben we slechts één CSS-attribuutselector nodig om alle pictogrammen te stylen. Lees meer over deze techniek op 24 manieren: pictogrammen weergeven met lettertypen en gegevenskenmerken.
De CSS
Voor de duidelijkheid van de code in deze tutorial zal ik alle leveranciersvoorvoegsels weglaten, maar je vindt ze uiteraard wel in de bestanden. Nogmaals, ik gebruik een aantal behoorlijk geavanceerde CSS3-trucs die mogelijk niet in alle browsers werken. Laten we beginnen.
Stijl beide formulieren met behulp van CSS3
Laten we eerst onze twee vormen een algemene stijl voor de container geven.
#subscribe, #login( positie: absoluut; bovenaan: 0px; breedte: 88%; opvulling: 18px 6% 60px 6%; marge: 0 0 35px 0; achtergrond: rgb(247, 247, 247); rand: 1px effen rgba(147, 184, 189,0.8); vakschaduw: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inzet; z-index: 22 )
We hebben een mooie doosschaduw toegevoegd die uit twee schaduwen bestaat: een inzet om de binnenste blauwe gloed te creëren, en een buitenste schaduw. We zullen de z-index even uitleggen.
Hieronder zullen we de koptekst opmaken met wat achtergrondknipsel:
/**** algemene tekststijl ****/ #wrapper h1( lettergrootte: 48px; kleur: rgb(6, 106, 117); opvulling: 2px 0 10px 0; lettertypefamilie: "FranchiseRegular"," Arial Narrow",Arial,sans-serif; lettertype-gewicht: vet; tekst-uitlijning: gecentreerd; opvulling-onder: 30px; ) /** Momenteel ondersteunt alleen webkit de achtergrond-clip:text; */ #wrapper h1( achtergrond: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb (64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparant; "; weergave:blok; breedte:100%; hoogte:2px; marge-boven:10px; achtergrond: lineair verloop(links, rgba(147.184.189,0) 0%, rgba(147.184.189.0.8) 20%, rgba(147.184.189 ,1) 53%, rgba(147.184.189,0,8) 79%, rgba(147.184.189,0) 100%);
Houd er rekening mee dat op dit moment alleen webkit-browsers ondersteuning bieden achtergrondclip: tekst, dus we zullen hier alleen een gestripte achtergrond voor webkit maken en deze aan de tekst knippen om de strepen aan de H1-titel toe te voegen. Sinds de achtergrondclip: tekst property werkt momenteel alleen in Webkit-browsers, ik heb besloten alleen met het webkit-voorvoegsel te werken. Dat is de reden waarom ik de CSS-declaratie in twee delen heb gesplitst en alleen een verloop met een webkit-voorvoegsel gebruik. Alleen het gebruik van het voorvoegsel –webkit- is een slechte gewoonte, het is alleen voor demodoeleinden en u zou dit nooit op een echte website moeten doen! Dat is ook waar de -webkit-tekst-vulkleur: transparant komt goed van pas: het stelt ons in staat om alleen een transparante achtergrond te hebben in de webkit-browsers, alle andere zullen deze negeren en ons de opgegeven tekstkleur teruggeven.
We hebben ook een vervagingslijn onder de titel gemaakt met behulp van de:after pseudo-klasse. We gebruiken een hoogteverloop van 2px en vervagen de achtergrond aan beide uiteinden tot een dekking van 0.
Laten we nu onze input stylen en ze een mooier uiterlijk geven.
/**** geavanceerde invoerstijl ****/ /* placeholder */ ::-webkit-input-placeholder ( kleur: rgb(190, 188, 188); lettertype: cursief; ) input:-moz- placeholder, textarea:-moz-placeholder( kleur: rgb(190, 188, 188); lettertype: cursief; ) input ( overzicht: geen; )
Eerst stylen we de invoer en verwijderen we de omtrek. Maar wees hier voorzichtig; De omtrek helpt de gebruiker te weten welke invoer de focus heeft, dus als u deze verwijdert, moet u een aantal:active- en:focus-statussen voor de invoer opgeven.
/* alle invoer behalve indienen en selectievakje */ #wrapper input:not())( breedte: 92%; marge-top: 4px; opvulling: 10px 5px 10px 32px; rand: 1px effen rgb(178, 178, 178) ; box-sizing: inhoud-box; grensradius: 3px; box-shadow: 0px 1px 0px rgba(168, 168, 168, 0.6) overgang: allemaal 0,2s lineair; :focus( rand: 1px effen rgba(91, 90, 90, 0.7); achtergrond: rgba(238, 236, 240, 0.2); vakschaduw: 0px 1px 4px 0px rgba( 168, 168, 168, 0.9) inzet )
Hier hebben we de:not pseudo-klasse gebruikt om alle invoer op te maken, behalve het selectievakje. Ik heb de status:focus en:active opgegeven, omdat ik besloot de omtrek te verwijderen.
En nu het leuke gedeelte: het pictogramlettertype. Omdat we:before en:after pseudo-klassen bij invoer niet kunnen gebruiken, zullen we een beetje vals moeten spelen: we voegen het pictogram toe aan het label en plaatsen het vervolgens in de invoer. Ik gebruik de fontomas-bibliotheek die een aantal mooie pictogrammen samenstelt. U kunt ze opnieuw rangschikken om het pictogram op een specifieke letter in te stellen. Onthoud de data-icoon attribuut? Hier moet je de brief neerleggen. Ik gebruikte data-icon=’u’ voor gebruiker, ‘e’ voor e-mail, ‘p’ voor wachtwoord. Nadat ik de letters had gekozen, heb ik het lettertype gedownload en de fontsquirrel-lettertypegenerator gebruikt om het om te zetten in een @font-face-compatibel formaat.
@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); lettertype-gewicht: normaal; lettertype-stijl: normaal; ) /** de magische pictogramtruc! **/ :after ( inhoud: attr(data-icon); lettertypefamilie: "FontomasCustomRegular"; kleur: rgb(106, 159, 171); positie: absoluut; links: 10px; boven: 35px; breedte: 30px; )
Ja, dat is het mensen, je hoeft niet voor elk pictogram een klasse te hebben. Wij gebruikten inhoud: attr(data-icoon) om de letter uit het data-icon attribuut op te halen, dus we hoeven alleen het lettertype aan te geven, een mooie kleur te kiezen en deze te positioneren.
Laten we nu de verzendknop voor beide formulieren vormgeven.
/*stijling van beide verzendknoppen */ #wrapper p.button input( breedte: 30%; cursor: aanwijzer; achtergrond: rgb(61, 157, 179); opvulling: 8px 5px; lettertypefamilie: "BebasNeueRegular", "Arial Narrow",Arial,sans-serif; kleur: #fff; lettergrootte: 24px; rand: 1px effen rgb(28, 108, 122); marge-onder: 10px; tekst-schaduw: 0 1px 1px rgba(0, 0, 0, 0,5); randradius: 3px; vakschaduw: 0px 1px 6px 4px rgba(0, 0, 0, 0,07) inzet, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); overgang: allemaal 0,2s lineair; ) #wrapper p.button input:hover( achtergrond: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p .knopinvoer: focus (achtergrond: rgb(40, 137, 154); positie: relatief; boven: 1px; rand: 1px effen rgb(12, 76, 87); vakschaduw: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inzet; ) p.login.button, p.signin.button( tekst uitlijnen: rechts; marge: 5px 0; )
De truc hier is om de doosschaduw te gebruiken om wat extra randen te creëren. Je kunt slechts één rand gebruiken, maar zoveel box-shadows als je wilt. We gebruiken de lengtewaarde om een “nep” tweede witte rand te maken, 3px breed, zonder vervaging.
Vervolgens gaan we het selectievakje vormgeven, niets bijzonders hier:
/* het selectievakje "houd mij aangemeld" opmaken*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: cursief; ) .keeplogin input#loginkeeping( marge-rechts: 5px; ) .keeplogin label( breedte: 80%; )
We zullen de onderkant van het formulier vormgeven met herhalende lineaire verlopen om een gestreepte achtergrond te creëren.
P.change_link( positie: absoluut; kleur: rgb(127, 124, 124); links: 0px; hoogte: 20px; breedte: 440px; opvulling: 17px 30px 20px 30px; lettergrootte: 16px; tekstuitlijning: rechts; randboven: 1px effen rgb(219, 229, 232); randradius: 0 0 5px 5px; achtergrond: rgb(225, 234, 235); 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); weergave: inline-blok; lettertype-gewicht: vet; achtergrond: rgb(247, 248, 241); opvulling: 2px 6px; kleur: rgb(29, 162, 193); randradius: 4px; rand: 1px effen rgb(74, 179,); 198) #wrapper p.change_link a:active( positie: relatief; boven: 1px; )
Nu zul je merken dat we twee mooie formulieren hebben, maar we willen er eigenlijk maar één tegelijk laten zien. Dus nu is het tijd voor wat animaties!!
Het maken van de schakelanimatie
Het eerste dat u moet doen, is het tweede formulier verbergen door de dekking op 0 te zetten:
#register( z-index: 21; dekking: 0; )
Weet je nog dat ons inlogformulier een z-index van 22 had? We geven het tweede formulier een z-index van 21, om het “onder” het inlogformulier te plaatsen.
En nu het echt goede deel: het wisselen van formulieren met behulp van de:target pseudo-klasse. Wat je echt moet begrijpen over:target, is dat we ankers zullen gebruiken om de transitie te maken. Het normale gedrag van een ankerlink is om naar het doel op de pagina te springen. Maar we willen nergens heen springen, we willen alleen van vorm wisselen. En hier komt onze truc met behulp van de twee links bovenaan de pagina. In plaats van rechtstreeks naar het tweede formulier te linken, en het risico te lopen een “springend” effect te krijgen, plaatsen we de twee links bovenaan de pagina en geven ze weergave: geen. Dit voorkomt elke paginasprong. Ere wie ere toekomt: ik vond deze truc op CSS3 Create (in het Frans).
#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; animatienaam: fadeInLeft; animatie-vertraging: .1s; )
Dus dit is wat er gebeurt: wanneer we op de klikken Sluit je bij ons aan knop activeren we de #toregister. Vervolgens voeren we de animatie uit door de zuster-selector ~ te gebruiken om ons #register-element te vinden. We gebruiken een animatie genaamd fadeInLinks. Omdat we het formulier “verbergen” zonder dekking, zullen we een animatie gebruiken die infaadt om het te laten verschijnen. We hebben ook de z-index gewijzigd, zodat deze boven het andere formulier verschijnt.
Hetzelfde gebeurt voor de andere vorm.
En hier is de code voor de animatie. We gebruiken het CSS3-animatieframework van Dan Eden en hebben het voor deze tutorial aangepast.
Animate( animatieduur: 0,5s; animatietimingfunctie: gemak; animatie-vulmodus: beide; ) @keyframes fadeInLeft ( 0% ( dekking: 0; transformeren: translateX(-20px); ) 100% ( dekking : 1; transformeren: vertalenX(0);
Het formulier dat “verdwijnt” krijgt een andere animatie waardoor het naar links vervaagt:
#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animatienaam: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( dekking: 1; transformeren: translateX(0); ) 100% ( dekking : 0; transformeren: vertalenX(-20px);
Je kunt nu andere animaties van Dan Eden's animate.css gebruiken: pas gewoon je .animate-klasse aan en vervang de animatienamen. Aan het einde van het bestand animate-custom.css vindt u ook enkele aangepaste animaties.
Nou, dat is het mensen. Ik hoop dat je de tutorial leuk vond!
Houd er rekening mee dat in sommige browsers achtergrondclip: tekst wordt niet ondersteund. In Internet Explorer 9 werken de overgangen en animaties niet, dus er zal geen sprake zijn van fraaie vormwisselingen. In Internet Explorer 8 en lager wordt de:target pseudo-klasse niet ondersteund, dus deze zal helemaal niet werken (je ziet alleen het inlogformulier).
Heeft u een website? Als uw antwoord op deze vraag luidt Ja,
dan is een klassieker een musthave: een aantrekkelijk inlogformulier. Of het nu een sociale netwerksite is of een online modewinkel, een e-mailsite of een online tijdschrift, het eerste dat opvalt aan de klant is de inlogoptie. Laat uw klant dus al bij het eerste contact de gewenste indruk krijgen. Download en krijg de look voor uw website die een eeuwige eerste indruk creëert.
Nuttige artikelen:
HTML5-tutorial – Eenvoudig HTML-inlogformulier maken met behulp van CSS!
Witte transparante HTML-inlogformuliersjabloon
Inlogformulier– Orange Skin Type is een eenvoudig te gebruiken inlogformuliersjabloon waarvan de PSD klaar is om naar CSS te worden geconverteerd. Het wordt geleverd met verschillende stijlen voor knoppen en is zeer aanpasbaar.
Basis aanmeldingsformuliersjabloon Gratis HTML
8 Modern & Web 2.0 Login/Signup Panels is een set loginformulieren met een futuristische uitstraling en eigenzinnige en out-of-the-box ontwerpen. Deze formulieren worden geleverd in gelaagde PSD's en zijn zeer bewerkbaar. Bron: codepen.io
Zwarte huid HTML-inlogformuliersjabloon
Met een strak en slim ontwerp zien moderne login- en registratieformulieren er erg aantrekkelijk uit. De slimme objecten en vormen in de PSD zijn eenvoudig te bewerken, waardoor deze sjabloon zeer flexibel is en aan uw behoeften kan worden aangepast.
Dag/Nacht-inlogpagina is een zeer charmante HTML-inlogsjabloon die in twee varianten verkrijgbaar is. Felgekleurde knoppen tegen een donkere of witte achtergrond zijn zeer opvallend en deze sjabloon is gemakkelijk te bewerken.
Login-/registratieformulier met wachtwoordmeter
Deze sjabloon wordt geleverd met een wachtwoordmeter en heeft een perfect transparante lay-out met minimale ontwerpeffecten. Ze hebben een roze tint voor de achtergrond. Ze worden geleverd met een aanpasbare inlogpagina. Het ontwerp is gebaseerd op een enkele PSD-laag waardoor het gemakkelijk kan worden bewerkt. De teksten zijn ook bewerkbaar en worden geleverd met Google Web Fonts.
Batman Styled Dark CSS3-inlogformulier downloaden
Deze ontwerpersjabloon heeft een donkerder uiterlijk en een perfect bewerkbaar CSS3-inlogformulier met een simplistisch ontwerp. Deze sjabloon is perfect responsief en werkt beter op elk apparaat, mobiel of desktop. Het is afdrukbaar en kan naar wens worden aangepast. Deze sjabloon is een niche-inlogformulierontwerp en is perfect om te gebruiken voor zakelijke en professionele WordPress-sites.
Eenvoudig HTML5-inlogformulier Voorbeeldbroncode
Deze formulieren zijn perfect responsief en zorgen voor gemakkelijkheid, met een eenvoudige, mooie lay-out. Ze hebben om te beginnen ook een donkerdere achtergrond met een wit inlogformulier. Deze sjabloon is het beste voor het opnemen en contacteren van pagina's in websites. Door hun uiterlijk zijn ze perfect geschikt voor alle website-instellingen. Het is volledig bewerkbaar.
8 moderne aanmeldingspanelen voor HTML-aanmelding
Met een extreem niche-indeling beschikt deze sjabloon over 8 moderne, op HTML gebaseerde aanmeldingspanelen. Het heeft een witte lay-out met zeer unieke ontwerpstructuren die perfect zijn geïntegreerd om verbluffende effecten voor inlogformulieren te creëren. Het is volledig responsief en kan naar wens worden bewerkt. Het is perfect voor zowel commerciële als blogsites.
Absoluut eenvoudige en eenvoudige sjabloonbestanden, ze kunnen gemakkelijk worden aangepast en beloven browservriendelijk te zijn. De sjabloon werkt prima op elk apparaat, groot of klein, laptop of tablet, smartphone of desktop. Het beschikt over een eenvoudige inlogpagina in HTML-optie. Google Login-tool is geïntegreerd. Toegang tot Google-account met behulp van e-mailadres en wachtwoord.
Hoe u een aangepast inlogformulier op uw website kunt gebruiken
Het maken van een aangepast inlogformulier voor uw WordPress-website is vrij eenvoudig met de nieuwste thema’s en sjablonen. Deze zijn volledig aanpasbaar en bewerkbaar. Bewerk nu het inloglogo om het aantrekkelijker te maken. Vervang het logo door uw merkpictogram. Het helpt bij het brandinggedeelte en geeft een duidelijke boodschap aan de bezoekers weer. Er zijn verschillende plug-ins beschikbaar die helpen bij het maken van een aangepast inlogformulier voor uw website. Deze plug-ins zijn eenvoudig te installeren en helpen bij het bieden van de meest innovatieve inlogpagina's die volledig bewerkbaar en responsief voor uw website beloven. Het gebruik van een aangepast inlogformulier op uw website wordt nog eenvoudiger.
Hoe een inlogformulier in HTML te ontwerpen / maken
Voor bedrijven is het erg belangrijk om een leuk en creatief inlogformulier te hebben. Dit is voor veel klanten het eerste aanspreekpunt en daarom moet er veel moeite worden gedaan om een perfect ontwerp van het inlogformulier te creëren. Het is mogelijk om de hele webpagina in HTML te coderen en er zijn ook gratis downloads van HTML5- en CSS3-inlogformulieren beschikbaar op internet. Deze sjablonen kunnen met weinig aanpassingen worden gebruikt en het bespaart veel tijd en moeite bij het ontwerpen van een pagina. Sommigen geven er misschien de voorkeur aan om de betaalde sjablonen voor het webontwerp te gebruiken, terwijl anderen hun toevlucht nemen tot het helemaal opnieuw maken ervan.
HTML dag, nacht inlogpaginasjabloon
Zeer unieke inlogpagina met dag-nachtinstellingen, deze sjabloon is volledig responsief en belooft compatibiliteit met meerdere browsers. Het is een perfecte niche qua ontwerplay-outs en knopconfiguraties. Het wordt geleverd met verschillende sociale login-opties via Twitter, Facebook en Google+. Deze sjabloon bevat voorbeeldformulieren die eenvoudig kunnen worden aangepast.
Horizontaal responsief inlogformulier UI-ontwerp
Deze sjabloon heeft een horizontale lay-out en belooft 100% responsief te zijn, waardoor ze perfect toegankelijk zijn voor zowel desktops als smartphoneapparaten. Het kan zonder enig probleem op maat worden gemaakt. Het wordt geleverd met een coole hemelsblauwe lay-out, bestaande uit vervolgkeuzelijsten en keuzerondjes. Het is perfect geschikt voor persoonlijke registratieformulieren en blogsites.
Prachtig inlogformulier met nieuwe HTML5-attributen
Met een minimalistische en eenvoudige ontwerpinterface is dit sjablooninlogformulier perfect voor moderne websites. Deze sjabloon bevat gelaagde PSD-bestanden en wordt geleverd met eenvoudig aanpasbare functies. Er is een breed scala aan HTML5-kenmerken die het zo speciaal en uniek maken. Het is perfect compatibel met mobiele apparaten zoals smartphones en tablets. zie je misschien ook.
HTML-gecodeerde aanmeldingsformuliersjabloon
Bron: premiumfreebies.eu | Deze HTML-sjabloon heeft een eenvoudige interface en wordt geleverd met een minimalistische ontwerplay-out. Het is compatibel met verschillende browsers en kan gemakkelijk en snel worden geladen. Het belooft printervriendelijk te zijn. Enkele van de functies zijn onder meer Google-weblettertypen, gesneden PSD, vervolgkeuzemenu, aanpasbaar kleurenthema, favicon en opties voor sociaal delen.
Donkere HTML-inlogformuliersjabloon
Deze sjabloon heeft een vrij donkerder uiterlijk. Maar het heeft een sobere en niche-indeling die belooft gemakkelijke navigatie door de secties te bieden. Deze sjabloon is 100% responsief en kan eenvoudig worden aangepast en is het meest geschikt voor entertainment- en tijdschriftportals. Het is rijk aan functies en gemakkelijk voor de ogen.
Mooie CSS3-inlogformuliersjabloon
Dit is een zeer elegant ontworpen niche-sjabloon voor formulieren en inlogpagina's. De registratieformuliersjabloon html css gratis te downloaden is responsief en werkt prima met elke browser, of het nu IE, Chrome of Safari is. Het heeft een Retina-ready display en belooft een soepele navigatie. Het bevat opties voor sociaal delen die op de startpagina zijn geïnstalleerd.
Clean Design HTML-inlogpagina
Extreem niche-indeling, deze sjabloon heeft donkere tinten met opties voor sociaal delen geïntegreerd op de startpagina. Deze sjabloon is volledig aanpasbaar en werkt eenvoudig met elke browser en elk apparaat. Het beschikt over een vervolgkeuzemenu en een knop voor het onthouden van wachtwoorden. Het biedt ook een snelle laadoptie en belooft printervriendelijk te zijn. Het wordt geleverd met bewerkbare coderingsbestanden.
HTML- en CSS-inlogformuliersjabloon met behulp van Asp.Net
Sommige programmeurs gebruiken ook de C#-taal voor het maken van de HTML-inlogpagina. De programmeertaal biedt veel veelzijdigheid voor de programmeurs en bovendien is het inlogformulier eenvoudig samen te stellen met behulp van C#.
JQuery Mobile Login-formulier Wigget-sjabloon
Beheerder login/aanmeldingsformulier met PHP-sjabloon
Deel
Heeft u ooit de inlogpagina minutieus gevolgd die verschijnt wanneer u zich aanmeldt voor een bepaalde website? De eerste pagina die verschijnt wanneer u inlogt, is de eerste indruk van een website. De ontwerp van het inlogformulier zal zelf de aard van de website definiëren en daarom relevant zijn voor de website waarnaar deze verwijst.
Echt login- of aanmeldingsformulieren zijn een van de belangrijkste elementen die een webpagina bevat en daarom is het ontwerpen van deze online formulieren een van de belangrijkste kenmerken als het gaat om het ontwerpen van de website. Een succesvol aangemaakt aanmeldingsformulier moedigt de bezoekers ook aan om lid, abonnee of klant te worden voor een bepaald bedrijf. Een sober ogend, creatief en visueel aantrekkelijk aanmeldingsformulier zal zeker een vruchtbaar conversiepercentage van een bezoeker bevorderen als alle andere functies goed op elkaar zijn afgestemd.
Het ontwerpen van een effectief en overzichtelijk inlog-/aanmeldingsformulier vraagt veel creativiteit van de ontwerper, omdat het voor het succes en de effectiviteit van een website belangrijk is om een aantrekkelijke en opvallende vorm te hebben.
Enkele zeer effectieve en aantrekkelijke inlogformulierontwerpen
Er zijn enkele registratieformulieren die uit basis bestaan en die zijn gemaakt met behulp van enkele elementaire webontwerpconcepten. Afgezien van deze elementaire, zijn er enkele die er tot op zekere hoogte een beetje anders uit kunnen zien. Er zijn echter enkele andere die buitengewoon indrukwekkend en creatief zijn en de bezoeker categorisch naar de website lokken.
Sommige van deze formulieren bieden de mogelijkheid om persoonlijke contactgegevens in details in te voeren en bevatten de naam, e-mailadres, contactnummer en andere zaken. De stijlen van deze vormen gaan veel verder dan gewoon, en sommige hebben zelfs de optie van handgeschreven kalligrafie bedacht.
Er zijn maar weinig inlogpagina's met verschillende innovatieve tekstinvoerstijlen, naast enkele zeer innovatieve optie- of selectiemenu's. Dit soort formulieren vragen echt een hoog niveau van creativiteit van de ontwerpers, vooral als het gaat om het ontwerpen van de ruimte tussen verschillende lagen, het creëren van teksten die groot en gemakkelijk leesbaar zijn, en het creëren van zijbalklinks die rechtstreeks verbinding maken met hun e-mails.
Een specifiek type formulier geeft een dramatisch inzicht in een nieuw gegevensinvoerveld. De gebruikers hebben de mogelijkheid om vanaf de startpagina zelf naar de inloglink te gaan en een inlogbox op te roepen, mogelijk gemaakt door jQuery. Dit specifieke type formulier komt met een Ajax dat het gebruikt om een extern PHP-script aan te sturen. Het evalueert de informatie die een gebruiker heeft gebruikt bij het inloggen en eenmaal verwerkt, verleent het de toestemming aan de gebruiker of weigert het deze.
Een aantal ontwerpen van inlogformulieren die we tegenwoordig zien, zijn inderdaad extreem dynamisch en bestaan uit enkele van de allernieuwste ontwerpen. Eén van deze new age-ontwerpen biedt een prachtig inzicht in de verschillende gegevensinvoervelden. Gebruikers kunnen eenvoudig naar de startpagina gaan en klikken de koppeling op de inlogpagina om een dynamisch inlogvak op te roepen, mogelijk gemaakt door jQuery. Deze bijzondere login formulier komt met de mogelijkheid om een externe te koppelen PHP-script dat helpt bij de evaluatie van verschillende inloggegevens en afhankelijk van de uitkomst van het resultaat; het staat de toegang van de gebruiker toe of weigert het.
Voorbeelden van inlogformulieren
Inlogformulier van de impressionistische gebruikersinterface van Designmodo
Hoewel het op het eerste gezicht lijkt alsof de input enigszins in de lucht zweeft, aangezien gradiënten en vectorrealisatie op een gestructureerd canvas tot een enigszins evenwichtige harmonie leiden. Niettemin ziet dit op tooltip geïnspireerde basisinlogformulier er interessant en uniek uit.
Inloggen door Haziq Mir
De ontwerper plaatst velden in lijn, waardoor het totale onderdeel geschikt is voor relatief standaard smalle headers. Terwijl zachte, warmbruine kleuren gecombineerd met innerlijke schaduwen elk item een aangenaam, glad en afgewerkt uiterlijk geven, heeft de donkere versie een meer verfijnde uitstraling.
Stellaire login, verbeterd door Haziq Mir
Het eerste dat in het oog springt is een achtergrond die een uitstekende aanvulling kan worden op elk ingewikkeld of illustratief ontwerp, waarbij natuurlijke texturen zoals hout of papier de hoofdrol spelen. Terwijl strakke ingangen en grijsachtige kleuren ideaal passen bij het canvas in notebookstijl, trekt de enorme blauwe 'Aanmelden'-knop de hele aandacht met zijn grote visuele gewicht.
Inlogformulier door Sergey Shmidt
Dit is een uitstekend voorbeeld van een donker inlogformulier dat een beeld van verfijning uitstraalt zonder bruut te zijn. De glanzend bruine knop springt meteen in het oog en roept tot actie op. Kleine metalen schakelaar voegt een mooie skeuomorfe flair toe aan de compositie.
Inlogformulier voor persoonlijke aanmelding door Ionut Zamfir
De achtergrond van het formulier bootst een gewoon notitieboekoppervlak na waarop we gewoonlijk aantekeningen maken. Houten canvas verbetert de algehele esthetiek. Hoewel glanzende gradiëntknoppen enigszins afwijken van het thema, kunnen platte of schetsmatige knoppen er natuurlijker uitzien, maar toch zorgt het onderdeel voor een gevoel van harmonie.
Inloggen Widget
De ontwerper toont een subtiele en elegante webvorm, waarvan de wow-factor wordt gecreëerd door de semi-transparante achtergrond. Het heeft een optimaal contrast dat letters en iconen onderscheidt van de achtergrond, en zoals gewoonlijk een enorme, bijna overweldigende uitpuilende CTA.
Inlogformulier iPhone-app
iPhone App Login Form van Mason Yarnell is uitgevoerd in de beste tradities van iOS-ontwerpen van voorgaande jaren. Er zijn veel glanzende dingen, sierlinten, pictogrammen in reliëf en natuurlijk een ingewikkelde gestructureerde achtergrond. Over het algemeen ziet het onderdeel er echter schoon, fris en met veel lucht uit.
Licht inloggen door Maxwell Barvian
Light login van Maxwell Barvian ziet er precies uit zoals vermeld op het naamplaatje: licht, schoon en helder. Grijze en witte kleuren samen kunnen wonderen doen en gebruikers gemakkelijk een uitstekende ervaring bieden. Zoals het hoort, is de hoofdknop voor betere conversies opzettelijk te groot en in een heldere toon geschilderd.
Hoe u een inlogformulier maakt met CSS3 en jQuery
Het is een kleine tutorial die zelfs voor beginnende webontwikkelaars dienstbaar is. Hoewel het ontwerp vrij eenvoudig is en invoervelden op het eerste gezicht op knoppen lijken vanwege een gradiëntstijl; het is echter een representatief voorbeeld van een strak en goed gestructureerd webformulier dat in tal van gebruikersinterfaces van pas kan komen.
Inloggen door Paresh Khatri
Sommige logins van Paresh Khatri zijn een kleine webcomponent met een levendig kleurenschema en nauwgezette aandacht voor details. De op tooltip geïnspireerde vorm, de ronde fotominiatuur, de inzetbehandeling en de semi-transparante achtergrond zorgen ervoor dat dit ontwerp zich gemakkelijk onderscheidt van de massa.
App-login
Door elk element van de vorm zorgvuldig boven elkaar te plaatsen, slaagt Mynus erin het ontwerp samen te binden en de achtergrond achterwege te laten die alleen maar de aandacht zou afleiden van een verfijnd scherm. De kleuren, randen, vormen, afgeronde hoeken, typografie, hoeveelheid witruimte en reliëfaccenten maken het ontwerp uniek en helder.
Donkere login door Adam Whitcroft
Dark login van Adam Whitcroft ziet er verfijnd en eersteklas uit. Een uitstekende lettertypekeuze in combinatie met contrasterende kleuren biedt gebruikers een optimale leesbaarheid. De ‘Aanmelden’-knop, grijsachtige glyphs en schakelaar zien er een beetje naadloos uit, maar toch passen ze idealiter in de omgeving.
Gebruikerslogin
Gebruikerslogin heeft een warme romige kleur die positieve gevoelens oproept. Oranje en blauw worden gebruikt als decoratieve accenten die een vleugje pit toevoegen en de vorm geschikt maken voor verschillende ontwerpen. Op gradiënten gebaseerde CTA met een convex uiterlijk springt eenvoudig op je af en nodigt uit tot actie.
Pittige login door Charlie Waite
Snappy Login van Charlie Waite is een interessante kijk op een webformulier dat een eenvoudig maar origineel uiterlijk heeft, vooral dankzij platte, transparante invoer. Hoewel de tekst in de velden enigszins onleesbaar is, als de achtergrond te vaag is, heeft het over het geheel genomen toch zeker een charme. Het decoratieve lettertype en de reliëfknop zien er uitzonderlijk uit en trekken, zoals het hoort, de aandacht.
Sazzi-login door Ionut Zamfir
Sazzi Login van Ionut Zamfir heeft een leuke twist geproduceerd door de CTA-knoppen. De primaire kleur is netjes geselecteerd en de accenttoon vormt een perfecte aanvulling op de algehele esthetiek. De vorm ziet er geweldig uit op monotone of luidruchtige doeken, vooral invoervelden die van nature ingebouwd lijken te zijn.
Kladblok Login definitief door Haziq Mir
Notepad Login final van Haziq Mir is een andere illustratieve kijk op een veel voorkomende minimalistische vorm in onze collectie die tot in het kleinste detail is gepland. De achtergrond houdt het thema bij elkaar, originele gestippelde velden en elegante cursieve typografie hebben artistieke flair.
Login voor gestapeld papier door Patrik Larsson
De auteur kiest voor een meer traditionele route door gebruik te maken van een zuivere achtergrond, standaardvakken voor invoer, normale letters en een rustig kleurenpalet. Hier wordt rood gebruikt als accent, waardoor de CTA een opvallende verschijning krijgt. Kleine details zoals een metalen clip en een houten textuur verrijken de esthetiek.
