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

Hover Cards

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

Биз бир катар тизмесин келтиргени жатабыз HTML жана CSS акысыз карталар блог, бизнес, электрондук соода жана башка бардык түрлөрү үчүн толугу менен ылайыктуу. Кардарлардын бардык түрлөрү үчүн жасап жаткан жумуштарыңыздын бир бөлүгүнө кошула тургандай узак аралыкка чогултуу. Кодду HTML жана CSS тилдеринде алуу үчүн codepen.io колдонгон ушул тизме менен жасайбыз.

Blog Card fun # 1

Card Fun

Una сонун дизайн картасы аны чагылдырган сүрөттөлүштүн дээрлик бардыгы айтылса, сиз тийиштүү кодду алуу жана codepen.io сайтына кирип, веб-сайтыңызга орнотуп алсаңыз болот.

CSS News Cards гана CSS

Жаңылыктар картасы

Бул карта, менен Фон катары Stranger Things, мазмунун ачып берген жылмакай анимациясы менен айырмаланат. Бул таза CSS.

Блогдогу пост

Blog Post Чычкан көрсөткүчүн алып келип, вебдин алдын ала көрүнүшү. Анда CSS жана HTML бар оңой киргизүү үчүн.

Блог карталары

Блог карталары

Блог картасынын минималисттик сезимтал дизайны. Тез жана жылмакай анимациялар эч кимди кайдыгер калтырбаган жогорку сапат.

Жооптуу визиттик карталар

Жооп берүүчү карталар

Үчүн турат анимация чычкан көрсөткүчүн картанын сүрөтүнүн үстүнө жылдыруу менен.

Дагы бир блог картасы

Blog Hover Card

Пайда болот жылдырганда картанын тексти ошол эле.

Business карталары

Visit card

Una жөнөкөй, бирок учурдагы карта HTML жана CSS программаларында демо жана код менен баш багыңыз.

3D визит картасы

3D Flip Card

Бул карта татыктуу HTML жана CSS менен 3D анимация. Елена Назарованын колунан жасалган, ал түскө боёлгон визитка үчүн эң сонун.

CSS визит картасы

CSS визит картасы

CSSтеги таң калыштуу визит картасы 3D форматында айланат биз койгон учурда чычкан көрсөткүчүнө жооп берген бир катар URL даректерине жол ачуу.

Card торчолору

Grid Card

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

3D карталар ачылып жатат

3D карта

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

Responsive Material Design Card

материалдык жасалга

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

Flexbox картасынын торчосу

Flexbox

Карточканын прототиби ошол эле бийиктикте, алар тордун flexbox форматын колдонгону менен айырмаланат. Анын дагы бир мааниси - CSS катыштарын жана CSS чыпкаларын колдонуу.

Clash of Clans Cards

Кландардын кагылышуусу

El популярдуу мобилдик оюн Андре Мадаранг тарабынан түзүлгөн HTML жана CSS карталарында бар. Биз алардын ортосунда так жана жогорку деңгээлде визуалдык анимация менен өтө алабыз.

Электрондук соода үчүн слайд карталары

Продукт картасы

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

Интерфейс дизайны - өнүм картасы

Продукт интерфейси

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

Өнүм картасы

ECommerce өнүмү

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

Flexy продукт карталары

Flexy card

Анын аты көрсөтүп тургандай, flexbox колдонот кошуу баскычын басканда кызыктуу анимация түзүү.

Flip cards

Flip card

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

3D өнүм карталары катары карталар

3D Card

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

Parallax картасы

Parallax картасы

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

Карталар үчүн эффектти алып барыңыз

Hover card

Жөнөкөй эффект бирок көздүн жоосун алуу карталар жөнүндө.

Жөнөкөй учкуч эффект

Жөнөкөй карта

Таң калыштуу, жөнөкөй эффект, бирок биз аны элестеткен учурга чоң таасирин тийгизет.

Параллакс тереңдик карталары

Параллакс тереңдиги

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

Тасмалар үчүн UI картасы

Movie card

Карта HTML менен жасалган мыкты макет жана CSS.

Профиль картасы

Байланыш картасы

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

Polaroid топтомдору

Polaroid

Касиеттери менен, чыпкалар жана CSS настройкалары Polaroid топтоштурулган карталардын бул сериясы түзүлгөн; бул SVG сүрөттөрүн вебден өткөрүп жибербеңиз.


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

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

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

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

*

*

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

  1.   Кристиан ал мындай деди:

    Ушул карталардын каалаганын wordpress баракка киргизсе болот