Hech qanday veb-saytda yo'q bo'lishi mumkin bo'lmagan 40 ta CSS shakllari

Agar har qanday turdagi veb-saytlar uchun odatda juda keng tarqalgan narsa bo'lsa, bu shakllar. Biz aloqa ma'lumotlarini to'ldirishda foydalanadigan shakllar, bank tafsilotlarini kiriting, ijtimoiy tarmoqqa kiring yoki oddiygina Google qidiruv tizimida har kuni qilganimiz kabi qidiruvni amalga oshiring.

Shunday qilib, bugun biz sizga ko'rsatamiz CSS-da 40 ta shakl aloqa shakllari, kredit karta to'lovlari, kirish, oddiy, obuna yoki hatto tasdiqlashdan tortib. Mavzudan qat'i nazar, veb-saytingizga ushbu maxsus fikrni berish uchun ajoyib nafislik va uslubning bir qator turlari.

Minimalist aloqa shakli

Bilan oddiy aloqa shakli turli xil effektlar suzuvchi belgilar yoki chiziqli animatsiyalar kabi. Bir oz JavaScript bilan oqlangan CSS kodi. Agar siz izlayotgan bo'lsangiz minimalist aloqa shakli bu siz uchun juda yaxshi.

Tegishli maqola:

Veb-dizayn uchun yuqori sifatli 23 ta CSS kutubxonasi

Minimalist shakl

Boshqa minimal shakl, faqat CSS-da a bo'lishi kerak oddiy va yuqori effektli shakl. Unda avvalgisining minimalist animatsiyalari yo'q, lekin u o'z maqsadlarini juda yaxshi bajaradi.

Amp aloqa shakli

Amp aloqa shakli, juda oqlangan dizayni. Ushbu veb-saytlar uchun javob beradi mobil qurilmadan ko'rish, garchi u tekshirishni o'z ichiga olmaydi.

Xatning aloqa shakli

este aloqa shakli unda juda qiziq animatsiya mavjud: xat shakllanadi. Oddiy, ammo juda ko'p rang bilan juda foydali.

Tegishli maqola:

Bloglar, elektron tijorat va boshqalar uchun 27 ta bepul HTML va CSS kartalari

Aloqa shakli kengaytirildi

este kengaytirilgan aloqa shakli Bu faqat old tomonda va mavjud jQuery bilan tasdiqlash. Biz suzuvchi tugmachani bosamiz va shakl jonli animatsiya bilan paydo bo'ladi. Ajoyib.

UI formasi bilan bog'laning

UI formasi bilan bog'laning bu HTML va CSS-da yaratilgan shakl. Bu borligi bilan ajralib turadi oddiy aloqa kartasi biz uni to'ldirishimiz mumkin, shunda u bosilganda faqat matn maydoni o'zgaradi.

To'lov kartalarini to'lash

Un to'lov kartalarini to'lash HTML, CSS va JavaScript-da yaratilgan aylanuvchi animatsiya bilan ajralib turadi CVC yoki xavfsizlik raqami maydoniga bosganimizda kredit karta.

Kredit kartasining tekis dizayni

A uchun toza CSS uchun to'lov tekis rangdagi kredit kartalar. Rangli va juda sodda, bu sifat va professionallikni ko'rsatishga qodir.

Kredit karta interfeysi

HTML, CSS va JavaScript-dagi yana bir kredit karta, u qanchalik yaxshi ekanligi bilan ajralib turadi umumiy dizaynni tanladi. Veb-saytingiz uchun ushbu kod qismidagi animatsiyalar haqida unutdik. Uni ushbu havolada yuklab oling.

Chiqish reaktsiyasi

Chiqish reaktsiyasi, React.js bilan yaratilgan, bilan ajralib turadi biz sozlashimiz mumkin bo'lgan yon rasm elektron tijoratimizda sotadigan xizmatlar yoki mahsulotlar bilan.

To'lov kartasini to'lash

Ushbu kassa kartaga rasm qo'yish imkoniyati bilan ajralib turadi. A CSS3, HTML5 bilan yaratilgan sodda va aniq shakl va biroz jQuery. Yuqori sifatli va ushbu ro'yxatdagi boshqa kassalardan farq qiladi. Siz yuklab olishingiz mumkin bu erda ushbu to'lov kartasi.

Kredit karta to'lovi

