27 karta HTML u CSS b'xejn għal blogs, kummerċ elettroniku u aktar

Ir-riżorsi online huma kważi infiniti, iżda li ssibhom ta 'kwalità hija verament il-ħaġa diffiċliGħalkemm tfittex ftit u jkollok lista tajba ta 'websajts iddedikati għad-disinn, l-affarijiet isiru aktar faċli. Fi żmien meta lingwi bħall-HTML u s-CSS jinsabu f'forma kbira, l-eqreb ta 'riżorsi b'xejn u ta' kwalità għolja huwa kważi ftit klikks 'il bogħod.

Se nagħmlu lista ta 'serje ta' karti b'xejn f'HTML u CSS li jaħdmu perfettament għat-tipi kollha ta 'blog, negozju, kummerċ elettroniku u ħafna aktar. Kollezzjoni fuq medda twila sabiex tkun tista ’tiġi inkorporata f’xi xogħol li qed tagħmel għat-tipi kollha ta’ klijenti. Aħna se nagħmluha b'din il-lista li tuża codepen.io sabiex tkun tista 'tikseb il-kodiċi kemm fl-HTML kif ukoll fis-CSS.

Gost tal-Karta tal-Blog # 1

a karta tad-disinn kbira li tgħid kważi kollox l-immaġni li tirrappreżentaha, tista 'tmur fuq codepen.io biex tikseb il-kodiċi korrispondenti u tinstallah fuq il-websajt tiegħek.

CSS News Cards CSS biss

Din il-karta, bi Stranger Things bħala sfond, tispikka għall-animazzjoni bla xkiel tagħha li tiżvela l-kontenut. Huwa CSS pur.

Oġġett tal-Post tal-Blog

Previżjoni tal-web billi ġġib il-mouse pointer fuqu. Għandha CSS u HTML għal inkorporazzjoni faċli.

Karti tal-blog

Disinn ta 'karta tal-blog li jirrispondi minimalista. Animazzjonijiet veloċi u bla xkiel kwalità għolja li ma jħallu lil ħadd indifferenti.

Karti tan-negozju li jirrispondu

Jispikka għal l-animazzjoni żgħira billi tpoġġi l-pointer tal-maws fuq l-immaġni tal-karta.

Karta oħra tal-blog

Jidher il - test tal-biljett meta jkun qed jittajjar fl-istess.

Karti tan-negozju

a karta sempliċi imma kurrenti żjara bid-demo u l-kodiċi f'HTML u CSS.

Karta tan-negozju 3D

Din il-karta tiswa animazzjoni 3D b'HTML u CSS. Magħmul minn Elena Nazarova, huwa perfett għal business card li jolqot il-kulur.

Karta tan-negozju CSS

Karta tan-negozju impressjonanti ħafna fis-CSS dik idur fi 3D biex tagħmel mod għal serje ta 'indirizzi URL li jirrispondu għall-mouse pointer fil-mument li npoġġuh.

Grilji tal-kard

Serje ta 'karti f'pożizzjoni tajba ma' disinn li jiġbed l-għajn. Huwa sorprendenti għall-estetika simplistika tagħha, iżda b’riżultat tajjeb fil-kodiċi HTML, CSS u SCSS.

Karti 3D qed jiġu żvelati

Din is-serje ta 'grilji tal-karti jiżvelaw aktar informazzjoni bħalissa li ħallejna l-maws fuq l-ikona fl-aħdar. Fl-istess ħin li nħallu l-pointer, il-bqija tal-gradilja timxi kif xieraq.

Karta tad-Disinn tal-Materjal Reattiv

Bl- lingwa tad-disinn google, jidhru din is-serje ta 'karti li huma enfasizzati mill-ikona tal-menu li tiftaħ l-informazzjoni kollha tal-atturi bħal fil-każ ta' eżempju. Animazzjonijiet sbieħ u intuwittivi b'dehra viżwali kbira.

Grilja tal-biljett Flexbox

Prototip tal-biljett fl-istess għoli li jispikkaw għall-użu tal-format tal-grid flexbox. Valur ieħor tiegħu huwa l-użu ta 'proporzjonijiet tal-aspett CSS u filtri CSS.

Karti tal-Kunflitt tal-Clans

El logħba mobbli popolari għandu l-karti tiegħu f'HTML u CSS maħluqa minn Andre Madarang. Nistgħu ngħaddu bejniethom b'animazzjoni preċiża u viżiva ħafna.

Slide cards għall-kummerċ elettroniku

Bil- animazzjoni b'aġilità, dawn il-karti jħeġġukom biex tfittxu l-elementi tagħhom biex issir taf dwar xiex huma. B'disinn mill-aqwa minn Omar Dsoky.

Disinn tal-Interface - Karta tal-Prodott

Karta perfetta biex tfassal dawk ta ' prodott tal-kummerċ elettroniku tagħna. Magħmul f'HTML u CSS.

Karta tal-prodott

Mill-istess karta li nistgħu għaddi diversi immaġini biex tara aħjar il-prodott. Tinkludi l-buttuna Żid mal-karrettun u fiha kodiċi HTML, CSS u JavaScript.

Karti tal-Prodott Flexy

Kif jindika ismu, juża flexbox biex noħolqu animazzjoni interessanti meta nikklikkjaw fuq il-buttuna add to cart.

Flip cards

Kodiċi żgħir għal xi karti b'karta lixxa u animazzjoni perfetta. Fi ftit minuti tista 'tinkorporahom. Miżjud reċentement ma 'codepen.

Karti bħala Karti tal-Prodott 3D

Ta 'min jinnota li dawn il-karti huma bħallikieku kellna sensiela ta 'karti fuq mejda. Il-pointer jitħalla u jagħmlu zoom in, ikklikkja fuq kull wieħed, u juru d-dahar tal-biljett biex juru informazzjoni dwar il-prodott. Nerġgħu nikklikkjaw u nħalluh kif kien fuq quddiem. Perfetta biex titgħallem proprjetajiet 3D CSS.

Parallax Card

Esperiment viżiv ħafna ma ' effett flip li jiġbed l-għajn. Huwa aħjar li tarah biex tkun taf dwar xiex qed titkellem.

Effett Hover għall-karti

Effett sempliċi imma imdejjaq gimmicky dwar karti.

Effett sempliċi imbagħad jerġgħu jittellgħu

Effett pjuttost impressjonanti, imma dak għandu effett kbir fil-mument li nidhruh.

Karti tal-Fond tal-Parallax

Dawn il-karti għandhom kunċett parallax sal-quċċata biex tifforma xi karti impressjonanti ħafna bid-disinn. Trid tarah biss biex tifhem aħjar l-effett li tipproduċi fuq l-utent meta tagħżel uħud mill-kategoriji fil-blog tagħna.

Karta UI għall-films

Karta ta ' tqassim kbir magħmul bl-HTML u CSS.

Karta tal-profil

Ħafna animazzjonijiet tajbin għal karta ta 'kuntatt li fiha nistgħu nimplimentaw aċċess għal profili tal-midja soċjali. HTML u CSS.

Polaroid bundled cards

Bi proprjetajiet, filtri u Transizzjonijiet tad-dwana CSS Din is-serje ta 'karti miġbura Polaroid huma maħluqa; titlifx dawn l-istampi tal-web SVG.