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.
Dar
- 1 Gost tal-Karta tal-Blog # 1
- 2 CSS News Cards CSS biss
- 3 Oġġett tal-Post tal-Blog
- 4 Karti tal-blog
- 5 Karti tan-negozju li jirrispondu
- 6 Karta oħra tal-blog
- 7 Karti tan-negozju
- 8 Karta tan-negozju 3D
- 9 Karta tan-negozju CSS
- 10 Grilji tal-kard
- 11 Karti 3D qed jiġu żvelati
- 12 Karta tad-Disinn tal-Materjal Reattiv
- 13 Grilja tal-biljett Flexbox
- 14 Karti tal-Kunflitt tal-Clans
- 15 Slide cards għall-kummerċ elettroniku
- 16 Disinn tal-Interface - Karta tal-Prodott
- 17 Karta tal-prodott
- 18 Karti tal-Prodott Flexy
- 19 Flip cards
- 20 Karti bħala Karti tal-Prodott 3D
- 21 Karta tal-Parallax
- 22 Effett Hover għall-karti
- 23 Effett sempliċi imbagħad jerġgħu jittellgħu
- 24 Karti tal-Fond tal-Parallax
- 25 Karta UI għall-films
- 26 Karta tal-profil
- 27 Polaroid bundled cards
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
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.
Karta tal-Parallax
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.
Kumment, ħalli tiegħek
Se jkun possibbli li tiddaħħal kwalunkwe waħda minn dawn il-karti fuq paġna bil-wordpress