este kredit karta to'lov shakli bilan mashq qilish uchun dasturlashtirilgan DOM manipulyatsiyasi uchun JavaScript. Dizaynda PayPal-ga yaqinlashib kelayotgan raqamli bank xizmati Stripe-ning nafis kodini eslashingiz mumkin.

Kredit karta

Chiroyli kartani to'lash uchun to'lov boshqalardan farq qiladi va asoslanadi yuqori qismida joylashgan kredit karta Shunday qilib, quyida bizda elektron tijoratda to'lovni amalga oshirish uchun mijoz to'ldirishi kerak bo'lgan turli xil ma'lumotlar mavjud bo'lgan barcha shakl mavjud.

Bosqichma-bosqich shakl

Un bosqichma-bosqich shakl HTML, CSS va JavaScript-da amalga oshirilgan ro'yxatdan o'tish uchun. Ballarning har biri uchun to'rtta qadam chap tomonda joylashgan. Yaxshi tugagan shakl uchun yaxshi tugagan animatsiyalar. Juda tavsiya etiladi.

Interaktiv shakl

Un interaktiv shakl HTML, CSS va JavaScript bilan qilingan ko'p bosqichli. Bu har bir qadam o'rtasida o'tish animatsiyasi uchun ajralib turadi. U beparvo bo'lmaydigan nafis teginishga ega.

Bosqichma-bosqich shakl

este bosqichma-bosqich shakl juda ijodiy ekanligi bilan ajralib turadi. Siz savollarga javob berasiz shuning uchun siz har doim ekranda vizual ravishda qatnashib, ularga istalgan vaqtda qaytishingiz mumkin.

Asta-sekin

Bosqichma-bosqich shakl bajarildi HTML, CSS va JavaScript-da. Har bir qadam o'rtasida o'tish animatsiyasi bilan tavsiflanadi.

Ko'p bosqichli Jquery shakli

Agar sizda bo'lsa juda uzun shakl, bu juda ajoyib taraqqiyot satriga ega bo'lgan turli bo'limlar uchun juda mos keladi. JQuery va CSS asosida u o'zining dizayni va ajoyib nafisligi bilan ajralib turadi.

UI animatsiyasi shakli

Buning o'tishlari UI animatsiyasi shakli ular bor Domink Marskusich asosida. Kirish yoki kirishning ikkita maydonini bosganimizda ko'k rangdagi qutining ijodiy ta'siriga e'tibor bering.

Hisob yaratish / kirish shakli

Hiyla-nayrang kirish va hisob yaratish animatsiyaga asoslangan bu ikki bo'lim o'rtasida nima sodir bo'ladi. HTML, JavaScript va CSS-da juda dolzarb va ajoyib ishtirok etish.

Ilonni ajratib ko'rsatish

Ilonni ajratib ko'rsatish har qanday ro'yxatning eng ajoyib kirishlaridan biri nafis animatsiya bilan ajralib turadi bu ikkita maydondan birini bosganimizda tezda paydo bo'ladi.

Kirish ekrani

Ushbu dizaynni ilohiylashtiring kirish ekrani ular ham shunday animatsiyalar va bu qanchalik ijodiy. Agar veb-dizayn haqida gap ketganda, siz eng dolzarb bo'lishni istasangiz, ushbu shakl yo'qolishi mumkin emas. Ajralmas.

Kirish interfeysi dizayni

HTML, Sass va jQuery yordamida yaratilgan. Kirish interfeysi dizayni es enafis va aniq ro'yxatdagi favoritlardan biriga aylanish uchun nozik animatsiyalarga ega bo'lmagan mavzu bo'yicha.

Kirish va UI qayd yozuvini yaratish

Maxsus kirish dizayni va hisob yaratish UI  ranglar uchun va taqdim etish uchun ikkita katta karta. Biz ijro etilishdagi eng chiroyli narsalardan biri. HTML, CSS va JavaScript-da tayyorlangan.

Noqulay xatolar

Noqulay xatolar Ning animatsiyasi tufayli bu juda yaxshi kirishdir obnoxious.css bo'lgan maydonlar. Qiziqarli, beparvo va juda boshqacha kirish uchun asl nusxa. Bizning veb-saytimiz uchun shubhasiz asl nusxa.

CSS HTML-ga kirish

Qiziqarli kirish turli xil belgilar bilan dalalarni har birini ko'rsatib, mehmonni biz xohlagan joyga olib boramiz. Ranglarda tanlangan soyalar ham ajralib turadi. Unda hech qanday animatsiya yo'q. HTML yoki CSS-da veb-saytda mijoz yoki o'zimiz uchun amalga oshirish uchun yaratilgan.

