27 gratis HTML- en CSS-kaarte vir blogs, e-handel en meer

Hover Cards

Aanlyn hulpbronne is amper oneindig, maar om hulle van gehalte te vind is regtig die moeilike dingAlhoewel dinge bietjie soek en 'n goeie lys webwerwe het wat ontwerp is, word dinge makliker. In 'n tyd waarin tale soos HTML en CSS in 'n goeie vorm is, is dit amper 'n paar klik weg om gratis hulpbronne van hoë gehalte te bereik.

Ons gaan 'n lys van gratis kaarte in HTML en CSS wat perfek geskik is vir alle soorte blog, besigheid, e-handel en nog baie meer. 'N Langafstandversameling sodat dit opgeneem kan word in sommige van die werk wat u vir alle soorte kliënte doen. Ons gaan dit doen met hierdie lys wat codepen.io gebruik, sodat u die kode in HTML en CSS kan kry.

Blogkaart-pret # 1

Kaartpret

'n groot ontwerp kaart dit sê byna alles wat die beeld voorstel, u kan na codepen.io gaan om die ooreenstemmende kode te bekom en op u webwerf te installeer.

Slegs CSS-nuuskaarte CSS

Nuuskaart

Hierdie kaart, met Stranger Things as agtergrond, staan ​​uit vir sy gladde animasie wat die inhoud onthul. Dit is suiwer CSS.

Blogpositem

blog post 'N Voorskou van die web deur die muiswyser daaroor te bring. Dit het CSS en HTML vir maklike inkorporering.

Blogkaarte

Blogkaarte

'N Minimalistiese responsiewe blogkaartontwerp. Vinnige en gladde animasies van hoë gehalte wat niemand onverskillig laat nie.

Responsiewe besigheidskaartjies

Responsiewe kaarte

Staan uit vir die effense animasie deur die muiswyser oor die kaartbeeld te hou.

Nog 'n blogkaart

Blog Hover Card

Verskyn die kaartteks as jy sweef in dieselfde.

Besigheidskaartjies

Besoekkaart

'n eenvoudige, maar huidige kaart besoek met demo en kode in HTML en CSS.

3D-besigheidskaartjie

3D-flipkaart

Hierdie kaart is die moeite werd 'n 3D-animasie met HTML en CSS. Gemaak deur Elena Nazarova, dit is ideaal vir 'n kleur-opvallende besigheidskaartjie.

CSS-besigheidskaartjie

CSS-besigheidskaartjie

'N Baie opvallende besigheidskaartjie in CSS draai in 3D om plek te maak vir 'n reeks URL-adresse wat reageer op die muisaanwyser op die oomblik dat ons dit neerlê.

Kaartroosters

Roosterkaart

N reeks goed geplaasde kaarte met 'n opvallende ontwerp. Dit is verbasend vanweë sy eenvoud, maar met 'n goeie treffer in die HTML-, CSS- en SCSS-kode.

3D-kaarte word onthul

3D-kaart

Hierdie reeks kaartroosters openbaar meer inligting op die oomblik dat ons die muis op die ikoon in groen gelaat het. Terselfdertyd as ons die wyser verlaat, beweeg die res van die rooster dienooreenkomstig.

Responsiewe materiaalontwerpkaart

materiaal Design

Met die google ontwerptaal, hierdie reeks kaarte verskyn wat uitstaan ​​vir die menu-ikoon wat al die inligting van die akteurs open soos in die voorbeeld geval. Pragtige en intuïtiewe animasies met 'n uitstekende visuele voorkoms.

Flexbox-kaartrooster

Flexbox

Kaart prototipe op dieselfde hoogte as waarvoor hulle die rooster-flexbox-formaat gebruik. Nog een van sy waardes is die gebruik van CSS-beeldverhoudings en CSS-filters.

Clash of Clans Cards

Botsing van Clans

El gewilde mobiele speletjie het sy kaarte in HTML en CSS geskep deur Andre Madarang. Ons kan tussen hulle deurtrek met 'n presiese en uiters visuele animasie.

Skyfie-kaarte vir e-handel

Produkkaart

Met 'n rats animasieHierdie kaarte moedig u aan om na hul elemente te soek om uit te vind waaroor dit gaan. Met 'n wonderlike ontwerp van Omar Dsoky.

Koppelvlakontwerp - Produkkaart

Produk-UI

'N perfekte kaart om dié van te ontwerp produk van ons e-handel. Gemaak in HTML en CSS.

Produkkaart

E-handelsproduk

Van dieselfde kaart wat ons kan slaag verskeie beelde om die produk beter te sien. Dit bevat die knoppie byvoeg aan mandjie en bevat HTML-, CSS- en JavaScript-kode.

Flexy produk kaarte

Flexy kaart

Soos die naam aandui, gebruik flexbox om 'n interessante animasie te skep as ons op die knoppie Voeg by mandjie klik.

Flip kaarte

Blaai om

Min kode vir sommige kaarte met 'n gladde en perfekte animasie. U kan dit binne enkele minute inkorporeer. Onlangs by kodepen gevoeg.

Kaarte as 3D-produkkaarte

3D-kaart

Daar moet op gelet word dat hierdie kaarte asof ons 'n reeks kaarte op 'n tafel gehad het. Die aanwyser word gelaat en hulle zoom in, klik op elkeen en wys die agterkant van die kaart om die produkinligting te wys. Ons klik weer en laat dit net soos aan die voorkant. Ideaal om 3D CSS-eienskappe aan te leer.

Parallaks kaart

Parallaks kaart

'N Baie visuele eksperiment met 'n opvallende flip-effek. Dit is beter dat u dit sien om te weet waaroor dit gaan.

Hover-effek vir kaarte

Hover kaart

'N Eenvoudige effek, maar foefies sweef oor kaarte.

Eenvoudige sweefeffek

Eenvoudige kaart

Opvallende redelike eenvoudige effek, maar dit het 'n groot uitwerking op die oomblik dat ons dit visualiseer.

Parallaks Diepte Kaarte

Parallaks diepte

Hierdie kaarte dra die parallaks konsep na bo om 'n paar baie treffende kaarte volgens ontwerp te vorm. U moet dit net sien om die effek wat dit op die gebruiker het, beter te verstaan ​​as u sommige van die kategorieë in ons blog kies.

UI-kaart vir films

Filmkaart

'N Kaart van wonderlike uitleg gemaak met HTML en CSS.

Profielkaart

Kontakkaart

Muy goeie animasies vir 'n kontakkaart waarin ons toegang tot sosiale media-profiele kan implementeer. HTML en CSS.

Polaroid-gebonde kaarte

Polaroid

Met eienskappe, filters en CSS persoonlike oorgange Hierdie reeks gegroepeerde kaarte Polaroid word geskep; mis nie hierdie SVG-afbeeldingsweb nie.


Die inhoud van die artikel voldoen aan ons beginsels van redaksionele etiek. Klik op om 'n fout te rapporteer hier.

'N Opmerking, los joune

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.

  1.   Cristian dijo

    Dit is moontlik om enige van hierdie kaarte op 'n bladsy met wordpress in te plaas