#subscribe, #login( poziție: absolut; sus: 0px; lățime: 88%; umplutură: 18px 6% 60px 6%; margine: 0 0 35px 0; fundal: rgb(247, 247, 247); chenar: 1px solid rgba(147, 184, 189,0.8): 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 5px rgba(208, 223, 226, 0.4); indicele z: 22;

Aici vom atribui proprietăți pentru antet:

/**** text ****/ #wrapper h1( font-size: 48px; culoare: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** În prezent, numai webkit acceptă background-clip:text; **/ #wrapper h1( fundal: -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: transparent -webkit-background-clip: text ) #wrapper h1:after; " "; lățime: bloc: 100%: fundal: liniar-gradient(stânga, rgba(147.184.189,0,8) 20% 147.184.189,1; 147.184.189,0,8) 79%, rgba(147.184.189,0) 100%);

Rețineți că astăzi doar browserele cu suport webkit background-clip:text, așa că vom crea un fundal cu dungi numai pentru webkit și îl vom lega de antetul H1. Din moment ce parametrul background-clip:text funcționează doar în browserele Webkit, am decis să lucrez doar cu proprietățile webkit-ului. De aceea am împărțit CSS-ul în două părți și am folosit doar gradientul webkit-ului. Cu toate acestea, nu ar trebui să utilizați doar webkit pe site-urile dvs. web! Deci, de exemplu, parametrul -webkit-text-fill-color: transparent ne permite să avem un fundal transparent, dar numai pentru browserele webkit, toate celelalte browsere vor ignora această proprietate.

De asemenea, am creat o linie subțire sub titlu folosind elementul pseudo-clasă :after. Am folosit un gradient cu o înălțime de 2 px și am redus opacitatea la margini la zero.

Acum să avem grijă de câmpurile de intrare și să le facem să arate frumos.

/**** stil de intrare avansat ****/ /* substituent */ ::-webkit-input-placeholder ( culoare: rgb(190, 188, 188); stil font: italic; ) input:-moz- substituent, textarea:-moz-placeholder( culoare: rgb(190, 188, 188); stil font: cursiv; ) intrare (contur: niciunul; )

În primul rând, vom modela marginile și vom elimina conturul. Dar fiți atenți: conturul îl ajută pe utilizator să înțeleagă în ce câmp se află. Dacă îl eliminați, trebuie să aplicați proprietățile: activ și: focus.

/* toate câmpurile exclud trimiterea și caseta de selectare */ #wrapper input:not())( lățime: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; chenar: 1px solid rgb(178, 178, 178); box -sizing: content-radius: 3px box-shadow: 0px 4px 0px rgba(168, 168, 168, 0.6) inset: all 0.2s liniar; focus (chenar: 1px rgba solid(91, 90, 90, 0,7); fundal: rgba(238, 236, 240, 0,2); umbră casetă: 0px 1px 4px 0px rgba(168, 168, 168, 0,9)

Aici am folosit pseudo class:not pentru a stila toate câmpurile, cu excepția casetelor de selectare. În plus, am decis să elimin stroke și am adăugat proprietățile:focus și:active.

Acum este timpul să vă distrați: font cu pictograme. Deoarece nu putem folosi pseudo-clasele :before și :after, vom adăuga pictograma la parametrul label și apoi o vom plasa în câmp. Voi folosi biblioteca fontomas. Puteți potrivi singur pictogramele cu litera corespunzătoare. Amintiți-vă atributul pictogramă de date? Aici trebuie să introduceți litera. am folosit pictogramă-date=’u’ pentru autentificare, „e” pentru e-mail, „p” pentru parolă. Odată ce am selectat literele, am descărcat fontul și am folosit generatorul de fonturi fontsquirrel pentru a-l converti într-un format potrivit pentru @font-face.

@font-face (familie de fonturi: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- tip deschis"), url("fonturi/fontomas-webfont.woff") format("woff"), url("fonturi/fontomas-webfont.ttf") format ("truetype"), url("fonturi/fontomas-webfont.ttf") .svg#FontomasCustomRegular") format("svg"); greutate font: normal; stil font: normal; ) /** truc magic! **/ :after ( conținut: attr(data-icon); font-family: "FontomasCustomRegular"; culoare: rgb(106, 159, 171); poziție: absolut; stânga: 10px; sus: 35px; lățime: 30px; )

Asta e tot. Nu trebuie să aveți o clasă separată pentru fiecare pictogramă. Am folosit parametrul conținut: attr(pictogramă de date) pentru a obține scrisoarea din atributul data-icon. Astfel, trebuie doar să atribuim un font, să selectăm o culoare și să plasăm o pictogramă.

Acum să atribuim reguli pentru butonul de trimitere a formularului.

