Бир дагы веб-сайтта жок болуп кетпес 40 CSS формасы

Кирүү формасы

Эгерде кандайдыр бир веб-сайт үчүн адатта өтө кеңири тараган нерсе бар болсо, анда бул формалар. Байланыш маалыматын толтуруу үчүн колдонгон формалары, банктын реквизиттерин киргизиңиз, социалдык тармакка кириңиз же жөн гана Google издөө тутумунда күн сайын жасагандай издөө жүргүзүңүз.

Ошентип бүгүн биз сизге көрсөтөбүз CSS ичинде 40 форма байланыш формалары, насыя карталарын текшерүү, кирүү, жөнөкөй, жазылуу же жада калса текшерүү. Вебсайтыңызга, темага карабастан, ошол өзгөчө маани берүү үчүн, бир топ укмуштуудай жана стилдеги формалар.

көрсөткүч

Минималисттик байланыш формасы

форма-минималисттик

Менен жөнөкөй байланыш формасы эффекттердин ар түрдүүлүгү мисалы, калкып турган белгилер же сызык анимациялары. Бир аз JavaScript менен жарашыктуу CSS коду. Эгерде сиз издеп жаткан болсоңуз минималисттик байланыш формасы бул сен үчүн эң сонун.

Окшош макала:
Веб-дизайн үчүн жогорку сапаттагы 23 CSS китепканасы

Минималисттик форма

Минималист

башка минималдуу форма, бирок CSSте гана болушу керек жөнөкөй жана эффективдүү форма. Мурунку минималисттик анимациялары жок, бирок ал өз максатына абдан жооп берет.

Vintage байланыш формасы

жүзүм чогултуу

Vintage байланыш формасы, абдан жарашыктуу дизайн. Ошол веб-сайттар үчүн жооп берет мобилдик телефондон көрүнөт, ал текшерүүнү камтыбайт.

Каттын байланыш формасы

кат

Эсте байланыш түрү ал абдан кызыктуу анимацияга ээ: кат пайда болот. Жөнөкөй, бирок түстүн көптүгү менен абдан пайдалуу.

Окшош макала:
Блогдор, электрондук соода жана башкалар үчүн 27 акысыз HTML жана CSS карталары

Байланыш формасы кеңейтилген

Кеңири байланыш формасы

Эсте кеңейтилген байланыш формасы Бул бир гана алдыңкы учу жана бар jQuery менен текшерүү. Биз калкып баскычты чыкылдатып, анимация менен форма пайда болот. Мыкты.

Байланыш формасы UI

Байланыш формасы

Байланыш формасы UI бул HTML жана CSS формаларында жасалган форма. Бул болуу менен айырмаланып турат жөнөкөй байланыш картасы басканда текст талаасы гана өзгөрүлүп тургандай кылып толтура алабыз.

Төлөм карталарын төлөө

Төлөм картасын төлөө

Un төлөм карталарын төлөө HTML, CSS жана JavaScript тилдеринде жасалган айлануучу анимация менен айырмаланат CVC же коопсуздук номери талаасына басканда, кредит картасы.

Насыя картасынын жалпак дизайны

Таза CSS кредит картасы

A үчүн таза CSS төлөө жалпак түстөрдөгү кредиттик карталар. Сапаттуу жана кесипкөйлүктү көрсөтө алган түстүү жана өтө жөнөкөй.

Насыя картасы UI

Snackables

HTML, CSS жана JavaScriptтеги дагы бир насыя картасы, анын сапаты менен айырмаланат жалпы дизайнын тандап алган. Вебсайтыңыздын ушул код бөлүгүндө анимацияларды унутуп койгонбуз. Бул шилтемеден жүктөп алыңыз.

Текшерүү реакциясы

иш-аракет кылгыла

Текшерүү реакциясы, React.js менен жасалган, менен айырмаланат биз өзгөчөлөштүрө алабыз каптал сүрөтү электрондук соодада саткан кызматтар же өнүмдөр менен.

Төлөм картасын төлөө

Попов

Бул текшерүү картага сүрөт тартуу мүмкүнчүлүгү менен айырмаланып турат. A CSS3, HTML5 менен жасалган жөнөкөй жана түшүнүктүү форма жана бир аз jQuery. Жогорку сапаттагы жана ушул тизмедеги калган кассалардан айырмаланган. Сиз жүктөп алсаңыз болот бул жерде бул кассалык төлөм картасы.

Насыя картасы менен төлөө

тилке

Эсте насыя картасынын төлөө формасы менен машыгууга программаланган DOM манипуляциясы үчүн JavaScript. Дизайнда PayPalге жакындаган санарип банк кызматы Stripe элеганттуу кодун эстей аласыз.

Кредиттик карта

күндө

