Detta är en fortsättning på handledningen om att skapa en medlemsbaserad webbplats. Se föregående sida för mer information.

Ladda ner koden

Du kan ladda ner hela källkoden för registrerings-/inloggningssystemet från länken nedan:

ReadMe.txt-filen i nedladdningen innehåller detaljerade instruktioner.

Inloggningsformuläret

Här är HTML-koden för inloggningsformuläret.

Logga in

Användarnamn*: Lösenord*:

Loggar in

Vi verifierar användarnamnet och lösenordet vi fick och letar sedan upp dem i databasen. Här är koden:

funktion Login() ( if(empty($_POST["användarnamn"])) ( $this->HandleError("Användarnamn är tomt!"); return false; ) if(empty($_POST["lösenord"])) ( $this->HandleError("Lösenordet är tomt!"); return false; ) $användarnamn = trim($_POST["användarnamn"]); >CheckLoginInDB($användarnamn,$lösenord)) ( return false; ) session_start();

För att identifiera en användare som auktoriserad, kommer vi att kontrollera databasen för hans kombination av användarnamn/lösenord, och om en korrekt kombination angavs ställer vi in ​​en sessionsvariabel.

Här är koden för att leta upp användarnamn och lösenord.

funktion CheckLoginInDB($användarnamn,$lösenord) ( if(!$this->DBLogin()) ( $this->HandleError("Databasinloggning misslyckades!"); return false; ) $användarnamn = $this->SanitizeForSQL($ username); $pwdmd5 = md5($password = "Välj namn, e-post från $this->tablename" där användarnamn="$användarnamn" och lösenord="$pwdmd5""; result = mysql_query($qry,$this->connection if(!$result || mysql_num_rows($result));<= 0) { $this->HandleError("Fel vid inloggning." "Användarnamnet eller lösenordet matchar inte"); returnera falskt; ) return true; )

Observera att vi måste jämföra värdet för lösenordet från databasen med det MD5-krypterade värdet för lösenordet som angetts av användaren. Om frågan returnerar ett resultat ställer vi in ​​en "auktoriserad" sessionsvariabel och omdirigerar sedan till det skyddade innehållet. Om det inte finns några rader med inmatade data omdirigerar vi bara användaren till inloggningsformuläret igen.

Få åtkomst till kontrollerade sidor

För de sidor som endast kan nås av registrerade medlemmar måste vi sätta en bock överst på sidan.
Observera att vi ställer in en "auktoriserad" sessionsvariabel i inloggningskoden ovan. Överst på sidor vi vill skydda, letar vi efter den sessionsvariabeln. Om användaren är auktoriserad visar vi honom det skyddade innehållet, annars hänvisar vi honom till inloggningsformuläret.

Inkludera denna exempelkod ovanpå dina skyddade sidor:

CheckLogin()) ( $fgmembersite->RedirectToURL("login.php"); exit; ) ?>

Se filen: åtkomstkontrollerad.php i den nedladdade koden för ett exempel.

Här är funktionskoden CheckLogin().

funktion CheckLogin() ( session_start(); $sessionvar = $this->GetLoginSessionVar(); if(empty($_SESSION[$sessionvar])) (retur false; ) return true; )

Det här är grunderna för att skapa en medlemssida. Nu när du har grundkunskaperna kan du experimentera med det och lägga till nya funktioner, såsom en "Glömt lösenord"-sida så att användaren kan hämta eller ändra sitt lösenord om han glömmer det.

Uppdateringar

9 januari 2012
Funktionerna Återställ lösenord/Ändra lösenord läggs till.
Koden delas nu på GitHub.

Licens

Koden delas under LGPL-licens. Du kan fritt använda den på kommersiella eller icke-kommersiella webbplatser.

Inga relaterade inlägg.

Kommentarer till detta inlägg är stängda.

Hej alla. Så vi har lärt oss några element för att skapa former. Det är dags att kombinera vår kunskap för att lösa ett större problem. Låt oss skapa det enklaste formuläret för auktorisering på webbplatsen. För att göra detta behöver vi två fält, vi skapar och bifogar signaturer till dem.

Det första fältet är för inloggningen, det andra är för lösenordet. Och med den andra är det inte så enkelt. För för tillfället är det bara ett textinmatningsfält.

Logga in
Lösenord

Resultat i webbläsaren:

För att texten som anges i den ska ersättas med asterisker, som är vanligt för ett fält av denna typ, måste du göra en enkel åtgärd. Nämligen att ersätta attributvärdet typ på Lösenord:

Resultat:

Knapp för att skicka formulär

Här har du. Vårt formulär är nästan klart. Nu, för att slutföra skapandet, måste du skapa en knapp som skickar formuläret. Problemet löses med en tagg med typ Skicka in.

Om knappen skulle ha någon form av inskription kan det göras med hjälp av attributet värde. Om du ska namnge knappen eller inte är upp till dig, men om du gör det kommer servern att få det namnet samt värdet på knappen.

Som regel behövs namnet på en formulärsändningsknapp när formuläret har flera knappar som var och en utför en specifik åtgärd. Tack vare detta förstår servern, som tar emot namnet och värdet på knappen från webbläsaren, vilken knapp användaren klickade på och vad som därför måste göras.

Som ett resultat kommer koden för vårt formulär att vara följande:

Logga in
Lösenord

Resultat i webbläsaren:

DesignMaz har samlat en lista över de bästa CSS/HTML-inloggningsformulärmallar för webbdesigners, utvecklare som de kan ladda ner och använda för att skapa en form och de flesta av dem har också färdigbyggda HTML valideringsfunktioner samt vissa alternativ jQuery-validering (som Logga in/Registreringsformulär med passmeter under).

Gratis responsiv widgetmall för platt inloggningsformulär

Gratis responsiv platt ny inloggningsformulär-widgetmall för dina webbplatser. Detta inloggningsformulär är utformat med hjälp av webbteknologier som . Det är helt gratis att ladda ner och kan användas för din webbplats eller applikationsinloggning.

Formulär Plus

PopForms

Platt form med Bootstrap 3

Detta är en platt modern css3-design baserad på Booststrap 3 Framework. Responsiv design med multi-color multipurpose webbformulär med ren css3.

Responsiv statisk inloggningsformulär HTML5-mall

Gratis responsiv statisk inloggningsformulär HTML5 CSS3-mall. Du kan ladda ner denna HTML CSS Inloggningswidget som kan användas i dina webbprojekt.

Gratis responsiv mall för platt och ren inloggningsformulär

En responsiv HTML-mall för platt och ren inloggningsformulär designad med webbteknologier som HTML5 och CSS3. Du kan ladda ner och använda gratis för att logga in på din webbplats eller applikation.

Responsiv platt lila inloggningsformulärmall

En gratis responsiv platt lila inloggningsformulärmall byggd med HTML5 och CSS3. Det är helt gratis att ladda ner och kan användas direkt i din webbplats eller app.

Bootstrap-inloggning med sociala knappar

Några Twitter Bootstrap utvecklare kommer att älska dessa gratis Responsive Bootstrap-inloggningsformulärmall med sociala knappar. Detta Responsiv Bootstrap-inloggningsformulärmallär en enkel och ren inloggningsformulär webbplatsmall bas på Bootstrap 3.1.0 .

Lätt att använda skön och färgglada css inloggningsformulär för sin egen hemsida. Sätt helt enkelt in i det befintliga CSS fil och njut av det nya CSS-inloggningsformulär. Skapad med rundade hörn och snygg look. Det försämras fint på äldre webbläsare, t.ex. IE7 och IE8.

MetroLoginär en Windows 8 Inloggningsformulär simulator som ger dig denna möjlighet att skapa en inloggningssida för din webbplats användare eller en inloggningssida för din adminpanel med en snygg metrodesign.

Twitter-inspirerat inloggningsformulär – Jquery

Det här är en rullgardinsmeny Inloggningsformulär liknande den som finns på twitter. Den kommer komplett med JavaScript, CSS och HTML. Precis som Twitter logga in i form den kommer med förbättringar som verktygstips och en kompakt Inloggningsformulär och en klickad statusknapp. Det använder CSS3 för att minska behovet av bilder och det försämras fint i icke CSS webbläsare. Den har bra webbläsarstöd och fungerar i de flesta moderna webbläsare och även äldre som Internet Explorer 6 och 7.

Detta är rent och trevligt designat logga in & registrera HTML användargränssnitt med felhantering och sociala knappar.

Ren och användbar inloggning & anmälningsformulärär för varje utvecklare. Det är väldigt snabbt rent CSS. Felhanteringstillstånd, sociala knappar och glömt lösenord finns där.

Zi-Popup-inloggningsformulär – Ren CSS3

Rent och användbart logga in & anmälningsformulärär för varje utvecklare. Det är väldigt snabbt CSS-formulär med jQuery-validering. Felhantering, sociala knappar och hantering av glömda lösenord finns där. Få leva med en jQuery.

Minimalistisk inloggnings-/registreringsformulär + livevalidering

Minimalistisk designad inloggning, Registrera och Glömde mallformulär Packa. Fullpackad med jQuery Live Validation, 7 färgstilar, 3 olika formstorleksalternativ, titelanimering, anpassad kryssruta, tips på verktygstips och jQuery-felhantering.

Sommarformulär – Inloggnings- och registreringsformulär

Sommar formerär kopplade logga in och registreringsformulär med en uppsättning imponerande effekter tillsammans med den ljusa moderna designen. Flexibiliteten i dessa svarsformulär Sommar former kan bli den första tegelstenen på din nya webbplats eller kan bara vara en ersättning av din gamla formulär. Varje år blir människorna mer krävande. De formulärär väl genomtänkta och kan tillfredsställa alla användare.

Inte så länge sedan, för att uppnå sådana effekter, använde vi JS. Men nu, CSS3 har alla nödvändiga verktyg för att skapa popup-fönster också.

Moon Forms – CSS-formulär för inloggning och registrering

Månen bildarär kopplade logga in och registreringsformulär har en modern design. Flexibiliteten i dessa svarsformulär gör att du kan placera den i valfritt område på din webbplats (som en widget, som ett popup-fönster, som en fristående sida).

Tab och form utvecklad genom att endast använda CSS3, inget javascript används. Det är enkelt, rent och webbläsarkompatibelt. Mycket lätt att implementera på alla typer av webbplatser.

Har en stor samling av form stilar som används regelbundet på webbplatser. Du får Sök Blanketter, Inloggningsformulär, Kontaktformulär och Allmän form stilar. Dessutom finns alla dessa formulär tillgängliga i mörka och ljusa versioner, så du får totalt 224 formulärstilar! De logga in, kontakt och allmänt formulär har också stilar för fokus och valideringsfel definierade i css.

Form Framework som skapar en balans mellan enkelhet och elegans. CSS3 responsiva formulär kit är enkelt, rent och fräscht modernt form pack utveckla med hjälp av bootstrap.

Inloggningssida för dag/natt

Inloggningsformulär för dag/natt– har nätet och unik design. I satsen får du 2 mappar med 6 blanketter. I två färger vit och mörk. Som i kitet innehåller 4 stilknappar. Tack vare Inloggningsformulär för dag/natt utvecklare kan spara tid och pengar på att utveckla designen. Och formgivarna kan se ett exempel på korrekt organisation av lager.

Är en uppsättning av vacker form element. Den har en stor mängd anpassade föremål, olika färgscheman, mottaglig rutsystem och låter dig skapa formulär oavsett komplexitet och för alla behov: logga in, registrering, kontakter, recension, beställa, kommentar, kolla upp, etc.

Enkel att använda HTML5 & CSS3 inloggningspanel

Gyllene formerär en enkel och professionell Form Ramverk som skapar en balans mellan enkelhet och elegans. Ramverket är byggt med ren CSS3 + HTML5(inga bilder), har en ren konsekvent Formulär UI, mottaglig 12 kolumn rutnät, och kan användas för att bygga alla typer av Webbformulär snabbt oavsett om det är enkelt eller komplext, utan speciella CSS och kodningskunskap.

Dina besökare kommer inte att kunna hindra sig själva från att kontakta dig med den här bebisen. De HTML5 AJAX kontaktformulär använder skärkant HMTL5 kod och CSS3 animationer för att göra din kontaktsida elegant och ultraanvändbar.

– har en ren design och en kraftfull 3D Flip Effekt som ger användaren en unik exprince och ett snabbt sätt att slutföra processen. I kitet får du 1 psd-fil med 3 formulärstilar.

Responsiv HTML5 – jQuery Logga in – Registreringsformulär

Responsiv HTML5 Logga in / Anmälningsblankett, med jQuery-effekter och CSS3 anpassning.

Inloggningsformulär finns på hemsidor med forum, butiker, WordPress och det mesta på internet kräver inloggningsformulär någonstans för att få tillgång till något. Hela webben är ofullständig utan inloggningsformulär och registreringsformulär.

HTML-formulär kommer att vara det första som de flesta av oss stöter på och med korrekt CSS som ger stil åt HTML-strukturen. I de senaste HTML-versionerna antar jag att HTML verkar ha valt CSS3 som standardalternativ för strukturstil. Hur som helst vad du hittar här är de fördesignade HTML, CSS-formulären byggda av frontend-utvecklare och delas till allmänheten gratis att använda.

Försök att använda alla dessa gratis inloggningsformulärmallar eftersom de flesta av dem också har förbyggda HTML-valideringsfunktioner samt en del opt jQuery- eller HTML-validering (som inloggnings-/registreringsformuläret med passmeter nedan).

Den här listan är inte över än, jag är intresserad av att hitta nya inloggningsformulärdesigner så jag kommer att fortsätta uppdatera listan med nya inloggningsformulärmallar när de dyker upp under 2017. Håll utkik.

Röd inloggningsformulär

Ett enkelt och effektivt inloggningsformulär för din webbplats som kräver grundläggande inmatningsfält och ingen extra programmering.

En platt design för inloggningsformulär designad för din webbplats som redan är platt. Ladda ner och använd den här mallen för alla ändamål.

Behöver du en snabb inloggning för dina kunder? Inga bekymmer, det här snygga inloggningsformuläret kommer att få dig att gå utan krångel. Ladda ner källkoden och kontrollera demon eftersom du kan ange ett exempel på användarnamn och lösenord i fälten och försöka logga in. Du kommer att tas till en profilsida på samma som ser strålande ut med en utloggningsknapp som visar utloggningsanimationen.

När google material design blir populärt framför platt design kan vi se ett djupt och noggrant skuggat inloggningsformulär och ett registerformulär i denna css3-mall.

Här får du ytterligare ett briljant inloggningsformulär för din företagswebbplats med möjlighet att dölja/visa inloggningsfält. Väl kodad css/html/js-design ger dig bättre laddning utan att manipulera din nuvarande webbplatshastighet.

Minimalt inloggningsformulär med flytande animering

En smidig animering av inloggningsformulär som öppnar inloggningssektionen genom att klicka på en bild eller en knapp efter behov.

Minimalistisk inloggningsformulär med css

Här hittar du ett enkelt inloggningsformulär som placeras på helskärmsbakgrund. Nedladdningsfilen ger dig css och html för enkel implementering av denna inloggning till din webbplats.

Animerat inloggningsformulär

Klickanimationerna som visas i textfälten är lysande som visar en liten glidande animering av användar- och lösenordsikoner. Du kan sedan logga in på formuläret för att se en autentiserande förladdare samt ett välkomstblock. Den här nedladdningen innehåller alla källfiler för att implementera ett inloggningsformulär för din egen webbplats.

Elegant inloggning

Detta är en enkel version av inloggningsformuläret som du kan visa på din webbplats eftersom detta också har mindre inverkan på webbplatsens hastighet med sin minimala kod.

Lugn inloggningsskärm

Ett rent inloggningsformulär med animerad bakgrund som ger en avkopplande känsla till hela sidan. Ladda ner hela mallen i zip-format från codepen.

Inloggning och registreringsformulär

Integrera detta flytande inloggnings- och registreringsformulär på din webbplats med lätthet. Zip-filen med den här nedladdningen ger dig css-, html- och js-mallar. Registrering på sociala medier är också tillgängligt med alternativ för att visa/dölja lösenord för enkel inmatning av lösenord på skärmen.

Inloggningsformulär med Skapa konto

Ett inloggningsformulär som visas med en toningseffekt är bara roligt att titta på. Denna effekt kan endast ses i ett fåtal moderna inloggningsformulär. Använd klicka på mig för att ändra formuläret till registrering eller skapa formulär.

Ett inloggningsformulär i minimal stil med platt design kan laddas ner från länken nedan. HTML-validering är tillgänglig och ställs in i denna inloggningsmall.

Ladda ner

Minimal formulärmall för inloggning

En validering för e-post finns på plats och denna mall är ren css, html utan snygga jquery-moduler.

Ladda ner

Anmälnings-/inloggningsformulär

Ett enda formulär för att logga in på webbplatsen samt ett registreringsalternativ som kan vändas med ett klick. Även om registreringsområdet saknar några viktiga fält är detta ändå bättre form med alla kraftfulla funktioner.

Ladda ner

Detta inloggningsformulär är dolt om du inte klickar på inloggningslänken. Detta är en mycket användbar funktion för dagens hemsida som kan undvika en extra sida för inloggning. Visa inloggning på vilken sida du vill med detta kraftfulla inloggningsformulär.

Ladda ner

Den tillhandahålls både som en PSD och som en helt kodad HTML/CSS-version, så att du kan börja integrera den direkt.

Inloggningsformulär (kodat)

Ett professionellt inloggningsformulär. Nedladdningen inkluderar PSD-filen, och jag kände också för att koda den så jag inkluderade xHTML-, Js- och CSS-filerna också.

Ladda ner

Vit Enkelt inloggningsformulär

Ett rent och enkelt inloggningsformulär med en rund skicka-knapp och eleganta fokustillstånd.

Helt enkelt inloggningsformulär

Helt enkelt inloggningsformulär utformat och designat enbart med hjälp av CSS3. Formuläret skapas med ganska enkel uppmärkning och formateras med mycket grundläggande CSS3-egenskaper.

Ladda ner

En handledning om hur man skapar ett växlingsinloggnings- och registreringsformulär med HTML5 och CSS3.

I den här handledningen kommer vi att skapa två HTML5-formulär som växlar mellan inloggning och registrering med hjälp av CSS3-pseudoklassen :target . Vi kommer att stila den med CSS3 och ett ikontypsnitt. Tanken bakom denna demo är att visa användaren inloggningsformuläret och ge en länk för att "växla" till registreringsformuläret.

Observera att detta endast är för demoändamål, det fungerar bara i webbläsare som stöder pseudoklassen:target, och du bör inte använda den här koden på en livewebbplats utan att ge en solid reserv.

I det följande kommer vi att gå igenom Demo 1.

HTML

I HTML kommer vi att lägga båda formulären och dölja den andra med CSS. Här är koden, jag kommer att förklara några av de intressanta delarna senare.

Gå och logga in Vi har lagt till lite HTML5-godhet här och använt några av de nya ingångarna. Ingången typ=lösenord döljer automatiskt vad användaren skriver och ersätter det med punkter (beroende på webbläsare). Ingången typ=e-post gör det möjligt för webbläsaren att kontrollera om det användaren skrev in har formatet en giltig e-postadress. Vi har också använt kräver = krävs
attribut; webbläsare som stöder detta attribut låter inte användaren skicka formuläret förrän detta fält är ifyllt, inget JavaScript krävs. De autocomplete=på

attribut kommer att förfylla värden baserat på tidigare användarinmatning. Vi använde också några trevliga platshållare för ingångarna som kommer att visa ett visst vägledande värde när inmatningen inte är ifylld. Nu de två knepiga delarna. Du kanske har lagt märke till de två

länkar överst i formuläret. Det här är ett litet trick som kommer att få vår form att bete sig snyggt när vi leker med ankare, så att den inte "hoppar" på långa sidor när vi klickar på växlingslänken och utlöser:target-pseudoklassen. Det andra lilla tricket är relaterat till användningen av ikontypsnittet. Vi kommer att använda ett dataattribut för att visa ikonerna. Genom att sätta data-icon="icon_character"

med motsvarande tecken i HTML-koden behöver vi bara en CSS-attributväljare för att utforma alla ikoner. Läs mer om denna teknik på 24 sätt: Visa ikoner med teckensnitt och dataattribut.

CSS

För tydlighetens skull i koden i denna handledning kommer jag att utelämna alla leverantörsprefix, men du kommer naturligtvis att hitta dem i filerna. Återigen använder jag några ganska avancerade CSS3-trick som kanske inte fungerar i alla webbläsare. Låt oss börja.

Styling båda formerna med CSS3

Låt oss först ge våra två former lite allmän styling för behållaren.

#prenumerera, #login( position: absolut; topp: 0px; bredd: 88%; utfyllnad: 18px 6% 60px 6%; marginal: 0 0 35px 0; bakgrund: rgb(247, 247, 247); kant: 1px solid rgba(147, 184, 189,0.8); z-index: 22;

Vi har lagt till en snygg boxskugga som är gjord av två skuggor: en infälld för att skapa den inre blå glöden och en yttre skugga. Vi ska förklara z-indexet lite.

/**** allmän textstil ****/ #wrapper h1( font-size: 48px; färg: rgb(6, 106, 117); utfyllnad: 2px 0 10px 0; font-family: "FranchiseRegular"," Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** För närvarande stöder endast webkit bakgrundsklipp:text; */ #wrapper h1( bakgrund: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20bx, rg (64, 111, 118) 40px, rgb(18, 83, 93) 40px -webkit-text-fill-color: -webkit-background-clip: text ) #wrapper h1:after( content:" "; display:block; width:100%; height:2px; margin-top:10px; bakgrund: linjär-gradient(vänster, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, 7,914, rgba(147,184,189,0) ,1) 53%, rgba(147,184,189,0,8) 79%, rgba(147,184,189,0) 100%);

Observera att för närvarande stöder endast webbläsare bakgrundsklipp: text, så vi skapar en avskalad bakgrund endast för webkit här, och klipper den till texten för att lägga till ränderna i H1-titeln. Sedan bakgrundsklipp: text Egenskapen fungerar för närvarande bara i Webkit-webbläsare, jag bestämde mig för att bara använda webkit-prefixet. Det är anledningen till att jag delar upp CSS-deklarationen i två delar och bara använder en webkit-prefixgradient. Att bara använda prefixet –webkit- är dålig praxis, det är bara för demoändamål, och du bör aldrig göra detta på en riktig webbplats! Det är också där -webkit-text-fill-color: transparent kommer väl till pass: det gör det möjligt för oss att bara ha en genomskinlig bakgrund på webkit-webbläsarna, alla andra kommer att ignorera det och ge oss den medföljande textfärgen som reserv.

Vi skapade också en blekningsrad under titeln med hjälp av:after-pseudoklassen. Vi använder en höjdgradient på 2px och tonar bakgrunden till 0 opacitet i båda ändar.

Låt oss nu styla våra input och ge dem ett snyggare utseende.

/**** avancerad inmatningsstil ****/ /* platshållare */ ::-webkit-input-platshållare ( färg: rgb(190, 188, 188); font-style: kursiv; ) input:-moz- platshållare, textarea:-moz-placeholder( färg: rgb(190, 188, 188); teckensnitt: kursiv; ) input ( kontur: ingen; )

Först stylar vi ingångarna och tar bort konturen. Men var försiktig här; konturen hjälper användaren att veta vilken ingång som är fokuserad, så om du tar bort den bör du ange några:aktiva och:fokustillstånd för ingångarna.

/* all indata förutom submit och checkbox */ #wrapper input:not())( bredd: 92%; marginal-top: 4px; utfyllnad: 10px 5px 10px 32px; kant: 1px solid rgb(178, 178, 178) ; box-sizing: content-box; :focus( kantlinje: 1px fast rgba(91, 90, 90, 0,7); bakgrund: rgba(238, 236, 240, 0,2); box-skugga: 0px 1px 4px 0px rgba( 168, 168,0,0. )

Här använde vi klassen:not pseudo för att utforma alla ingångar, förutom kryssrutan. Jag angav ett:fokus och:aktivt tillstånd, eftersom jag bestämde mig för att ta bort konturen.

Och nu den roliga delen: ikonteckensnittet. Eftersom vi inte kan använda:före och:efter pseudoklasser på ingångar, måste vi fuska lite: vi lägger till ikonen på etiketten och placerar den sedan i ingången. Jag använder fontomas-biblioteket som sätter ihop några fina ikoner. Du kan ordna om dem för att ställa in ikonen på en specifik bokstav. Kom ihåg data-ikon attribut? Det är där du ska lägga brevet. jag använde data-icon='u' för användare, "e" för e-post, "p" för lösenord. När jag väl valt bokstäverna laddade jag ner typsnittet och använde teckensnittsgeneratorn för fontsquirrel för att omvandla det till ett @font-face-kompatibelt format.

@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"); font-weight: normal; font-style: normal; ) /** det magiska ikontricket ! **/ :after ( innehåll: attr(data-icon); font-family: "FontomasCustomRegular"; färg: rgb(106, 159, 171); position: absolut; vänster: 10px; topp: 35px; bredd: 30px; )

Ja, det är det gott folk, du behöver inte ha en klass för varje ikon. Vi använde innehåll: attr(data-ikon) för att hämta bokstaven från data-icon-attributet, så vi behöver bara deklarera typsnittet, välj en fin färg och placera den.

Låt oss nu utforma skicka-knappen för båda formulären.

/*styling båda skicka-knapparna */ #wrapper p.button input( width: 30%; cursor: pointer; background: rgb(61, 157, 179); utfyllnad: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; färg: #fff; font-size: 24px; kant: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0,5); rgb(210, 210, 210); övergång: all 0.2s linear ) #wrapper p.button input:hover( bakgrund: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p .button input:focus( bakgrund: rgb(40, 137, 154); position: relativ; topp: 1px; kant: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) infälld; ) p.login.button, p.signin.button( text-align: höger; marginal: 5px 0; )

Tricket här är att använda box-skuggan för att skapa några extra ramar. Du kan bara använda en kant, men så många box-skuggor som du vill. Vi kommer att använda längdvärdet för att skapa en "falsk" andra vit kant, 3px bred, utan oskärpa.

Sedan stilar vi kryssrutan, inget speciellt här:

/* stilar kryssrutan "håll mig inloggad"*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) .keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label( bredd: 80%; )

Vi kommer att styla botten av formuläret med hjälp av upprepade linjära gradienter för att skapa en randig bakgrund.

P.change_link( position: absolut; färg: rgb(127, 124, 124); vänster: 0px; höjd: 20px; bredd: 440px; utfyllnad: 17px 30px 20px 30px; font-size: 16px; text-align: right; border-top: 1px solid rgb(219, 229, 232 border-radius: 0 5px 5px bakgrund: rgb(225, 234, 235); 247, 247), rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(47,02, 7px, 47, 47, 7, 247, 247, 247, 247, 247, 235, 247, 247, 247, 247, 235, 247, 235) display: inline-block; fetstil: rgb(247, 241) stoppning: rgb(29, 162, 193) text-decoration; ; border-radius: 4px kantlinje: 1px solid rgb(74), 198) #wrapper p.change_link a:active( position: relativ; top: 1px; )

Nu kommer du att märka att vi har två fina former, men vi vill verkligen att bara en ska visas åt gången. Så nu är det dags för lite animationer!!

Skapar växlingsanimationen

Det första du ska göra är att dölja den andra formen genom att ställa in opaciteten till 0:

#register( z-index: 21; opacitet: 0; )

Kommer du ihåg att vårt inloggningsformulär hade ett z-index på 22? Vi kommer att ge den andra formen ett z-index på 21, för att sätta det "under" inloggningsformuläret.

Och nu den riktigt bra delen: byta formulär med pseudoklassen:target. Vad du verkligen måste förstå om:target är att vi kommer att använda ankare för att göra övergången. Det normala beteendet för en ankarlänk är att hoppa till målet på sidan. Men vi vill inte hoppa någonstans, vi vill bara byta formulär. Och här kommer vårt trick med de två länkarna överst på sidan. Istället för att direkt länka till den andra formen och riskera att få en "hoppande" effekt, lägger vi faktiskt de två länkarna överst på sidan och ger dem display: ingen. Detta kommer att undvika sidhopp. Kredit där kredit ska betalas: Jag hittade det här tricket på CSS3 create (på franska).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; )

Så detta är vad som händer: när vi klickar på Följ med oss knappen utlöser vi #toregister. Vi gör sedan animeringen genom att använda syskonväljaren ~ för att hitta vårt #register-element. Vi använder en animation som heter fadeInLeft. Eftersom vi "gömmer" formuläret med noll opacitet kommer vi att använda en animation som tonar in för att få den att synas. Vi har också ändrat z-indexet så att det visas ovanpå den andra formen.
Samma sak händer för den andra formen.

Och här är koden för animationen. Vi använder CSS3-animationsramverket från Dan Eden och anpassade det för denna handledning.

Animate( animation-duration: 0,5s; animation-timing-function: ease; animation-fill-mode: both; ) @keyframes fadeInLeft ( 0% ( opacitet: 0; transform: translateX(-20px); ) 100% ( opacitet : 1 transform: translateX(0);

Formen som "försvinner" kommer att ha en annan animation som kommer att få den att tona ut till vänster:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animationsnamn: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( opacitet: 1; transform: translateX(0); ) 100% ( opacitet : 0 transform: translateX(-20px);

Du kan nu använda andra animationer från Dan Edens animate.css: justera bara din .animate-klass och ersätt animationsnamnen. Du hittar också några anpassade animationer i slutet av filen animate-custom.css.

Tja, det är det gott folk. Jag hoppas att du tyckte om handledningen!

Observera att i vissa webbläsare bakgrundsklipp: text stöds inte. I Internet Explorer 9 övergångarna och animationerna fungerar inte, så det kommer inte att finnas något snyggt formbyte. I Internet Explorer 8 och under stöds inte:target-pseudoklassen, så den fungerar inte alls (du kommer bara att se inloggningsformuläret).