/*stil ambele butoane*/ #wrapper p.button input( lățime: 30%; cursor: pointer; fundal: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow „,Arial,sans-serif; culoare: #fff; dimensiunea fontului: 24px; chenar: 1px rgb solid(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0) , 0, 0,5); bordura-rază: 3px 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 3px px (210, 210, 210); tranziție: toate 0.2s liniar; ) #wrapper p.button input:hover( background: rgb(74, 179, 198); ) #wrapper p.button input:activ butonul de intrare:focus( fundal: rgb(40, 137, 154); poziție: relativ; sus: 1px; chenar: 1px rgb solid(12, 76, 87); umbră casetă: 0px 1px 6px 4px rgba(0, 0); , 0, 0,2) inserare ) p.login.button, p.signin.button( text-align: right; margin: 5px 0; )

Trucul este să folosești box-shadow pentru a crea mai multe cadre. Desigur, puteți folosi un singur cadru, dar puteți folosi și mai multe. Vom folosi parametrul de lungime pentru a crea un al doilea chenar alb „fals”, de 3px lățime, fără estompare.

Acum să stilăm caseta de selectare, nu vom face nimic neobișnuit aici:

/* Stilează caseta de selectare „Ține-mă minte”*/ .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( lățime: 80%; )

Stilizarea subsolului formularului folosind mai mulți gradienți liniari pentru a crea un gradient cu dungi.

