Бир дагы веб-сайтта жок болуп кетпес 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 же коопсуздук номери талаасына басканда, кредит картасы.

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

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

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

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 жана CSSтин негизинде, ал өзүнүн дизайны жана эң сонун элеганты менен айырмаланат.

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

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

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

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

Snake Highlight

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

Кирүү экраны

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

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

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

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

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

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

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

CSS HTML кирүү

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

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

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

Flexbox формасы

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

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

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

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

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

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

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

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

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

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

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

издөө

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

Суроолор жок

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

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

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

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

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

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

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

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

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

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

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

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