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

Kartalarni olib o'tish

Onlayn manbalar deyarli cheksiz, ammo ularni sifatli topish haqiqatan ham qiyin narsaBir oz qidirib topsangiz va dizaynga bag'ishlangan veb-saytlarning yaxshi ro'yxatiga ega bo'lsangiz ham, ishlar osonlashadi. HTML va CSS kabi tillar juda yaxshi shakllangan bir paytda, bepul, yuqori sifatli manbalarga yaqinlashish deyarli bir necha marta bosiladi.

Biz bir qator ro'yxatini ro'yxatga olish uchun boryapmiz HTML va CSS-dagi bepul kartalar har qanday blog, biznes, elektron tijorat va boshqa ko'p narsalar uchun juda mos keladi. Barcha turdagi mijozlar uchun qilayotgan ba'zi ishlaringizga qo'shilishi uchun uzoq masofali to'plam. Kodni HTML va CSS-da olishingiz uchun biz buni codepen.io-dan foydalanadigan ushbu ro'yxat bilan qilamiz.

Blog kartasi №1 qiziqarli

Qiziqarli karta

Una ajoyib dizayn kartasi uni aks ettiruvchi tasvirning deyarli barchasi aytilgan, tegishli kodni olish va veb-saytingizga o'rnatish uchun codepen.io orqali o'tishingiz mumkin.

CSS yangiliklar kartalari faqat CSS

Yangiliklar kartasi

Ushbu karta, bilan Fon sifatida begona narsalar, tarkibini ochib beradigan ravon animatsiyasi bilan ajralib turadi. Bu sof CSS.

Blog posti

Blog posti Sichqoncha ko'rsatkichini ustiga qo'yib, veb-saytni oldindan ko'rish. Unda CSS va HTML mavjud oson qo'shilish uchun.

Blog kartalari

Blog kartalari

Minimalist javob beruvchi blog kartalari dizayni. Tez va ravon animatsiyalar hech kimni befarq qoldirmaydigan yuqori sifat.

Javob beruvchi tashrif qog'ozlari

Javob kartalari

Uchun ajralib turadi engil animatsiya sichqoncha ko'rsatgichini karta tasviri ustiga olib borish orqali.

Boshqa blog karta

Blog Hover Card

Paydo bo'ladi olib borishda karta matni xuddi shu tarzda.

Tashrifnomalar

Tashrif kartasi

Una oddiy, ammo joriy karta HTML va CSS-da demo va kod bilan tashrif buyuring.

3D vizitka

3D Flip Card

Ushbu karta arziydi HTML va CSS bilan 3D animatsiya. Elena Nazarova tomonidan ishlab chiqarilgan bu rangni ajablantiradigan tashrif qog'ozi uchun juda mos keladi.

CSS vizitkasi

CSS vizitkasi

CSS-da juda ajoyib vizitka 3D formatida aylanadi biz qo'ygan payt sichqoncha ko'rsatgichiga javob beradigan bir qator URL manzillariga yo'l ochish.

Karta katakchalari

Grid karta

Bilan yaxshi joylashtirilgan bir qator kartalar ko'zni qamashtiradigan dizayn. Bu sodda estetikasi bilan ajablanarli, ammo HTML, CSS va SCSS kodlarida yaxshi zarba.

3D kartalar oshkor etilmoqda

3D karta

Ushbu karta katakchalari seriyasi Ayni paytda ko'proq ma'lumotni ochib bering sichqonchani ikonkada yashil rangda qoldiramiz. Ko'rsatkichni tark etish bilan bir vaqtda, qolgan panjara ham shunga qarab harakatlanadi.

Javob beruvchi materiallar dizayni kartasi

moddiy Design

Bilan google dizayn tili, ushbu misol kartadagi aktyorlarning barcha ma'lumotlarini ochadigan menyu belgisi bilan ajralib turadigan ushbu kartalar seriyasi paydo bo'ladi. Ajoyib vizual ko'rinishga ega chiroyli va intuitiv animatsiyalar.

Flexbox karta tarmog'i

Flexbox

Karta prototipi bir xil balandlikda, ular grid flexbox formatidan foydalanish bilan ajralib turadilar. Uning yana bir qadriyatlaridan biri CSS-ning nisbati va CSS-filtrlaridan foydalanishdir.