P.change_link( poziție: absolut; culoare: rgb(127, 124, 124); stânga: 0px; înălțime: 20px; lățime: 440px; padding: 17px 30px 20px 30px; font-size: 16px; text-align: right; border-top: 1px solid rgb(219, 229, 232 border-radius: 0 0 5px 5px background: rgb(225, 234, 235): repetare-linear-gradient(-45deg, rgb); 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247, 247) ; display: inline-block: bold: rgb (247, 248, 241); ; border-radius: 1px solid rgb(203, 213, 214: toate 0,4 s rgb (247, 247); 198) #wrapper p.change_link a:active( poziție: relativă; sus: 1px; )

Acum puteți vedea că avem două forme frumoase, dar vrem să fie afișată doar una dintre ele. E timpul pentru animație!

#register( indexul z: 21; opacitate: 0; )

Amintiți-vă că formularul de conectare are un z-index: 22? Pentru al doilea formular vom atribui acest parametru la 21 pentru a-l pune „sub” formularul de autentificare.

Acum partea distractivă: schimbăm formularele folosind pseudo class:target. Trebuie să înțelegeți un lucru despre :target: vom folosi ancore pentru ao muta. Comportamentul normal al unei ancori este să sară la un anumit element de pagină. Dar nu vrem asta, vrem doar să schimbăm formele. Acesta este locul în care trucul nostru de a folosi două link-uri din partea de sus a paginii vine în ajutor. În loc să ne direcționăm direct către a doua formă și să riscăm efectul de salt, vom da link-urilor un parametru display: niciunul. Acest lucru va ajuta la evitarea săriturii. Am descoperit acest truc pe site: CSS3 create (franceză).

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

Iată ce se întâmplă: când facem clic pe buton Alăturați-vă, ne îndreptăm către #toreregistrare. Apoi are loc animația și abia apoi trecem la elementul #register. Folosim o animație numită fadeInLeft. Deoarece „ascundem” forma folosind transparență zero, vom aplica o animație care va apărea treptat. De asemenea, am schimbat indicele z, astfel încât să apară deasupra celeilalte forme. La fel se întâmplă și cu cealaltă formă.
Iată codul pentru animație. Am folosit cadrul de animație CSS3 de la Dan Eden și am adaptat acest cadru pentru tutorialul nostru.

Animație (durată de animație: 0,5 s; funcție de sincronizare de animație: ușurință; modul de umplere de animație: ambele; ) @keyframes fadeInLeft ( 0% ( opacitate: 0; transformare: translateX (-20px); ) 100% ( opacitate : 1; transform: translateX(0);

Forma care „dispare” va avea o animație de estompare la stânga:

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

Acum puteți folosi alte animații din fișierul animate.css al lui Dan Eden: trebuie doar să schimbați clasa .animate și numele animației. Veți găsi și alte câteva animații la sfârșitul fișierului animate-custom.css.

Asta e tot, prieteni. Sper că v-a plăcut acest tutorial!

Rețineți că în unele browsere opțiunea background-clip:text nesuportat. Animațiile nu funcționează în Internet Explorer 9. În Internet Explorer 8 și versiunile anterioare, pseudo-clasă: pseudo-clasa țintă nu este acceptată, așa că acest efect nu va funcționa deloc acolo.

P.S.

Voi accepta cu plăcere orice comentarii referitoare la traducere într-un mesaj personal. Multumesc!

Etichete: Adăugați etichete

Formularele de autentificare pot fi găsite pe site-uri web cu forumuri, magazine, WordPress și, în general, tot ce este pe internet necesită formular de autentificare undeva pentru a avea acces la ceva. Întregul web este incomplet fără formulare de autentificare și formulare de înregistrare, înscrieri.

Formularele HTML vor fi primele pe care le întâlnim cei mai mulți dintre noi și cu CSS adecvat, care dă stil structurii HTML. În cele mai recente versiuni HTML, cred că HTML pare să fi optat pentru CSS3 ca opțiune implicită de stil al structurii. Oricum, ceea ce găsiți aici sunt formularele HTML, CSS preproiectate, construite de dezvoltatorii front-end și distribuite publicului în mod gratuit.

Această listă nu s-a încheiat încă, sunt interesat să găsesc noi modele de formulare de autentificare, așa că voi continua să actualizez aceste liste cu noi șabloane de formulare de autentificare când vor apărea în 2017. Rămâneți pe fază.

Un formular de conectare simplu și eficient pentru site-ul dvs. web, care necesită câmpuri de intrare de bază și fără programare suplimentară.

Un formular de autentificare plat conceput pentru site-ul dvs. care este deja plat. Descărcați și utilizați acest șablon în orice scop.

Ai nevoie de o conectare rapidă pentru clienții tăi? Nu vă faceți griji, acest formular de conectare frumos vă va ajuta să mergeți fără bătăi de cap. Descărcați codul sursă și verificați demonstrația deoarece puteți pune un nume de utilizator și o parolă exemplu în câmpuri și puteți încerca să vă autentificați. Veți fi direcționat către o pagină de profil de pe aceeași, care arată minunat cu un buton de deconectare care arată animația de deconectare.

Odată cu popularitatea designului de materiale Google în comparație cu designul plat, putem vedea un formular de conectare profund și atent umbrit și un formular de înregistrare în acest șablon css3.

Aici obțineți un alt formular de conectare genial pentru site-ul dvs. de afaceri cu opțiunea de a ascunde/afișa câmpurile de conectare. Designul bine codificat css/html/js vă va oferi o încărcare mai bună fără a modifica viteza actuală a site-ului.

O animație fluidă a formularului de autentificare care deschide secțiunea de conectare făcând clic pe o imagine sau pe un buton după cum aveți nevoie.

Aici veți găsi o interfață de utilizare a formularului de autentificare, care este plasată pe un fundal de ecran complet. Fișierul de descărcare vă va aduce css și html pentru o implementare ușoară a acestui login pe site-ul dvs.

Animațiile de clic afișate pe câmpurile de text sunt geniale, care afișează o mică animație glisantă a pictogramelor de utilizator și parolă. Puteți apoi să vă autentificați în formular pentru a urmări un pre-încărcare de autentificare, precum și un bloc de bun venit înapoi. Această descărcare conține toate fișierele sursă pentru a implementa un formular de conectare pentru propriul site web.

Aceasta este o versiune simplă a formularului de autentificare pe care o puteți afișa pe site-ul dvs., deoarece aceasta are, de asemenea, un impact mai mic asupra vitezei site-ului cu codul minim.

Un formular de conectare curat, cu fundal animat, oferind o senzație relaxantă întregii pagini. Descărcați întreg șablonul în format zip de pe codepen.

Integrați acest formular fluid de autentificare și înscriere pe site-ul dvs. web cu ușurință. Fișierul zip cu această descărcare vă va oferi șabloane css, html și js. Înscrierea la rețelele sociale este disponibilă și cu opțiuni de afișare/ascundere a parolei pentru o introducere ușoară a parolei pe ecran.

Un formular de conectare care se afișează cu efect de fadein este doar amuzant de urmărit. Acest efect poate fi observat doar în câteva forme moderne de conectare. Folosiți clic pe mine pentru a schimba formularul pentru a vă înscrie sau a crea formular.

Un formular de autentificare în stil minimal cu design plat poate fi descărcat de la linkul de mai jos. Validarea HTML este disponibilă și setată în acest șablon de conectare.

O validare pentru e-mail este în loc și acest șablon este pur css, html, fără module jquery luxoase.

Un singur formular pentru a vă autentifica pe site, precum și o opțiune de înscriere, înregistrare care poate fi răsturnată cu un clic. Chiar dacă zonei de înscriere lipsesc câteva câmpuri importante, aceasta este totuși o formă mai bună, cu toate funcțiile puternice.

Acest formular de conectare este ascuns dacă nu faceți clic pe linkul de conectare. Aceasta este o caracteristică foarte utilă pentru site-ul modern, care poate evita o pagină suplimentară pentru autentificare. Afișați autentificarea pe orice pagină doriți cu acest formular de conectare puternic.

Este furnizat atât ca PSD, cât și ca versiune HTML/CSS complet codificată, astfel încât să puteți începe să îl integrați imediat.

Un formular de conectare profesional. Descărcarea include fișierul PSD și, de asemenea, am simțit chef de codificare, așa că am inclus și fișierele xHTML, Js și CSS.

Un formular de conectare curat și simplu, cu un buton rotund de trimitere și stări de focalizare elegante.

Pur și simplu formular de autentificare stilat și proiectat exclusiv folosind CSS3. Formularul este creat folosind un marcaj destul de simplu și stilizat folosind proprietăți CSS3 foarte de bază.