Jos on jotain, joka on yleensä hyvin yleistä minkä tahansa tyyppiselle verkkosivustolle, nämä ovat lomakkeita. Lomakkeet, joita käytämme yhteystietojen täyttämiseen, kirjoita pankkitiedot, kirjaudu sosiaaliseen verkostoon tai suorita haku kuten tavallisesti päivittäin Google-hakukoneessa.
Joten tänään aiomme näyttää sinulle 40 lomaketta CSS: ssä vaihtelevat yhteydenottolomakkeista, luottokorttikassoista, sisäänkirjautumisista, yksinkertaisista, tilauksesta tai jopa vahvistamisesta. Sarja erittäin tyylikkäitä ja tyylikkäitä muotoja, jotka antavat tämän erityisen pisteen verkkosivustollesi teemasta riippumatta.
Minimalistinen yhteydenottolomake
Yksinkertainen yhteydenottolomake a laaja valikoima vaikutuksia kuten kelluvat merkit tai viiva-animaatiot. Tyylikäs CSS-koodi, jossa on vähän JavaScriptiä. Jos etsit minimalistinen yhteydenottolomake tämä on täydellinen sinulle.
Minimalistinen muoto
Otro minimaalinen muoto, vaikkakin vain CSS: ssä olla yksinkertainen ja tehokas muoto. Siinä ei ole edellisen minimalistisia animaatioita, mutta se sopii hyvin tavoitteeseensa.
Vintage yhteydenottolomake
Vintage yhteydenottolomake, erittäin tyylikäs muotoilu. Reagoi näihin verkkosivustoihin matkapuhelimesta, vaikka se ei sisällä validointia.
Kirje yhteydenottolomake
tämä yhteydenottolomake siinä on melko utelias animaatio: muodostuu kirje. Yksinkertainen, mutta erittäin hyödyllinen runsaalla värillä.
Laajennettu yhteydenottolomake
tämä yhteydenottolomake laajennettu Se on vain käyttöliittymä ja siinä on validointi jQueryn kanssa. Napsautamme kelluvaa painiketta ja lomake ilmestyy vilkkaalla animaatiolla. Erinomainen.
Yhteydenottolomake UI
Yhteydenottolomake UI se on HTML- ja CSS-muodossa tehty lomake. Se erottuu olemisesta yksinkertainen yhteystietokortti että voimme täyttää niin, että vain tekstikenttä muuttuu, kun sitä napsautetaan.
Maksukortti kassalla
Un maksukortti kassalla tehty HTML, CSS ja JavaScript joka erotetaan pyörivällä animaatiolla luottokortti tällä hetkellä, kun painamme CVC- tai turvatunnus-kenttää.
Luottokortin tasainen muotoilu
Puhdas CSS a kassalle luottokortit, sävyt. Värikäs ja hyvin yksinkertainen, joka pystyy osoittamaan laatua ja ammattitaitoa.
Luottokortin käyttöliittymä
Toinen luottokortti HTML: ssä, CSS: ssä ja JavaScriptissä, joka erottuu siitä, kuinka hyvä se on valitsi kokonaissuunnittelun. Unohdimme animaatiot tässä koodinpätkässä verkkosivustollesi. Lataa se tältä linkiltä.
Reagoi kassalle
Reagoi kassalle, tehty React.js: llä, erottuu sivukuvan, jota voimme mukauttaa verkkokaupassamme myymiemme palveluiden tai tuotteiden kanssa.
Checkout-maksukortti
Tämä kassa erottuu mahdollisuudesta laittaa kuva kortille. A yksinkertainen ja selkeä muoto CSS3: lla, HTML5: llä ja vähän jQueryä. Laadukas ja erilainen kuin muut tämän luettelon kassat. Voit ladata täällä tämä maksukortti kassalle.
Luottokorttimaksu
tämä luottokorttimaksulomake on ohjelmoitu harjoittelemaan JavaScript DOM-manipulointia varten. Voit muistuttaa suunnittelussa Stripen tyylikkään koodin, digitaalisen pankkipalvelun, joka on lähestymässä PayPalia.
Luottokortti
Tyylikäs kassa korttimaksua varten eroaa muista ja perustuu luottokortti, joka sijaitsee yläosassa Joten alla on koko lomake, jossa on eri tiedot, jotka asiakkaan on täytettävä maksun suorittamiseksi verkkokaupassa.
Vaiheittainen lomake
Un askel askeleelta lomake rekisteröinti tehdään HTML, CSS ja JavaScript. Neljä vaihetta kullekin pisteelle sijaitsee vasemmalla puolella. Hyvin valmistuneet animaatiot erittäin viimeisteltyyn muotoon Erittäin suositeltavaa.
Interaktiivinen muoto
Un vuorovaikutteinen muoto monivaiheinen HTML, CSS ja JavaScript. Se erottuu siirtymäanimaatiosta kunkin vaiheen välillä. Siinä on tyylikäs kosketus, joka ei jää huomaamatta.
Vaiheittainen lomake
tämä askel askeleelta lomake erottuu melko luovasta. Vastaat kysymyksiin jotta voit palata heidän luokseen milloin tahansa olemalla visuaalisesti läsnä ruudulla koko ajan.
Askel askeleelta
Vaihe vaiheelta lomake valmis HTML, CSS ja JavaScript. Sille on ominaista siirtymäanimaatio kunkin vaiheen välillä.
Monivaiheinen Jquery-muoto
Jos sinulla on erittäin pitkä muoto, tämä on täydellinen eri osioille, joissa on erittäin silmiinpistävä edistymispalkki. JQueryyn ja CSS: ään perustuva se erottuu muotoilustaan ja upeasta tyylikkyydestään.
UI-animaatiolomake
Tämän siirtymät UI-animaatiolomake están perustuu Domink Marskusiciin. Huomio sinisen laatikon luovaan vaikutukseen, kun napsautamme joitain kahdesta kirjautumis- tai istuntokentästä.
Tilin luominen / kirjautumislomake
Temppu sisäänkirjautuminen ja tilin luominen joka perustuu animaatioon mitä tapahtuu näiden kahden osan välillä. Hyvin ajankohtainen ja silmiinpistävä läsnäolo HTML, JavaScript ja CSS.
Käärme kohokohta
Käärme kohokohta on yksi kaikkien listojen silmiinpistävimmistä sisäänkirjautumisista erottuu tyylikkäästä animaatiosta joka näkyy nopeasti, kun napsautamme yhtä kahdesta kentästä.
Kirjautumisnäyttö
Jumalallinen tämä malli kirjautumisnäyttö niin ovat heidän animaatioita ja kuinka luovaa se on. Jos haluat olla uusin verkkosuunnittelussa, tämä lomake ei voi puuttua. Välttämätön.
Sisäänkirjautumisen käyttöliittymän suunnittelu
Suunniteltu HTML: n, Sassin ja jQueryn avulla. Sisäänkirjautumisen käyttöliittymän suunnittelu es eselkeä ja selkeä aiheesta, josta ei puutu hienovaraisia animaatioita, jotta siitä tulisi toinen suosikeista luettelossa.
Sisäänkirjautuminen ja käyttöliittymän luominen
Erityinen kirjautumissuunnittelu ja tilin luomisen käyttöliittymä värejä ja esittelyä varten yksi iso kortti kaksi osaa. Toinen teloituksen kauneimmista, jota emme voi hukata. Valmistettu HTML, CSS ja JavaScript.
Häiritsevät virheet
Häiritsevät virheet Se on loistava sisäänkirjaus, koska kentät, joissa on vastenmielistä.css. Alkuperäinen on hauska, huoleton ja hyvin erilainen sisäänkirjautuminen. Alkuperäinen epäilemättä verkkosivustollemme.
Kirjaudu CSS HTML
Utelias sisäänkirjautuminen eri kuvakkeilla jotka osoittavat jokaisen kentän vievän kävijän mihin haluamme. Myös väreissä valitut sävyt erottuvat. Siinä ei ole animaatiota. Se on tehty HTML- ja CSS-tiedostoina sen toteuttamiseksi verkkosivustolla asiakkaalle tai omalle.
Modaalinen kirjautumislomake
tämä Modaalinen kirjautumislomake on innoittamana suunnittelu tunnetaan materiaalisuunnittelusta. Olemme nähneet sen lukuisissa sovelluksissa mobiililaitteilla. Tässä koodissa meillä on sisäänkirjautumispaneeli ja rekisteröintipaneeli, joka on oletusarvoisesti piilotettu. Rekisteröintipaneeli voidaan aktivoida napsauttamalla sinistä saraketta oikealla puolella. Siinä on hieno animaatio olla erityisen erityinen ja silmiinpistävä sisäänkirjautuminen.
Lomake flexbox
Aloitamme hakulomakkeet tällä muoto perustuu flexboxiin. Se erottuu «haun» punaisesta väristä ja vähän enemmän tyylikkäästä hakukentästä verkkosivustollesi.
Animoitu laatikko
Tämän animoitu laatikko Napsauta suurennuslasikuvaketta ja kirkkaan sininen animaatio ilmestyy niin että meidän on vain kirjoitettava haku, jonka aiomme suorittaa verkkosivustolla. Valmistettu HTML: llä, CSS: llä ja JavaScriptillä.
Hakukenttä
Una iso viiva kulkee ruudun poikki niin että kun painamme sitä, aloitamme haun kirjoittamisen. Noutopainike tämän määrittämiseksi yksinkertainen hakulomake.
Yksinkertainen hakukenttä napsauta
Yksinkertainen hakukenttä napsauta perustuu vuorovaikutukseen, joka nähtiin Waze Driver Driver -sovellus ajoneuvo. Kaikki kuvakkeet ja kuvat tehdään CSS: llä. Se erottuu kuvakkeista, joiden avulla voimme etsiä tiettyjä tuotteita tai palveluja. Silmiinpistävää kuinka siistiä se on.
CSS-tekstinsyötön vaikutus
CSS-tekstinsyötön vaikutus sisältää sarjan animaatiot tekstissä ja hakulaatikossa olla muodoltaan huolellinen hakija.
Koko näytön haku
Tämä merkintä käyttäjältä koko näytön haku se toimii minkä tahansa tyyppisen asettelun tai sijainnin kanssa. Vaatii tyylit säilökohtainen ja haku-peittokuva-elementti sijaita juuressa. Sille on ominaista pomppiva animaatio heti, kun painamme hakupainiketta.
Etsi
Un hakulomake yksinkertaista hän haluaa leikkiä eri paikoissa ja animaatioita. Napsautamme hakupainiketta ja täydellinen laatikko ilmestyy kirjoittamaan sanat. Erittäin ajankohtainen ja erittäin suositeltava kuinka yksinkertainen se on.
Ei kysymyksiä
Ei kysymystä es yksinkertainen muoto tekstikentällä ja mahdollisuus valita joitain vastauksia käyttäjän valitsemaan ne. Paljon visuaalisesti ollakseen yksi parhaista.
Popup-tilauslomake
Tämän ponnahdusikkunan tilauslomake, napsautamme kelluvaa painiketta ja se vie meidät muoto, jolla on erittäin hauska sävy ja kentän, johon sähköposti syötetään. Täydellinen sähköpostimarkkinointiin.
Tilauslaatikon käyttöliittymä
Una tilausruutu hälytyskellolla ja vähän enemmän kuin litteät värit Suunnittelussa.
CSS-tilausruutu
Una älykäs tilauslaatikko tosiasialle käytä kaltevuuksia tilaa-painikkeelle aivan kuten kentän violetti sävy.
Tilausruutu
Una yksinkertainen tilauslaatikko mutta sillä on suuri vaikutus suunnittelulla.
EMOJI-validointilomake
Puhtaana CSS tämä validointilomake luoda avaimen tai salasana. Kun kirjoitamme, emoji mittaa lomakkeen suojaustason. Hauska ja utelias epäilemättä.
Älä missaa tätä luettelo 23 animoidusta nuolesta CSS: ssä.
Erinomainen näyte tässä esitetyistä esimerkeistä. Monipuolisuus ja mukauttaminen erilaisiin konteksteihin ja parasta on, että jokaisen nimikkeen linkki sisältää demon ja lähdekoodin, vaikka sinun pitäisi korostaa se painikkeella «Katso demo», koska löysin sen uteliaisuudesta . Kiitos osallistumisesta. Terveisiä Caracasilta.
Se auttoi minua paljon, kiitos.