Clash of Clans Cards

Of Clans Clash

El mashhur mobil o'yin Andre Madarang tomonidan yaratilgan HTML va CSS-dagi kartalari mavjud. Biz ular orasida aniq va yuqori darajada ko'rsatiladigan animatsiya bilan o'tishimiz mumkin.

Elektron tijorat uchun slayd kartalar

Mahsulot kartasi

A tezkor animatsiyaUshbu kartalar sizni nima ekanligini bilish uchun ularning elementlarini qidirishga undaydi. Omar Dsokining ajoyib dizayni bilan.

Interfeys dizayni - mahsulot kartasi

Mahsulot interfeysi

Ularni loyihalashtirish uchun mukammal karta bizning elektron tijorat mahsulotimiz. HTML va CSS-da tayyorlangan.

Mahsulot kartasi

ECommerce mahsuloti

Xuddi shu kartadan biz qila olamiz bir nechta rasmlarni ko'rib chiqing mahsulotni yaxshiroq ko'rish uchun. U savatga qo'shish tugmachasini o'z ichiga oladi va HTML, CSS va JavaScript kodlarini o'z ichiga oladi.

Flexy mahsulot kartalari

Flexy karta

Uning nomi ko'rsatilgandek, flexbox-dan foydalanadi savatga qo'shish tugmachasini bosganimizda qiziqarli animatsiya yaratish uchun.

Flip kartalar

Flip card

Yumshoq va ba'zi kartalar uchun kichik kod mukammal animatsiya. Bir necha daqiqada siz ularni kiritishingiz mumkin. Yaqinda kodepenga qo'shildi.

3D mahsulot kartalari sifatida kartalar

3D karta

Shuni ta'kidlash kerakki, ushbu kartalar go'yo stolda bir qator kartochkalarimiz bor edi. Ko'rsatkich chapda va ular kattalashtirishadi, har birini bosishadi va mahsulot ma'lumotlarini ko'rsatish uchun kartaning orqa qismini ko'rsatadilar. Biz yana bir marta bosamiz va old tomonda bo'lgani kabi qoldiramiz. 3D CSS xususiyatlarini o'rganish uchun juda yaxshi.

Parallaks kartasi

Parallaks kartasi

A bilan juda yaxshi ko'riladigan tajriba ko'zni qamashtiradigan flip effekti. Gap nima haqida ketayotganini bilish uchun uni ko'rganingiz ma'qul.

Kartalar uchun hover effekti

Kartani olib keling

Oddiy effekt lekin hiyla-nayrang kartalar haqida.

Oddiy hover effekti

Oddiy karta

Ajablanarli darajada oddiy effekt, lekin bu biz uni tasavvur qiladigan lahzaga katta ta'sir ko'rsatadi.

Parallaks chuqurlik kartalari

Paralaks chuqurligi

Ushbu kartochkalarda parallaks kontseptsiyasi yuqoriga dizayni bo'yicha juda ajoyib kartalarni shakllantirish. Blogimizdagi ba'zi toifalarni tanlaganingizda, foydalanuvchiga qanday ta'sir ko'rsatishini yaxshiroq tushunish uchun uni ko'rishingiz kerak.

Filmlar uchun interfeys kartasi

Film kartasi

Karta HTML bilan yaratilgan ajoyib tartib va CSS.

Profil kartasi

Aloqa kartasi

Juda yaxshi yaxshi animatsiyalar biz ijtimoiy tarmoq profillariga kirishni amalga oshirishimiz mumkin bo'lgan aloqa kartasi uchun. HTML va CSS.

Polaroid to'plami

Polaroid

Xususiyatlari bilan, filtrlar va maxsus CSS o'tishlari Polaroid guruhlangan kartalarining ushbu seriyasi yaratilgan; ushbu SVG tasvirlar veb-saytini o'tkazib yubormang.


Maqolaning mazmuni bizning printsiplarimizga rioya qiladi muharrirlik etikasi. Xato haqida xabar berish uchun bosing bu erda.

Izoh, o'zingiznikini qoldiring

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi. Kerakli joylar bilan belgilangan *

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.

  1.   kristian dijo

    Ushbu kartalarning har qanday birini wordpress sahifasiga kiritish mumkin bo'ladi