Жарашыктуу картаны төлөө үчүн төлөө башкалардан айырмаланып жана негизделген жогору жагында жайгашкан кредит картасы Ошентип, бизде электрондук соодада төлөө үчүн кардар толтурушу керек болгон ар кандай маалыматтар камтылган бланк толугу менен бар.

Кадам этабы

Кадам артынан кадам

Un кадам формасы HTML, CSS жана JavaScriptте жүргүзүлгөн каттоо үчүн. Упайлардын ар бири үчүн төрт кадам сол жагында жайгашкан. Жакшы даяр форма үчүн анимацияларды жакшы бүтүрдү. Абдан сунушталат.

Интерактивдүү форма

Интерактивдүү

Un интерактивдүү форма HTML, CSS жана JavaScript менен жасалган көп баскычтуу. Бул кадамдардын ар биринин ортосундагы өткөөл анимация үчүн айырмаланып турат. Анын көз жаздымында калбай турган жарашыктуу тийүүсү бар.

Кадам этабы

Кадам артынан кадам

Эсте кадам формасы кыйла чыгармачылык менен айырмаланып турат. Сиз суроолорго жооп бересиз экранда ар дайым көрүнүп туруу менен, аларга каалаган убакта кайрылып келүү үчүн.

Кадам артынан кадам

Пасо

Кадам-кадам формасы жасалды HTML, CSS жана JavaScript тилдеринде. Бул кадамдардын ар биринин ортосундагы өткөөл анимация менен мүнөздөлөт.

Көп кадамдуу Jquery формасы

JQuery көп баскычы

Эгер бар болсо, өтө узун форма, бул абдан укмуштуу прогресс тилкеси менен ар кандай бөлүмдөр үчүн кемчиликсиз. JQuery жана CSSтин негизинде, ал өзүнүн дизайны жана эң сонун элеганты менен айырмаланат.

UI анимация формасы

Анимация формасы

Мунун өткөөлдөрү UI анимация формасы алар Доминк Марскусичке негизделген. Эки кирүү же сеанс талааларын айрым басканда, көк терезенин чыгармачыл таасирине көңүл буруңуз.

Каттоо эсебин түзүү / кирүү формасы

Login Creation

Кылдаттык кирүү жана каттоо эсебин түзүү анимацияга негизделген бул эки бөлүмдүн ортосунда эмне болот. HTML, JavaScript жана CSSте жасала турган учурдагы жана таң калыштуу катышуу.

Snake Highlight

жылан

Snake Highlight бул бардык тизмелердеги эң көрүнүктүү логиндердин бири жарашыктуу анимациясы менен айырмаланып турат эки талаанын бирин чыкылдаткан учурда тез пайда болот.

Кирүү экраны

Кирүү

Бул долбоорду кудай кирүү экраны алардыкы ошондой анимациялар жана ал канчалык чыгармачыл. Эгерде сиз веб-дизайн жөнүндө сөз болгондо эң актуалдуу болгуңуз келсе, анда бул форма жок болушу мүмкүн эмес. Зарыл.

Кирүү UI дизайны

Кирүү формасы

HTML, Sass жана jQuery колдонуу менен иштелип чыккан. Кирүү UI дизайны es eлегант жана так Тизмедеги сүйүктүүлөрдүн катарына кирүү үчүн, анимациялык анимациялары жок темада.

Кирүү жана UI эсеп жазуусун түзүү

Кирүүнү каттоо

Атайын кирүү дизайны жана каттоо эсебин түзүү UI  түстөр үчүн жана сунуштоо үчүн бир чоң карта эки бөлүм. Аткаруудагы эң сулуу дагы бир нерсе, биз аны колдон чыгарбайбыз. HTML, CSS жана JavaScriptте жасалган.

Ыңгайсыз каталар

Жийиркеничтүү

Ыңгайсыз каталар Бул анимациянын аркасында эң сонун кирүү obnoxious.css бар талаалар. Көңүлдүү, бейкапар жана такыр башкача логин. Биздин веб-сайт үчүн эч кандай шек жок түп нуска.

CSS HTML кирүү

CSS

Кызыктуу логин ар кандай сүрөтчөлөр менен меймандарды биз каалаган жерге алып баруу үчүн ар бир талааны көрсөтөт. Түстөрдө тандалган көлөкөлөр дагы көзгө урунат. Анда анимация жок. Вебсайтта кардар же өзүбүз үчүн ишке ашыруу үчүн, HTML жана CSS тилдеринде жасалган.

Модалдык кирүү формасы

модалдык

