27 mga libreng HTML at CSS card para sa mga blog, e-commerce at marami pa

Ang mga mapagkukunan sa online ay halos walang katapusan, ngunit ang paghahanap sa kanila ng kalidad ay talagang ang mahirap na bagayKahit na naghahanap ng kaunti at pagkakaroon ng isang mahusay na listahan ng mga website na nakatuon sa disenyo, ang mga bagay ay naging mas madali. Sa oras na ang mga wika tulad ng HTML at CSS ay nasa masarap na oras, malapit sa libre, mataas na kalidad na mga mapagkukunan ay halos ilang mga pag-click ang layo.

Kami ay maglilista ng isang serye ng libreng mga card sa HTML at CSS Perpekto ang mga ito para sa lahat ng uri ng blog, negosyo, e-commerce at marami pa. Isang pangmatagalang koleksyon upang maaari itong isama sa ilan sa gawaing ginagawa mo para sa lahat ng uri ng mga kliyente. Gawin natin ito sa listahang ito na gumagamit ng codepen.io upang makuha mo ang code sa parehong HTML at CSS.

Kasayahan sa Blog Card # 1

isang mahusay na disenyo card na nagsasabing halos lahat ng imaheng kumakatawan dito, maaari kang dumaan sa codepen.io upang makuha ang kaukulang code at mai-install ito sa iyong website.

CSS News Card lamang ang CSS

Ang kard na ito, kasama ang Mga Bagay na Stranger bilang background, nakatayo para sa makinis nitong animasyon na nagpapakita ng nilalaman. Ito ay purong CSS.

Item sa Pag-post ng Blog

Isang preview ng web sa pamamagitan ng pagdadala dito ng mouse pointer. Mayroon itong CSS at HTML para sa madaling pagsasama.

Mga blog card

Isang minimalist na tumutugong disenyo ng blog card. Mabilis at makinis na mga animasyon mataas na kalidad na hindi nag-iiwan ng sinuman na walang malasakit.

Mga tumutugong card ng negosyo

Naninindigan para sa ang bahagyang animasyon sa pamamagitan ng pag-hover ng mouse pointer sa imahe ng card.

Isa pang blog card

Lumilitaw ang teksto ng card kapag nag-hover sa pareho

Mga business card

isang simple ngunit kasalukuyang card bisitahin ang may demo at code sa HTML at CSS.

3D card ng negosyo

Ang kard na ito ay nagkakahalaga isang 3D na animasyon na may HTML at CSS. Ginawa ni Elena Nazarova, perpekto ito para sa isang nakamamanghang kulay na business card.

Card ng negosyo sa CSS

Isang kapansin-pansin na card ng negosyo sa CSS na umiikot sa 3D upang gumawa ng paraan para sa isang serye ng mga address ng URL na tumutugon sa mouse pointer sa sandaling inilagay namin ito.

Grid ng card

Isang serye ng mga maayos na inilagay na card na may isang nakamamanghang disenyo. Ito ay nakakagulat para sa mga simplistic na estetika, ngunit may mahusay na hit sa HTML, CSS at SCSS code.

Isiniwalat ang mga 3D card

Ang serye ng mga grid ng card ibunyag ang karagdagang impormasyon sa ngayon na naiwan namin ang mouse sa icon na berde. Sa parehong oras na iniiwan namin ang pointer, ang natitirang grid ay gumagalaw nang naaayon.

Tumutugon sa Materyal na Disenyo ng Kard

Gamit ang wika ng disenyo ng google, lilitaw ang seryeng ito ng mga kard na tumatayo para sa icon ng menu na magbubukas ng lahat ng impormasyon ng mga aktor tulad ng halimbawa ng kaso. Maganda at madaling maunawaan ang mga animasyon na may mahusay na visual na hitsura.

Grid ng Flexbox card

Prototype ng card sa parehong taas na tumayo sila para sa paggamit ng format ng grid flexbox. Ang isa pang halaga nito ay ang paggamit ng mga ratios na aspeto ng CSS at mga filter ng CSS.

Clash of Clans Cards

El tanyag na mobile game ay ang kanyang mga kard sa HTML at CSS na nilikha ni Andre Madarang. Maaari kaming pumasa sa pagitan nila ng isang tumpak at lubos na visual na animasyon.

Mga slide card para sa eCommerce

Gamit ang isang maliksi na animationHinihikayat ka ng mga kard na ito na maghanap para sa kanilang mga elemento upang malaman kung tungkol saan ang mga ito. Na may mahusay na disenyo mula sa Omar Dsoky.

Disenyo ng Interface - Product Card

Ang isang perpektong card upang idisenyo ang mga ng produkto ng aming eCommerce. Ginawa sa HTML at CSS.

Product card

Mula sa parehong card maaari namin dumaan sa maraming mga imahe upang mas makita ang produkto. Kasama rito ang pindutan ng idagdag sa cart at naglalaman ng HTML, CSS at JavaScript code.

Flexy na mga card ng produkto

Tulad ng ipinahiwatig ng pangalan nito, gumagamit ng flexbox upang lumikha ng isang kagiliw-giliw na animation kapag nag-click kami sa idagdag sa pindutan ng cart.

Flip card

Maliit na code para sa ilang mga kard na may makinis at perpektong animasyon. Sa loob ng ilang minuto maaari mong isama ang mga ito. Kamakailan lamang naidagdag sa codepen.

Mga Card bilang Mga Card ng Produkto ng 3D

Dapat pansinin na ang mga kard ay na para bang mayroon kaming isang serye ng mga kard sa isang mesa. Ang pointer ay natitira at nag-zoom in sila, nag-click sa bawat isa, at ipinakita ang likod ng card upang ipakita ang impormasyon ng produkto. Muli kaming nag-click at iniiwan ito tulad ng sa harap. Perpekto para sa pag-aaral ng mga katangian ng 3D CSS.

Paralaks Card

Isang napaka-visual na eksperimento sa isang kapansin-pansin na epekto ng flip. Mas mabuti na makita mo ito upang malaman kung ano ang pinag-uusapan.

Mag-hover effect para sa mga card

Isang simpleng epekto ngunit gimik na hover tungkol sa mga kard.

Simpleng hover effect

Kapansin-pansin sa halip simpleng epekto, ngunit may mahusay na epekto iyan sa sandaling mailarawan natin ito.

Mga Parallax Depth Card

Ang mga kard na ito ay nagdadala ng konsepto ng paralaks hanggang sa itaas upang bumuo ng ilang mga kapansin-pansin na card sa pamamagitan ng disenyo. Kailangan mo lamang itong makita upang mas maunawaan ang epekto na ginagawa nito sa gumagamit kapag pumipili ng ilan sa mga kategorya sa aming blog.

UI card para sa mga pelikula

Isang kard ng mahusay na layout na ginawa gamit ang HTML at CSS.

Profile card

Tunay magandang mga animasyon para sa isang contact card kung saan maaari naming ipatupad ang pag-access sa mga profile sa social media. HTML at CSS.

Polaroid na mga bundle card

Sa mga pag-aari, filter at Pasadyang mga paglilipat ng CSS Ang serye ng mga naka-grupo na kard na Polaroid ay nilikha; huwag palampasin ang mga larawang ito ng SVG na web.