Tere kõigile. Nii et oleme õppinud kujundite loomiseks mõnda elementi. On aeg ühendada oma teadmised suurema probleemi lahendamiseks. Loome saidil kõige lihtsama autoriseerimisvormi. Selleks vajame kahte välja, loome ja kinnitame neile allkirjad.
Esimene väli on sisselogimiseks, teine on parooli jaoks. Ja teisega pole see nii lihtne. Sest hetkel on see vaid tekstisisestusväli.
Tulemus brauseris:
Selleks, et sinna sisestatud tekst asendataks tärnidega, nagu seda tüüpi väljale tavaks, tuleb teha üks lihtne toiming. Nimelt atribuudi väärtuse asendamiseks tüüp sisse parool:
Tulemus: 
Vormi esitamise nupp
Olgu siin. Meie vorm on peaaegu valmis. Nüüd peate selle loomise lõpetamiseks tegema nupu, mis vormi esitab. Probleem lahendatakse sildi abil tüübiga esitama.
Kui nupul peaks olema mingi kiri, siis saab seda teha atribuudi abil väärtus. See on teie otsustada, kas määrata nupule nimi või mitte, kui te seda teete, saab server selle nime ja ka nupu väärtuse.
Reeglina on vormi esitamise nupu nimetus vaja siis, kui vormil on mitu nuppu, millest igaüks sooritab konkreetse toimingu. Tänu sellele saab server, saades brauserist nupu nime ja väärtuse, aru, millist nuppu kasutaja klõpsas ja mida tuleb vastavalt teha.
Selle tulemusena on meie vormi kood järgmine:
Tulemus brauseris: 
Tere, kallis sõber! Selles õpetuses õpime, kuidas luua kahte HTML5 vormi: sisselogimisvormi ja registreerimisvormi. Neid kujundeid vahetatakse üksteisega, kasutades pseudoklassi CSS3 :target. Kasutame CSS3 ja ikoonifondi. Selle demo mõte on näidata kasutajale sisselogimisvormi ja anda talle registreerimisvormi link "mine".
Selles õpetuses räägin üksikasjalikult, kuidas luua efekti nagu demos 1.
HTML
Kas olete juba liige? Mine ja logi sisse peidab automaatselt, mida kasutaja sisestab, ja asendab märgid punktide või tärnidega (olenevalt brauserist). Element type=email võimaldab brauseril kontrollida, kas meiliaadress on õigesti vormindatud. Lisaks kasutasime parameetrit nõua=nõutav; Seda sätet toetavad brauserid ei luba kasutajal vormi esitada enne, kui väli on täidetud. Parameeter autocomplete=on täidab automaatselt mõned väljad. Kasutasime ka alternatiivteksti, et aidata kasutajal vormi täita.
Nüüd kahest keerulisest punktist. Tõenäoliselt märkasite kahte linki vormi alguses. See kena trikk võimaldab meie vormil ankrutega töötades õigesti käituda.
Teine punkt on seotud ikoonidega fondi kasutamisega. Ikoonide kuvamiseks kasutame andmeatribuuti. Seadistamise parameeter data-icon=”icon_character” HTML-is vastavate märkide puhul peame kõigi ikoonide stiiliks määrama CSS-is ainult ühe reegli. Lisateavet selle tehnika kohta saate lugeda veebisaidilt: 24 viisi: ikoonide kuvamine fontide ja andmeatribuutidega.
CSS
Koodi puhtuse huvides jätan vahele põhiparameetrid(html, body jne), kuid leiate need lähtefailidest. Jällegi, ma kasutan CSS3 tehnikaid, mis ei tööta kõigis brauserites. Nii et alustame!Vormide kujundamine CSS3 abil
Esiteks anname oma vormidele alusstiili.#tellimine, #login(positsioon: absoluutne; ülemine: 0px; laius: 88%; polsterdus: 18px 6% 60px 6%; veeris: 0 0 35px 0; taust: rgb(247, 247, 247); ääris: 1px tahke rgba(147, 184, 189, 0,8; kasti vari: 0px 5px rgba(105, 108, 109, 0,7), 0px 8px rgba(208, 223, 226;) z-indeks: 22;
Siin määrame päise omadused:
/**** tekst ****/ #wrapper h1( fondi suurus: 48 pikslit; värv: rgb(6, 106, 117); täidis: 2px 0 10px 0; fondiperekond: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; polster-bottom: 30px; ) /** Praegu toetab ainult veebikomplekt background-clip:text; **/ #wrapper h1( taust: -webkit-repeating-linear-gradient(-45°, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); " "; ekraan: laius: 100% rgba(147,184,189,0,8) 79%, rgba(147,184,189,0) 100%;
Pange tähele, et täna ainult veebikomplekti toega brauserid taustaklipp: tekst, nii et teeme ainult veebikomplektile triibulise tausta ja seome selle H1 päisega. Alates parameetrist taustaklipp: tekst töötab ainult Webkiti brauserites, otsustasin töötada ainult veebikiti atribuutidega. Seetõttu jagasin CSS-i kaheks osaks ja kasutasin ainult veebikomplekti gradienti. Siiski ei tohiks te oma veebisaitidel kasutada ainult veebikomplekti! Nii näiteks parameeter -webkit-text-fill-color: läbipaistev võimaldab meil läbipaistvat tausta, kuid ainult veebikomplekti brauserite puhul ignoreerivad kõik teised brauserid seda omadust.
Samuti lõime pealkirja alla õhukese joone, kasutades pseudoklassi elementi :after. Kasutasime 2 piksli kõrgusega gradienti ja vähendasime servade läbipaistmatuse nullini.
Nüüd hoolitseme sisestusväljade eest ja muudame need ilusaks.
/**** täiustatud sisestuse stiil ****/ /* kohatäide */ ::-webkit-input-placeholder ( värv: rgb(190, 188, 188); fondi stiil: kaldkiri; ) input:-moz- kohahoidja, textarea:-moz-placeholder( värv: rgb(190, 188, 188); fondi stiil: kaldkiri; ) sisend (kontuur: puudub; )
Esiteks kujundame veerised ja eemaldame joone. Kuid olge ettevaatlik: ülevaade aitab kasutajal mõista, millisel väljal ta asub. Kui eemaldate selle, peate rakendama atribuudid: aktiivne ja: fookus.
/* kõik väljad välistavad esitamise ja märkeruudu */ #wrapper input:not())( laius: 92%; margin-top: 4px; polster: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box -sizing: sisu-kast: 3px 1px 0px rgba(168, 168, 0.6) üleminek: kõik 0,2s lineaarne ; fookus (ääris: 1px solid rgba(91, 90, 90, 0,7); taust: rgba(238, 236, 240, 0,2); kasti vari: 0px 1px 4px 0px rgba(168 , 168, 168) inset, 0)
Siin kasutasime pseudoklass:mitte kõigi väljade stiilimiseks, välja arvatud märkeruudud. Lisaks otsustasin löögi eemaldada ja lisasin omadused:focus ja:active.
Nüüd on aeg lõbutseda: ikoonidega font. Kuna me ei saa kasutada pseudoklasse :before ja :after, lisame ikooni sildi parameetrile ja asetame selle siis väljale. Ma kasutan fontomasi raamatukogu. Ikoonid saate ise vastava tähega sobitada. Pea meeles atribuut andmete ikoon? See on koht, kus peate tähe sisestama. kasutasin data-icon='u' sisselogimiseks, "e" e-posti jaoks, "p" parooliks. Kui olin tähed valinud, laadisin fondi alla ja kasutasin fontsquirrel fondigeneraatorit, et teisendada see @font-face jaoks sobivasse vormingusse.
@font-face ( fondiperekond: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") formaat("embedded- opentype"), url("fonts/fontomas-webfont.woff") formaat("woff"), url("fonts/fontomas-webfont.ttf") formaat("truetype"), url("fonts/fontomas-webfont" .svg#FontomasCustomRegular") formaat("svg"); fondi kaal: tavaline; fondi laad: tavaline; ) /** võlutrikk! **/ :after ( sisu: attr(data-icon); fondiperekond: "FontomasCustomRegular"; värv: rgb(106, 159, 171); asukoht: absoluutne; vasak: 10px; ülemine: 35px; laius: 30px; )
See on kõik. Iga ikooni jaoks ei pea olema eraldi klassi. Kasutasime parameetrit sisu: attr(data-icon) et saada täht atribuudist data-icon. Seega peame määrama ainult fondi, valima värvi ja asetama ikooni.
Nüüd määrame vormi esitamise nupule reeglid.
/*mole nuppude stiil*/ #wrapper p.button input (laius: 30%; kursor: kursor; taust: rgb(61, 157, 179); polster: 8px 5px; fondiperekond: "BebasNeueRegular","Arial Narrow ",Arial,sans-serif; värv: #fff; fondi suurus: 24px; ääris: 1px solid rgb(28, 108, 122); veeris-alumine: 10px; teksti vari: 0 1px 1px rgba(0, 0 , 0, 0,5); äärise raadius: 3px 1px 6px 4px rgba(0, 0, 0, 0,07) sisestus, 0px 0px 0px 3px rgb(254, 254, 0px 3px) (210, 210, 210); üleminek: kõik 0,2s lineaarne ) #wrapper p.button input:hover( background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. nupu sisend:fookus (taust: rgb(40, 137, 154); asend: suhteline; ülaosa: 1px; ääris: 1px solid rgb(12, 76, 87); kasti vari: 0px 1px 6px 4px rgba(0, 0) , 0, 0,2) sisestus
Trikk on kasutada kastivarju mitme kaadri loomiseks. Loomulikult võite kasutada ainult ühte raami, kuid võite kasutada ka mitut. Kasutame pikkuse parameetrit, et luua "võlts" teine valge ääris, laius 3 pikslit, ilma hägususeta.
Nüüd muutkem märkeruutu stiili, me ei tee siin midagi ebatavalist:
/* laadige kast "mäleta mind" */ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label(kuva: inline-block; fondi suurus: 12px; fondi stiil: kaldkiri; ) . keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin silt( laius: 80%; )
Vormi jaluse stiil mitmekordsete abil lineaarsed gradiendid triibulise gradiendi loomiseks.
P.change_link(position: absoluutne; värv: rgb(127, 124, 124); vasak: 0px; kõrgus: 20px; laius: 440px; polsterdus: 17px 30px 20px 30px; fondi suurus: 16px; teksti joondamine: paremale; border-top: 1px solid rgb(219, 229, 232) border-radius: 0 0 5px background: rgb(225, 234, 235); 247, 247) , rgb(247, 247, 247) 15 pikslit, rgb(225, 234, 235) 15 pikslit, rgb(225, 234, 235) 30 pikslit, rgb(247, 247) 7, 02px. ekraan: fondi paksus: rgb (247, 241) värv: rgb (29, 162, 193); ääris-raadius: 1px rgb(203, 213, 214); 198) #wrapper p.change_link a:active(positsioon: suhteline; ülemine: 1px; )
Nüüd näete, et meil on kaks kena kujundit, kuid me tahame, et kuvatakse ainult üks neist. Animatsiooni aeg on käes!
Animatsiooni loomine
Esimese asjana peidame teise kujundi, määrates läbipaistmatuse väärtuseks 0:#register(z-indeks: 21; läbipaistmatus: 0; )
Pidage meeles, et sisselogimisvormil on z-indeks: 22? Teise vormi puhul määrame selle parameetri väärtusele 21, et panna see sisselogimisvormi alla.
Nüüd lõbus osa: vahetame vorme kasutades pseudoklass:target. Peate mõistma üht asja :target kohta: me kasutame selle liigutamiseks ankruid. Ankru tavapärane käitumine on hüpata kindlale leheelemendile. Aga me ei taha seda, me tahame lihtsalt kujundeid vahetada. Siin tulebki appi meie trikk kasutada kahte linki lehe ülaosas. Selle asemel, et suunata meid otse teisele vormile ja riskida hüppeefektiga, anname linkidele parameetri ekraan: puudub. See aitab vältida hüppamist. Avastasin saidilt selle nipi: CSS3 create (prantsuse).
#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login(z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; )
See juhtub: kui klõpsame nuppu Liitu, liigume #toregister. Seejärel toimub animatsioon ja alles siis liigume #register elemendi juurde. Kasutame animatsiooni nimega fadeInLeft. Kuna me “peidame” kuju nulli läbipaistvust kasutades, rakendame animatsiooni, mis ilmub järk-järgult. Muutsime ka z-indeksit nii, et see ilmuks teise kujundi peale. Sama juhtub ka teise vormiga.
Siin on animatsiooni kood. Kasutasime Dan Edeni CSS3 animatsiooniraamistikku ja kohandasime seda raamistikku oma õpetuse jaoks.
animatsioon : 1 teisendus: translateX(0);
Kujundil, mis "kaob", on vasakule tuhmumisanimatsioon:
#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animatsiooninimi: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( läbipaistmatus: 1; teisendus: translateX(0); ) 100% ( läbipaistmatus : 0 teisendus: translateX(-20px);
Nüüd saate kasutada Dan Edeni teisi animatsioone, kasutades faili animate.css: lihtsalt muutke .animate klassi ja animatsiooni nimesid. Faili animate-custom.css lõpust leiate ka mitmeid muid animatsioone.
See on kõik, sõbrad. Loodan, et teile meeldis see õpetus!
Pange tähele, et mõnes brauseris on see valik taustaklipp: tekst ei toetata. Animatsioonid ei tööta Internet Explorer 9-s. Internet Explorer 8 ja vanemates versioonides pseudoklass:sihtmärk pseudoklassi ei toetata, seega see efekt seal üldse ei tööta.
P.S. Kõik kommentaarid tõlke kohta võtan hea meelega isikliku sõnumiga vastu. Aitäh!
Sildid: lisa sildid
Stiilime selle CSS3 ja ikoonifondi abil. Selle demo idee on näidata kasutajale sisselogimisvormi ja anda link registreerimisvormile üleminekuks.
Pange tähele, et see on mõeldud ainult demoeesmärgiks, see töötab ainult brauseris, mis toetab pseudoklassi:target ja te ei tohiks seda koodi kasutada reaalajas veebisaidil ilma kindla varuta.
Järgnevalt vaatame läbi Demo 1.
HTML
HTML-i paneme mõlemad vormid, peites teise CSS-iga. Siin on kood, ma selgitan mõnda huvitavat osa hiljem.
Oleme siia lisanud HTML5 headust ja kasutanud mõningaid uusi sisendeid. Sisend Mine ja logi sisse peidab automaatselt selle, mida kasutaja sisestab, ja asendab selle punktidega (olenevalt brauserist). Sisend type=email võimaldab brauseril kontrollida, kas kasutaja sisestatu on kehtiva e-posti aadressi vormingus. Oleme kasutanud ka nõua=nõutav atribuut; seda atribuuti toetavad brauserid ei lase kasutajal vormi esitada enne, kui see väli on täidetud, JavaScripti pole vaja.
The autocomplete=on atribuut eeltäidab väärtused varasema kasutaja sisendi põhjal. Kasutasime sisendite jaoks ka mõningaid toredaid kohahoidjaid, mis näitavad suunavat väärtust, kui sisend pole täidetud.
Nüüd kaks keerulist osa. Võib-olla olete neid kahte märganud lingid vormi ülaosas. See on väike nipp, mis paneb meie vormi ankrutega mängides kenasti käituma, et see ei "hüppaks" pikkadele lehtedele, kui klõpsame lülituslingil ja käivitame pseudoklassi:target.
Teine väike nipp on seotud ikoonifondi kasutamisega. Ikoonide kuvamiseks kasutame andmeatribuuti. Seadistades data-icon=”icon_character” koos vastava märgiga HTML-is vajame kõigi ikoonide stiiliks vaid ühte CSS-i atribuudi valijat. Lisateavet selle tehnika kohta leiate jaotisest 24 viisi: ikoonide kuvamine fontide ja andmeatribuutidega.
CSS
Koodi selguse huvides jätan selles õpetuses välja kõik müüja eesliited, kuid loomulikult leiate need failidest. Taaskord kasutan mõnda üsna täiustatud CSS3 nippi, mis ei pruugi kõigis brauserites töötada. Alustame.
Mõlema vormi kujundamine CSS3 abil
Esiteks anname kahele vormile konteineri üldise stiili.
#tellimine, #login(positsioon: absoluutne; ülemine: 0px; laius: 88%; polsterdus: 18px 6% 60px 6%; veeris: 0 0 35px 0; taust: rgb(247, 247, 247); ääris: 1px tahke rgba(147, 184, 189, 0,8; kasti vari: 0px 5px rgba(105, 108, 109, 0,7), 0px 8px rgba(208, 223, 226;) z-indeks: 22;
Lisasime kena kastivarju, mis koosneb kahest varjust: sisemise varju loomiseks sinisest ja välisvarjust. Selgitame veidi z-indeksit.
Järgnevalt kujundame päise mõne taustalõikega:
/**** üldine teksti stiil ****/ #wrapper h1( fondi suurus: 48 pikslit; värv: rgb(6, 106, 117); polsterdus: 2px 0 10px 0; fondiperekond: "FranchiseRegular"," Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; polster-bottom: 30px; ) /** Hetkel toetab ainult veebikomplekt taustaklippi:tekst; */ #wrapper h1( taust: -webkit-repeating-linear-gradient(-45°, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb (64, 111, 118) 40px, rgb(18, 83, 93) 40px); "; ekraan: plokk; laius: 100%; kõrgus: 2 pikslit; veeris ülaosas: 10 pikslit; taust: lineaarne gradient (vasak, rgba(147,184,189,0) 0%, rgba (147,184,189,0,8) 20%, rgba(147,184) ,1) 53%, rgba(147,184,189,0,8) 79%, rgba(147,184,189,0) 100%));
Pange tähele, et praegu toetavad ainult veebikomplekti brauserid taustaklipp: tekst, seega loome siin ainult veebikomplekti jaoks eemaldatud tausta ja lõikame selle teksti külge, et lisada H1 pealkirjale triibud. Alates taustaklipp: tekst atribuut töötab praegu ainult Webkiti brauserites, otsustasin kasutada ainult webkiti eesliitet. See on põhjus, miks ma jagasin CSS-i deklaratsiooni kaheks osaks ja kasutan ainult veebikomplekti eesliitega gradienti. Ainult eesliite –webkit- kasutamine on halb tava, see on ainult demoeesmärgil ja te ei tohiks seda kunagi teha päris veebisaidil! See on ka koht, kus -webkit-text-fill-color: läbipaistev tuleb kasuks: see võimaldab meil veebikomplekti brauserites kasutada ainult läbipaistvat tausta, kõik teised eiravad seda ja annavad meile tekstivärvi varu.
Pealkirja alla lõime ka hääbuva joone pseudoklassi abil:after. Kasutame 2 piksli kõrguse gradienti ja tuhmistame tausta mõlemas otsas 0 läbipaistmatuseni.
Nüüd kujundame oma sisendid stiili ja anname neile kena välimuse.
/**** täiustatud sisestuse stiil ****/ /* kohatäide */ ::-webkit-input-placeholder ( värv: rgb(190, 188, 188); fondi stiil: kaldkiri; ) input:-moz- kohahoidja, textarea:-moz-placeholder( värv: rgb(190, 188, 188); fondi stiil: kaldkiri; ) sisend (kontuur: puudub; )
Kõigepealt kujundame sisendid stiili ja eemaldame kontuuri. Kuid ole siin ettevaatlik; ülevaade aitab kasutajal teada, milline sisend on fokuseeritud, nii et kui te selle eemaldate, peaksite sisestama mõned:active ja:focus olekud.
/* kogu sisend, välja arvatud esitamine ja märkeruut */ #wrapper input:not())(laius: 92%; ülemine veeris: 4px; polsterdus: 10px 5px 10px 32px; ääris: 1px solid rgb(178, 178, 178) ; kasti suurus: äärise raadius: 0px 1px rgba(168, 168, 0,6) üleminek: kõik 0,2 s lineaarne; :focus( ääris: 1px solid rgba(91, 90, 90, 0,7); taust: rgba(238, 236, 240, 0,2); kasti vari: 0px 1px 4px 0px rgba(168, 168, 0,19) in,set )
Siin kasutasime pseudoklassi:not, et kujundada kõik sisendid, välja arvatud märkeruut. Andsin oleku:focus ja:active, kuna otsustasin kontuuri eemaldada.
Ja nüüd lõbus osa: ikooni font. Kuna me ei saa sisendites kasutada pseudoklasse:enne ja:after, peame natuke pettuma: lisame ikooni sildile ja asetame selle siis sisendisse. Ma kasutan fontomasi raamatukogu, mis paneb kokku mõned toredad ikoonid. Saate neid ümber korraldada, et määrata ikoon konkreetsele tähele. Pea meeles andmete ikoon atribuut? See on koht, kuhu peaksite kirja panema. kasutasin data-icon='u' kasutaja jaoks, "e" e-posti jaoks, "p" parooli jaoks. Kui olin tähed valinud, laadisin fondi alla ja kasutasin fontsquirrel fondigeneraatorit, et muuta see @font-face'iga ühilduvaks vorminguks.
@font-face ( fondiperekond: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") formaat("embedded- opentype"), url("fonts/fontomas-webfont.woff") formaat("woff"), url("fonts/fontomas-webfont.ttf") formaat("truetype"), url("fonts/fontomas-webfont" .svg#FontomasCustomRegular") formaat("svg"); fondi kaal: tavaline; fondi stiil: tavaline; ) /** võluikoonitrikk ! **/ :after ( sisu: attr(data-icon); fondiperekond: "FontomasCustomRegular"; värv: rgb(106, 159, 171); asukoht: absoluutne; vasak: 10px; ülemine: 35px; laius: 30px; )
Jah, see on kõik, inimesed, teil ei pea olema iga ikooni jaoks klassi. Me kasutasime sisu: attr(data-icon) tähe hankimiseks atribuudist data-icon, nii et peame ainult fondi deklareerima, valima kena värvi ja asetama selle.
Nüüd kujundame mõlema vormi esitamisnupu stiili.
/*mõlema esitamisnupu stiil */ #wrapper p.button input( laius: 30%; kursor: kursor; taust: rgb(61, 157, 179); polster: 8px 5px; fondiperekond: "BebasNeueRegular","Arial Kitsas",Arial, ilma seriifita; värv: #fff; fondi suurus: 24 pikslit; ääris: 1px solid rgb(28, 108, 122); veeris-alumine: 10px; tekstivari: 0 1px 1px rgba(0, 0, 0, 0,5); äärise raadius: 3px 1px 6px 4px rgba(0, 0, 0, 0,07) sisestus, 0px 0px 0px 3px rgb(254, 254, 0px 3p54), rgb(210, 210, 210); üleminek: kõik 0.2s lineaarne ) #wrapper p.button input:hover( background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p; .button input:focus( taust: rgb(40, 137, 154); asend: suhteline; ülemine: 1px; ääris: 1px solid rgb(12, 76, 87); kasti vari: 0px 1px 6px 4px rgba(0, 0, 0, 0,2) sisestus; ) p.login.button, p.signin.button(teksti joondamine: parem; veeris: 5px 0
Siin on nipp kasutada kasti varju, et luua lisapiire. Võite kasutada ainult ühte äärist, kuid nii palju varje, kui soovite. Kasutame pikkuse väärtust, et luua "võlts" teine valge ääris, laius 3 pikslit, ilma hägususeta.
Seejärel kujundame märkeruudu stiili, siin pole midagi erilist:
/* märgistades linnukese "hoia mind sisse logituna"*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: kursiiv; ) .keeplogin input#loginkeeping( margin-right: 5px; ) .keeplogin label( laius: 80%; )
Stiilime vormi põhja, kasutades korduvaid lineaarseid gradiente, et luua triibuline taust.
P.change_link(position: absoluutne; värv: rgb(127, 124, 124); vasak: 0px; kõrgus: 20px; laius: 440px; polsterdus: 17px 30px 20px 30px; fondi suurus: 16px; teksti joondamine: paremale; border-top: 1px solid rgb(219, 229, 232) border-radius: 0 0 5px background: rgb(225, 234, 235); 247, 247) , rgb(247, 247, 247) 15 pikslit, rgb(225, 234, 235) 15 pikslit, rgb(225, 234, 235) 30 pikslit, rgb(247, 247) 7, 02px. ekraan: fondi paksus: rgb (247, 241) värv: rgb (29, 162, 193); ääris-raadius: 1px rgb(203, 213, 214); 198) #wrapper p.change_link a:active(positsioon: suhteline; ülemine: 1px; )
Nüüd märkate, et meil on kaks kena vormi, kuid me tõesti tahame, et korraga näidataks ainult ühte. Nii et nüüd on aeg teha animatsioone!!
Lülitusanimatsiooni loomine
Esimene asi, mida teha, on peita teine vorm, määrates läbipaistmatuse väärtuseks 0:
#register(z-indeks: 21; läbipaistmatus: 0; )
Pea meeles, et meie sisselogimisvormi z-indeks oli 22? Teisele vormile anname z-indeksi 21, et panna see sisselogimisvormi alla.
Ja nüüd tõesti hea osa: vormide vahetamine pseudoklassi:target abil. Mida sa tõesti mõistma: sihtmärk, on see, et me kasutame ülemineku tegemiseks ankruid. Ankurlingi tavaline käitumine on hüpata lehel sihtmärgini. Kuid me ei taha kuhugi hüpata, tahame ainult vorme vahetada. Ja siit tuleb meie trikk, kasutades kahte lehe ülaosas olevat linki. Selle asemel, et linkida otse teisele vormile ja riskida hüppeefektiga, paneme kaks linki lehe ülaossa ja anname neile ekraan: puudub. See väldib lehe hüppamist. Krediit, kui krediit tuleb tasuda: leidsin selle nipi CSS3 loomisest (prantsuse keeles).
#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login(z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; )
Nii juhtubki nii: kui klõpsame nupul Liituge meiega nuppu, käivitame #toregister. Seejärel teeme animatsiooni, kasutades oma #register elemendi leidmiseks vendade valijat ~. Kasutame animatsiooni nimega fadeInLeft. Kuna me "peidame" vormi nulli läbipaistmatusega, kasutame selle kuvamiseks animatsiooni, mis sumbub sisse. Samuti oleme muutnud z-indeksit, et see ilmuks teise vormi kohal.
Sama juhtub ka teise vormiga.
Ja siin on animatsiooni kood. Kasutame Dan Edeni CSS3 animatsiooniraamistikku ja kohandame selle selle õpetuse jaoks.
animatsioon : 1 teisendus: translateX(0);
"Kaoval" vormil on veel üks animatsioon, mis muudab selle vasakule kahvatuks:
#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( animatsiooninimi: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( läbipaistmatus: 1; teisendus: translateX(0); ) 100% ( läbipaistmatus : 0 teisendus: translateX(-20px);
Nüüd saate kasutada muid animatsioone Dan Edeni saidilt animate.css: lihtsalt kohandage oma .animate klassi ja asendage animatsioonide nimed. Faili animate-custom.css lõpust leiate ka kohandatud animatsioone.
Noh, see on kõik, inimesed. Loodan, et teile meeldis õpetus!
Pange tähele, et mõnes brauseris taustaklipp: tekst ei toetata. Internet Explorer 9-s üleminekud ja animatsioonid ei tööta, seega ei toimu väljamõeldud vormivahetust. Internet Explorer 8 ja vanemates versioonides:target pseudoklassi ei toetata, seega see ei tööta üldse (näete lihtsalt sisselogimisvormi).
Kas teil on veebisait? Kui teie vastus sellele küsimusele on jah,
siis klassikaline must have on atraktiivne sisselogimisvorm. Olgu selleks suhtlusportaal või moepood, meilisait või veebiajakiri, esimene asi, mis kliendile silma hakkab, on sisselogimisvõimalus. Seega, miks mitte lasta oma kliendil esimesel kontaktil saada soovitud mulje. Laadige alla ja hankige oma veebisaidi välimus, mis loob igavese esmamulje.
Kasulikud artiklid:
HTML5 õpetus – lihtsa HTML-i sisselogimisvormi loomine CSS-i abil!
Valge läbipaistev HTML-i sisselogimisvormi mall
Sisselogimisvorm– Orange Skin Type on hõlpsasti kasutatav sisselogimisvormi mall, mille PSD on valmis CSS-iks teisendamiseks. See on varustatud erinevate stiilidega nuppude jaoks ja on väga kohandatav.
Põhiline sisselogimisvormi mall Tasuta HTML
8 Modern & Web 2.0 sisselogimis-/registreerimispaneelid on futuristliku hõnguga sisselogimisvormide komplekt, millel on omapärane ja kasutusvalmis kujundus. Need vormid on kihilistes PSD-des ja neid saab hõlpsasti redigeerida. Allikas: codepen.io
Black Skin HTML-i sisselogimisvormi mall
Moodsad sisselogimis- ja registreerimisvormid näevad elegantse ja nutika disainiga väga ahvatlevad välja. PSD nutikad objektid ja kujundid on kergesti redigeeritavad, muutes selle malli väga paindlikuks ja kohandatavaks vastavalt teie vajadustele.
Päeva/öine sisselogimisleht on väga võluv HTML-i sisselogimismall, mida on saadaval kahes variandis. Erksavärvilised nupud tumedal või valgel taustal on väga pilkupüüdvad ja seda malli on lihtne redigeerida.
Sisselogimis-/registreerimisvorm paroolimõõturiga
Sellel mallil on paroolimõõtja ja sellel on täiesti läbipaistev paigutus minimaalsete kujundusefektidega. Nende taustal on roosakas varjund. Neil on kohandatav sisselogimisleht. Disain põhineb ühel PSD-kihil, mis muudab selle hõlpsasti redigeeritavaks. Tekstid on ka redigeeritavad ja kaasas Google Web Fonts.
Batmani stiilis tume CSS3 sisselogimisvormi allalaadimine
Sellel tumedama välimusega disainermallil on suurepäraselt redigeeritav ja lihtsa kujundusega CSS3 sisselogimisvorm. Täiuslikult reageeriv mall töötab paremini igas seadmes, nii mobiiltelefonis kui ka lauaarvutis. See on prinditav ja seda saab vastavalt vajadusele kohandada. See nišisisselogimisvormi kujundus, see mall sobib suurepäraselt kasutamiseks ettevõtete ja professionaalsete WordPressi saitide jaoks.
Lihtsa HTML5 sisselogimisvormi lähtekoodi näidis
Need vormid on suurepäraselt reageerivad ja tagavad lihtsa, lihtsa kena paigutusega. Neil on ka tumedam taust ja alustuseks valge sisselogimisvorm. See mall sobib kõige paremini veebisaitide lehtede lisamiseks ja nendega ühenduse võtmiseks. Nende välimus muudab need suurepäraselt sobivaks mis tahes veebisaidi seadete jaoks. See on täielikult redigeeritav.
8 kaasaegset HTML-i sisselogimise paneeli
Äärmiselt nišipaigutusega mall sisaldab 8 kaasaegset HTML-põhist registreerumispaneeli. Sellel on valge paigutus ja väga ainulaadsed kujundusstruktuurid, mis on ideaalselt integreeritud, et luua sisselogimisvormidele hämmastavaid efekte. See on täiesti tundlik ja seda saab vastavalt vajadusele redigeerida. See sobib suurepäraselt nii äri- kui ka ajaveebisaitidele.
Täiesti lihtsad ja lihtsad mallifailid, neid saab hõlpsasti kohandada ja need on tõenäoliselt brauserisõbralikud. Mall töötab suurepäraselt iga seadmega, olgu see suur või väike, sülearvuti või tahvelarvuti, nutitelefoni või lauaarvutiga. Sellel on lihtne sisselogimisleht html-valikus. Google'i sisselogimistööriist on integreeritud. Juurdepääs Google'i kontole e-posti ja parooliga.
Kuidas oma veebisaidil kohandatud sisselogimisvormi kasutada
Oma WordPressi veebisaidi jaoks kohandatud sisselogimisvormi loomine on uusimate teemade ja mallide abil üsna lihtne. Need on täielikult kohandatavad ja muudetavad. Nüüd muutke sisselogimislogo atraktiivsemaks muutmiseks. Asendage logo oma brändi ikooniga. See aitab brändingu osas ja kujutab külastajatele selget sõnumit. Saadaval on mitu pistikprogrammi, mis aitavad luua teie veebisaidi jaoks kohandatud sisselogimisvormi. Neid pistikprogramme on lihtne installida ja need aitavad pakkuda kõige uuenduslikumaid sisselogimislehti, mis on teie veebisaidi jaoks täielikult redigeeritavad ja reageerivad. Kohandatud sisselogimisvormi kasutamine veebisaidil muutub lihtsamaks.
Kuidas kujundada / luua sisselogimisvormi HTML-is
Ettevõtluse jaoks on väga oluline kena ja loomingulise sisselogimisvormi olemasolu. See on paljude klientide jaoks esimene kontaktpunkt ja seetõttu tuleks ideaalse disainiga sisselogimisvormi loomiseks teha palju pingutusi. Kogu veebilehte on võimalik kodeerida HTML-is ning veebis on saadaval ka tasuta HTML5 ja CSS3 sisselogimisvormide allalaadimine. Neid malle saab kasutada vähese muudatusega ning see säästab palju aega ja vaeva mis tahes lehe kujundamisel. Mõned võivad eelistada tasuliste mallide kasutamist veebi kujundamisel ja teised võivad selle lihtsalt nullist luua.
HTML-i päev-öine sisselogimislehe mall
Väga ainulaadne päev-öö seadetega sisselogimisleht, see mall on täielikult reageeriv ja lubab brauseritevahelist ühilduvust. See on disaini paigutuse ja nuppude konfiguratsiooni osas täiesti nišš. Sellel on Twitteri, Facebooki ja Google+ kaudu mitu sotsiaalse sisselogimise võimalust. Sellel mallil on näidisvormid, mida saab hõlpsasti kohandada.
Horisontaalne reageeriv sisselogimisvormi kasutajaliidese kujundus
Sellel mallil on horisontaalne paigutus ja see tõotab olla 100% tundlik, mis muudab need suurepäraselt juurdepääsetavaks nii lauaarvutitele kui ka nutitelefonidele. Seda saab kohandada ilma probleemideta. See on laheda taevasinise paigutusega, mis koosneb rippmenüüst ja raadionuppudest. See sobib suurepäraselt isiklike registreerimisvormide ja ajaveebisaitide jaoks.
Ilus sisselogimisvorm uute HTML5 atribuutidega
Minimalistliku ja lihtsa kujundusliidese abil sobib see malli sisselogimisvorm ideaalselt tänapäevaste veebisaitide jaoks. Sellel mallil on kihilised PSD-failid ja hõlpsasti kohandatavad funktsioonid. Seal on lai valik HTML5 atribuute, mis muudavad selle nii eriliseks ja ainulaadseks. See ühildub ideaalselt mobiilseadmetega, nagu nutitelefon ja tahvelarvutid. võite ka näha.
HTML-koodiga sisselogimisvormi mall
Allikas: premiumfreebies.eu | Sellel HTML-mallil on lihtne liides ja minimalistlik kujundus. See ühildub erinevate brauseritega ning pakub lihtsat ja kiiret laadimist. See tõotab olla printerisõbralik. Mõned funktsioonid hõlmavad Google'i veebifonte, viilutatud PSD-d, rippmenüüd, kohandatavat värviteema, faviconi ja sotsiaalse jagamise valikuid.
Tume HTML-i sisselogimisvormi mall
Sellel mallil on üsna tumedam välimus. Kuid sellel on kaine ja nišipaigutus, mis tõotab pakkuda sektsioonide vahel lihtsat navigeerimist. 100% tundlik ja hõlpsasti kohandatav mall sobib kõige paremini meelelahutus- ja ajakirjaportaalide jaoks. See on rikkalik ja silmadele kerge.
Ilus CSS3 sisselogimisvormi mall
See on väga elegantse disainiga ja nišimalle vormide ja sisselogimislehtede jaoks. Registreerimisvormi malli html css tasuta allalaadimine on tundlik ja töötab suurepäraselt iga brauseriga, olgu see siis IE, Chrome või Safari. Sellel on võrkkesta valmis ekraan ja see lubab pakkuda sujuvat navigeerimist. Sellel on avalehele installitud sotsiaalse jagamise valikud.
Puhta kujundusega HTML-i sisselogimisleht
Äärmiselt nišipaigutus, sellel mallil on tumedad varjundid koos avalehele integreeritud sotsiaalse jagamisvalikutega. Täielikult kohandatav mall töötab hõlpsalt mis tahes brauseri ja seadmega. Sellel on rippmenüü ja parooli meeldejätmise nupp. See pakub ka kiiret laadimisvõimalust ja tõotab olla printerisõbralik. Kaasas redigeeritavad kodeerimisfailid.
HTML-i ja CSS-i sisselogimisvormi mall Asp.Neti abil
Mõned programmeerijad kasutavad HTML-i sisselogimislehe loomiseks ka C# keelt. The programmeerimiskeel pakub programmeerijatele palju mitmekülgsust ning samuti on lihtne C# abil sisselogimisvormi koostada.
JQuery mobiili sisselogimisvormi kiilu mall
Administraatori sisse-/sisselogimisvorm PHP malliga
Jaga
Kas olete kunagi jälginud sisselogimislehte, mis kuvatakse konkreetse veebisaidi kasutajaks registreerumisel? Esimene leht, mis ilmub sisselogimisel, on esimene mulje veebisaidist. The sisselogimisvormi kujundus määrab ise veebisaidi olemuse ja seega peaks see olema seotud veebisaidiga, kuhu see viib.
Tõesti sisselogimis- või registreerumisvormid on üks olulisemaid elemente, mida veebileht sisaldab, ja seega on nende veebivormide kujundamine veebisaidi kujundamisel üks olulisemaid funktsioone. Edukalt loodud registreerumisvorm julgustab ja võimaldab külastajatel saada konkreetse ettevõtte liikmeks, tellijaks või kliendiks. Nii kaine välimusega, loominguline kui ka visuaalselt atraktiivne registreerumisvorm soodustab kindlasti külastaja viljakat konversioonimäära, kui kõik muud funktsioonid on õigesti kooskõlastatud.
Tõhusa ja puhta sisselogimis-/registreerimisvormi kujundamine nõuab disainerilt palju loovust, kuna veebisaidi edu ja tõhususe huvides on oluline, et veebisaidil oleks atraktiivne ja silmapaistev vorm.
Mõned väga tõhusad ja atraktiivsed sisselogimisvormide kujundused
Mõned registreerimisvormid koosnevad põhilistest, mis on loodud mõnede elementaarsete veebikujunduse kontseptsioonide abil. Peale nende elementaarsete on vähe neid, mis võivad mingil määral veidi teistsugused välja näha. Siiski on mõned teised, mis on äärmiselt muljetavaldavad ja loomingulised, mis meelitavad külastajat kategooriliselt veebisaidile sisenema.
Mõnel neist vormidest on võimalik sisestada üksikasjad isiklikud kontaktandmed ja need sisaldavad järgmist nimi, e-post, kontaktnumber ja muud asjad. Nende vormide stiilid ulatuvad palju tavapärasest kaugemale ja mõned neist on isegi välja pakkunud käsitsi kirjutatud kalligraafia.
Vähestel sisselogimislehtedel on lisaks mõnele väga uuenduslikule valikule või valitud menüüdele ka mitmesuguseid uuenduslikke sisestusstiile. Seda tüüpi vormid nõuavad disaineritelt tõesti kõrgetasemelist loovust, eriti kui on vaja kujundada ruumi erinevate kihtide vahel, luua suuri ja hõlpsasti loetavaid tekste ning luua külgriba linke, mis ühendavad otse nende e-kirjadega.
Teatud tüüpi vorm annab dramaatilise ülevaate uuest andmesisestusväljast. Kasutajad saavad avalehelt ise sisselogimislingi juurde pääseda ja avada jQuery toel töötava sisselogimiskasti. Seda tüüpi vormil on Ajax, mida see kasutab PHP välise skripti suunamiseks. See hindab teavet, mida kasutaja on sisselogimisel kasutanud, ja pärast töötlemist kas annab kasutajale loa või keelab selle.
Paljud sisselogimisvormide kujundused, mida tänapäeval näeme, on tõepoolest äärmiselt dünaamilised ja koosnevad mõnest uusimast kujundusest. Üks neist uue ajastu kujundustest annab suurepärase ülevaate erinevatest andmesisestusväljadest. Kasutajad saavad hõlpsasti avalehele minna ja klõpsata link sisselogimislehel, et avada jQuery toel töötav dünaamiline sisselogimiskast. See konkreetne sisse logida vormi pakub välja välise linkimise võimaluse PHP skript mis aitab hinnata erinevat sisselogimisinfot ja olenevalt tulemuse tulemusest; see kas lubab kasutajal siseneda või keelab selle.
Sisselogimisvormide näited
Designmodo impressionistliku kasutajaliidese sisselogimisvorm
Kuigi esmapilgul tundub, et sisendid õhku tõusevad, sest tekstureeritud lõuendile paigutatud gradiendid ja vektoriteostus toovad kaasa kerge harmoonia tasakaalu. Sellegipoolest näeb see vihjetest inspireeritud sisselogimisvorm huvitav ja ainulaadne välja.
Haziq Miri sisselogimine
Disainer paigutab väljad ritta, muutes üldise komponendi sobivaks suhteliselt standardsete kitsaste päiste jaoks. Kui pehme, soe pruunikas värv koos sisemiste varjudega annab igale esemele meeldiva, sileda ja viimistletud välimuse, siis tume versioon on keerukama välimusega.
Tähtede sisselogimine, täiustatud Haziq Miri poolt
Esimene asi, mis hakkab silma, on taust, mis võib olla suurepärane täiendus igale keerukale või illustreerivale kujundusele, kus naturaalsed tekstuurid, nagu puit või paber, juhivad etendust. Kui klanitud sisendid ja hallikas värvus sobivad ideaalselt sülearvuti stiilis lõuendiga, siis tohutu sinine nupp "Sisselogimine" köidab oma suurepärase visuaalse kaaluga kogu tähelepanu.
Sergei Shmidti sisselogimisvorm
See on suurepärane näide tumedast sisselogimisvormist, millest õhkub rafineeritust, ilma et oleks jõhker. Läikiv pruun nupp torkab silmapilkselt silma, kutsudes tegutsema. Väike metallik lüliti lisab kompositsioonile armsa skeuomorfse hõngu.
Ionut Zamfiri isikliku taotluse sisselogimisvorm
Vormi taust jäljendab tavalist märkmiku pinda, kus me tavaliselt märkmeid teeme. Puidust lõuend täiustab üldist esteetikat. Kuigi läikivad gradientnupud lähevad teemast veidi eemale, võivad siin lamedad või visandlikud nupud tunduda loomulikumad, kuid siiski saavutab komponent harmooniatunde.
Sisselogimise vidin
Disainer eksponeerib peent ja elegantset veebivormi, mille vau-faktori annab selle poolläbipaistev taust. Sellel on optimaalne kontrastsus, mis eristab taustast kirjad ja ikoonid, ning nagu tavaliselt, massiivne, peaaegu valdav punnis CTA.
iPhone'i rakenduse sisselogimisvorm
Mason Yarnelli iPhone'i rakenduste sisselogimisvorm on täidetud eelmiste aastate iOS-i disaini parimate traditsioonide kohaselt. Seal on palju läikivaid asju, dekoratiivseid paelu, reljeefseid ikoone ja loomulikult keeruka tekstuuriga tausta. Kuid üldiselt näeb komponent välja puhas, värske ja rohke õhuga.
Kerge sisselogimine Maxwell Barviani poolt
Maxwell Barviani kerge sisselogimine näeb välja täpselt selline, nagu nimesildil kirjas: kerge, puhas ja karge. Hallid ja valged värvid koos võivad teha imesid, pakkudes kasutajatele suurepäraseid kogemusi. Nagu kohane, on paremate konversioonide jaoks põhinupp tahtlikult liiga suureks tehtud ja värvitud heledasse tooni.
Kuidas luua sisselogimisvormi CSS3 ja jQuery abil
See on väike õpetus, mis sobib isegi algajatele veebiarendajatele. Kuigi disain on üsna lihtne ja sisestusväljad näevad gradientstiili tõttu alguses välja nagu nupud; see on aga esinduslik näide elegantsest ja hästi struktureeritud veebivormist, mis võib olla kasulik paljudes kasutajaliidestes.
Sisselogimine Paresh Khatri poolt
Mõned Paresh Khatri sisselogimised on väike veebikomponent, millel on erksad värvilahendused ja hoolikas tähelepanu detailidele. Tööriistavihjest inspireeritud kuju, ümmargune foto pisipilt, sisekujundus ja poolläbipaistev taust muudavad selle disaini hõlpsasti teistest silma paista.
Rakenduse sisselogimine
Pannes iga vormi elemendi ettevaatlikult üksteise kohale, õnnestub Mynusel kujundus kokku siduda ja jätta kõrvale taust, mis viiks tähelepanu rafineeritud ekraanilt tähelepanu kõrvale. Värvimine, servad, kujundid, ümarad nurgad, tüpograafia, valge ruumi hulk ja reljeefsed puudutused muudavad disaini ainulaadseks ja kargeks.
Adam Whitcrofti tume sisselogimine
Adam Whitcrofti tume sisselogimine näeb välja keerukas ja tipptasemel. Suurepärane fondivalik koos kontrastsete värvidega pakub kasutajatele optimaalset loetavust. Sisselogimisnupp, hallid glüüfid ja lüliti näevad pisut sujuvad välja, kuid sulanduvad keskkonda ideaalselt.
Kasutaja sisselogimine
Kasutaja sisselogimisel on soe kreemjas värv, mis tekitab positiivseid tundeid. Oranži ja sinist kasutatakse dekoratiivsete puudutustena, mis lisavad särtsu ja muudavad vormi erinevate kujunduste jaoks sobivaks. Kumera välimusega gradiendipõhine CTA hüppab teile lihtsalt vastu, kutsudes tegutsema.
Kiire sisselogimine, autor Charlie Waite
Charlie Waite'i Snappy Login on huvitav veebivorm, millel on lihtne, kuid originaalne välimus peamiselt tänu lamedatele läbipaistvatele sisenditele. Kuigi väljade sees olev tekst kogeb mõningast loetamatust, on taustal liiga pestud taustal siiski oma võlu. Dekoratiivne font ja reljeefne nupp näevad välja erakordsed ning nagu peabki, tähelepanu köitvad.
Sazzi Login autor Ionut Zamfir
Ionut Zamfiri Sazzi Login sisaldab kena keerdumist CTA nuppude abil. Põhivärv on korralikult valitud ja aktsenttoon täiendab suurepäraselt üldist esteetikat. Vorm näeb suurepärane välja monotoonsetel või mürarikastel lõuenditel, eriti sisestusväljadel, mis näivad olevat loomulikult sisse ehitatud.
Haziq Miri märkmikusse sisselogimise finaal
Haziq Miri Notepad Login final on veel üks illustreeriv pilt meie kollektsioonis levinud minimalistlikust vormist, mis on viimse detailini planeeritud. Taust hoiab teemat koos, originaalsed katkendlikud väljad ja elegantne kursiivne tüpograafia on kunstilise hõnguga.
Stacked Paper login by Patrik Larsson
Autor valib traditsioonilisema marsruudi, kasutades puhast tausta, standardseid sisestuskaste, tavalist tüüpi ja rahulikku värvipaletti. Siin kasutatakse aktsendiks punast, mis annab CTA-le silmatorkava välimuse. Pisikesed detailid nagu metallklamber ja puidust tekstuur lihtsalt rikastavad esteetikat.
