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

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

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

Blog Card fun # 1

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

CSS News Cards гана CSS

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

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

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

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

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

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

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

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

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

Business карталары

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

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

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

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

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

Card торчолору

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

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

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

Responsive Material Design Card

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

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

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

Clash of Clans Cards

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

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

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

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

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

Өнүм картасы

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

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

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

Flip cards

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

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

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

Parallax картасы

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

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

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

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

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

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

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

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

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

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

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

Polaroid топтомдору

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