Эсте Модалдык кирүү формасы тилинен шыктанган Материалдык Дизайн менен белгилүү дизайн. Мобилдик түзмөктөрдөгү көптөгөн тиркемелерден байкадык. Бул коддо бизде кирүү панели жана каттоо панели бар, ал демейки боюнча жашырылган. Каттоо панелин оң жагында жайгашкан көк тилкени чыкылдатып иштетсе болот. Бул абдан өзгөчө жана укмуштуудай логин болушу үчүн сонун анимацияга ээ.

Flexbox формасы

Flexbox

Издөө формаларын ушундан баштайбыз түрү flexbox негизделген. Бул «издөөнүн» кызыл түсү жана веб-сайтыңыздын издөө талаасы үчүн бир аз гана айырмаланып турат.

Анимацияланган куту

Анимацияланган куту

бул менен бирге жандуу куту лупанын сүрөтчөсүн чыкылдатып жана ачык көк анимация пайда болот Ошентип, биз веб-сайтта жүргүзө турган издөөбүздү гана теришибиз керек. HTML, CSS жана JavaScript менен жасалган.

Издөө талаасы

Push search

Una чоң сызык экран аркылуу өтөт ошондуктан биз аны басканда издөөнү жаза баштайбыз. Муну аныктоо үчүн пикап баскычы жөнөкөй издөө формасы.

Жөнөкөй издөө талаасын чыкылдатыңыз

Waze

Жөнөкөй издөө талаасын чыкылдатыңыз ичиндеги өз ара аракеттенүүгө негизделген Waze Driver Community колдонмосу унаа. Бардык сүрөтчөлөр жана сүрөттөр CSS менен жасалган. Бул өнүм же кызмат боюнча атайын издөө жүргүзүүгө мүмкүнчүлүк берген сөлөкөттөр менен айырмаланат. Канчалык салкын болгондуктан, таң калыштуу.

CSS текстин киргизүү эффектиси

CSS киргизүү

CSS текстин киргизүү эффектиси бир катар камтыйт тексттеги анимациялар жана издөө суурмасында форма боюнча кылдаттык менен издөөчү болуу.

Толук экран издөө

Толук экран издөө

Бул жазуу толук экран издөө ал каалаган түрдөгү макет же позиция менен иштейт. Стилдерди талап кылат контейнерге мүнөздүү жана издөөнүн үстүнө коюлган элемент тамырда жайгашкан. Ал издөө баскычын баскан учурда секирип турган анимация менен мүнөздөлөт.

издөө

издөө

Un издөө формасы жөнөкөй ал ар кандай позициялар менен ойногонду жакшы көрөт жана анимациялар. Издөө баскычын чыкылдатып, сөздөрдү терүү үчүн толугу менен суурма пайда болот. Абдан актуалдуу жана канчалык жөнөкөй экендиги боюнча сунушталат.

Суроолор жок

Суроолор жок

Суроо жок es текст талаасы бар жөнөкөй форма жана колдонуучу аларды тандап алышы үчүн айрым жоопторду тандап алуу мүмкүнчүлүгү. Мыктылардын катарына кошулуу үчүн эң сонун келишим.

Калкыма жазылуу формасы

жазылуу

бул менен бирге калкыма жазылуу формасы, биз калкып баскычты чыкылдатып, ал бизди алып келет абдан күлкүлүү тон менен форма жана электрондук почта дарегин киргизе турган талаа. Электрондук почта маркетинги үчүн идеалдуу.

Жазылуу кутучасы UI

жазылуу

Una жазылуу кутусу коңгуроо менен жана жалпак түстөрдөн бир аз көбүрөөк Дизайнында.

CSS жазылуу кутусу

жазылуу

Una акылдуу жазылуу кутусу факты үчүн градиенттерди колдонуу жазылуу баскычы үчүн даланын кызгылт өңүндөй.

Жазылуу кутусу

Жазылуу кутусу

Una жөнөкөй жазылуу кутусу бирок дизайны менен чоң натыйжа берет.

EMOJI текшерүү формасы

EMOJI

Таза CSS муну текшерүү формасы ачкычты түзүү же пароль. Биз жазып жаткандай, быйтыкча форманын коопсуздук деңгээлин өлчөйт. Эч күмөнсүз, күлкүлүү жана кызыктуу.

Муну өткөрүп жибербеңиз CSSтеги 23 жандуу жебенин тизмеси.


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

Комментарий, өзүңүз калтырыңыз

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

  1.   Хуан Хосе Перес ал мындай деди:

    Бул жерде келтирилген мыкты мисалдар. Ар түрдүүлүк жана ар кандай контекстке ылайыкташуу, эң жакшы нерсе, ар бир аталыштын шилтемесинде демо жана баштапкы код камтылган, бирок аны «Көрүнүш демо» баскычы менен бөлүп көрсөтүү керек, анткени мен аны аталыштан кызыгып таптым. . Салымыңыз үчүн рахмат. Каракастан салам.