Modal kirish shakli

este Modal kirish shakli tilidan ilhomlangan Material Design bilan tanilgan dizayn. Biz buni mobil qurilmalardagi ko'plab dasturlarda ko'rdik. Ushbu kodda bizda kirish paneli va sukut bo'yicha yashirilgan ro'yxatdan o'tish paneli mavjud. Ro'yxatdan o'tish panelini o'ng tomonda joylashgan ko'k ustunni bosish orqali faollashtirish mumkin. Bu juda ajoyib va ​​ajoyib login bo'lishi uchun ajoyib animatsiyaga ega.

Flexbox-ni yarating

Biz qidiruv shakllarini shu bilan boshlaymiz shakl flexbox-ga asoslangan. Bu "qidiruv" ning qizil rangida va sizning veb-saytingiz uchun oqlangan qidiruv maydonchasida biroz ko'proq narsa bilan ajralib turadi.

Animatsiya qutisi

Bu bilan animatsion quti lupa belgisini bosing va yorqin ko'k animatsiya paydo bo'ladi biz amalga oshirmoqchi bo'lgan qidiruvni faqat veb-saytda yozishimiz kerak. HTML, CSS va JavaScript bilan yaratilgan.

Qidiruv maydoni

Una katta chiziq ekran bo'ylab o'tadi shunday qilib biz uni bosganimizda qidiruvni yozishni boshlaymiz. Buni aniqlash uchun qabul qilish tugmasi oddiy qidiruv shakli.

Oddiy qidiruv maydonini bosing

Oddiy qidiruv maydonini bosing da ko'rilgan o'zaro ta'sirga asoslangan Waze Driver Community ilovasi transport vositasi. Barcha piktogramma va rasmlar CSS bilan yaratilgan. Bu mahsulot yoki xizmat uchun aniq qidiruvlarni amalga oshirishga imkon beradigan piktogramma uchun ajralib turadi. Qanday salqin bo'lgani uchun ajoyib.

CSS matn kiritish effekti

CSS matn kiritish effekti qatorini o'z ichiga oladi matndagi animatsiyalar va qidiruv katakchasi shaklda ehtiyotkor izlovchi bo'lish.

To'liq ekranli qidiruv

Ushbu yozuv to'liq ekran qidiruvi u har qanday tartib yoki pozitsiya bilan ishlaydi. Uslublarni talab qiladi konteynerga xos va qidirish uchun qo'shimcha element ildizda joylashgan bo'lishi. Qidiruv tugmachasini bosganimizdan so'ng, u pog'onali animatsiya bilan tavsiflanadi.

Qidiruv

Un qidiruv shakli oddiy u turli pozitsiyalar bilan o'ynashni yaxshi ko'radi va animatsiyalar. Biz qidiruv tugmachasini bosamiz va so'zlarni yozish uchun to'liq tortma paydo bo'ladi. Juda dolzarbligi uchun juda dolzarb va juda tavsiya etiladi.

Savol yo'q

Savol yo'q es matn maydoni bo'lgan oddiy shakl va foydalanuvchi ularni tanlashi uchun ba'zi javoblarni tanlash imkoniyati. Eng yaxshi narsalardan biri bo'lish uchun ingl.

Qalqib chiqadigan obuna shakli

Bu bilan popup obuna shakli, biz suzuvchi tugmachani bosamiz va u bizni oladi juda kulgili ohang bilan shakl va elektron pochtani kiritadigan maydon. Elektron pochta marketingi uchun juda yaxshi.

Obuna qutisi UI

Una obuna qutisi signalli qo'ng'iroq bilan va tekis ranglardan biroz ko'proq Dizaynda.

CSS obuna qutisi

Una aqlli obuna qutisi aslida uchun gradyanlardan foydalaning obuna tugmasi uchun xuddi maydonning binafsha rangi kabi.

Obuna qutisi

Una oddiy obuna qutisi ammo dizayni bilan katta ta'sirga ega.

EMOJI tasdiqlash shakli

Sof holda CSS bu tasdiqlash shakli kalitni yaratish yoki parol. Biz yozganimizdek, emoji shaklning xavfsizlik darajasini o'lchaydi. Shubhasiz, kulgili va qiziquvchan.

Buni boy bermang CSS-dagi 23 ta animatsion o'qlarning ro'yxati.