27 nemokamos HTML ir CSS kortelės tinklaraščiams, el. Prekybai ir dar daugiau

Užveskite korteles

Internetiniai ištekliai yra beveik begaliniai, bet rasti juos kokybiškus yra tikrai sunkus dalykas, nors ieškant šiek tiek ir turint gerą svetainių, skirtų dizainui, sąrašą, viskas tampa lengviau. Tuo metu, kai tokios kalbos, kaip HTML ir CSS, yra puikios formos, priartėti prie nemokamų, aukštos kokybės išteklių yra beveik keli paspaudimai.

Mes ketiname išvardyti seriją nemokamos kortelės HTML ir CSS kurie puikiai tinka visų tipų tinklaraščiams, verslui, elektroninei prekybai ir daugeliui kitų. Didelio nuotolio kolekcija, kad ją būtų galima įtraukti į kai kuriuos darbus, kuriuos atliekate visų tipų klientams. Padarykime tai su šiuo sąrašu, kuriame naudojamas codepen.io, kad galėtumėte gauti kodą tiek HTML, tiek CSS.

Dienoraščio kortelių linksmybės Nr

Kortų linksmybės

A puiki dizaino kortelė Tai pasako beveik viską, kas vaizduoja jį. Galite apsilankyti codepen.io, kad gautumėte atitinkamą kodą ir įdėtumėte jį į savo svetainę.

Tik CSS naujienų kortelės CSS

Naujienų kortelė

Ši kortelė su „Stranger Things“ kaip fonas, išsiskiria sklandžia animacija, atskleidžiančia turinį. Tai grynas CSS.

Tinklaraščio įrašo elementas

Dienoraščio įrašas Žiniatinklio peržiūra užvedant pelės žymeklį ant jo. Jis turi CSS ir HTML kad būtų lengviau įtraukti.

Tinklaraščio kortelės

Tinklaraščio kortelės

Minimalistinis reaguojantis dienoraščio kortelių dizainas. Greita ir sklandi animacija aukštos kokybės, nepaliekančių abejingų.

Reaguojančios vizitinės kortelės

Reaguojančios kortelės

Išsiskiria nedidelė animacija užvedę pelės žymeklį ant kortelės atvaizdo.

Dar viena dienoraščio kortelė

Tinklaraščio užvedimo kortelė

Pasirodo kortelės tekstas, kai svyruoja tame pačiame.

Vizitinės kortelės

Vizitinė kortelė

A paprasta, bet dabartinė kortelė apsilankykite naudodami demonstracinę versiją ir kodą HTML ir CSS.

3D vizitinė kortelė

3D apverčiamoji kortelė

Ši kortelė verta 3D animacija su HTML ir CSS. Pagaminta Elenos Nazarovos, ji puikiai tinka spalvą ryškinančiai vizitinei kortelei.

CSS vizitinė kortelė

CSS vizitinė kortelė

Labai ryški vizitinė kortelė CSS sukasi 3D formatu kad atsirastų vietos URL adresams, kurie reaguoja į pelės žymeklį tuo metu, kai jį dedame.

Kortelių tinkleliai

Tinklelio kortelė

Gerai uždėtų kortelių serija su akį traukiantis dizainas. Tai stebina savo supaprastinta estetika, tačiau gerai pasiekia HTML, CSS ir SCSS kodą.

Atskleidžiamos 3D kortelės

3D kortelė

Ši kortelių tinklelių serija atskleisti daugiau informacijos šiuo metu mes palikome pelę virš žalios piktogramos. Tuo pačiu metu, kai paliekame žymeklį, likusi tinklelio dalis juda atitinkamai.

Reaguojančios medžiagos dizaino kortelė

medžiaga dizainas

Su „Google“ dizaino kalba, pasirodo ši kortelių serija, paryškinta meniu piktograma, atveriančia visą veikėjų informaciją, kaip pavyzdyje. Gražios ir intuityvios, puikios vizualinės animacijos.

„Flexbox“ kortelių tinklelis

„Flexbox“

Kortelės prototipas tame pačiame aukštyje, kuriame jie išsiskiria tinklelio „flexbox“ formatu. Kita jo vertė yra CSS formato ir CSS filtrų naudojimas.

Klanų kortų susidūrimas

Fotoreportažai iš klanų

El populiarus mobilusis žaidimas turi savo korteles HTML ir CSS, kurias sukūrė Andre Madarang. Mes galime praeiti tarp jų su tikslia ir labai vaizdinga animacija.

Skaidrių kortelės el. Prekybai

Prekės kortelė

Su judri animacijaŠios kortelės skatina jus ieškoti jų elementų, kad sužinotumėte apie ką jie yra. Su puikiu Omaro Dsoky dizainu.

Sąsajos dizainas - gaminio kortelė

Produkto vartotojo sąsaja

Puiki kortelė, skirta sukurti tuos mūsų el. prekybos produktas. Pagaminta HTML ir CSS.

Prekės kortelė

Elektroninės prekybos produktas

Iš tos pačios kortelės mes galime perduoti kelis vaizdus kad geriau pamatytumėte produktą. Jame yra mygtukas Pridėti į krepšelį, jame yra HTML, CSS ir „JavaScript“ kodas.

„Flexy“ produktų kortelės

Lanksti kortelė

Kaip rodo jo pavadinimas, naudoja „flexbox“ sukurti įdomią animaciją, kai spustelėsime mygtuką Pridėti į krepšelį.

Apverskite korteles

Apversti kortelę

Mažai kodo kai kurioms kortelėms su sklandžiu ir tobula animacija. Per kelias minutes galite juos įtraukti. Neseniai pridėta prie kodinio rašiklio.

Kortelės kaip 3D gaminių kortelės

3D kortelė

Reikėtų pažymėti, kad šios kortelės yra tarsi ant stalo turėtume kortų seriją. Rodyklė paliekama ramybės būsenoje, ji priartėja, spustelėja kiekvieną ir rodo kortelės galinę dalį, kad būtų rodoma produkto informacija. Mes dar kartą spustelėjame ir paliekame jį taip, kaip buvo su priekiu. Puikiai tinka mokytis 3D CSS savybių.

Paralakso kortelė

Paralakso korta

Labai vizualus eksperimentas su a akį traukiantis vartymo efektas. Geriau, kad jūs tai matytumėte, kad žinotumėte, apie ką kalbama.

Kortelėms užveskite pelės žymeklį

Užveskite kortelę

Paprastas efektas, bet gudrus pakimba apie korteles.

Paprastas pelės žymeklis

Paprasta kortelė

Ryškus gana paprastas efektas, bet tai turi puikų efektą tuo metu, kai mes jį vizualizuojame.

Paralakso gylio kortelės

Paralakso gylis

Ant šių kortelių yra paralakso koncepcija į viršų suformuoti labai ryškias korteles pagal dizainą. Jūs tiesiog turite tai pamatyti, kad geriau suprastumėte jo poveikį vartotojui, kai pasirenkate kai kurias mūsų tinklaraščio kategorijas.

Vartotojo sąsaja, skirta filmams

Filmo kortelė

Kortelė puikus maketas, sukurtas naudojant HTML ir CSS.

Profilio kortelė

Kontaktinė kortelė

Labai geros animacijos kontaktinei kortelei, kurioje galime įdiegti prieigą prie socialinės žiniasklaidos profilių. HTML ir CSS.

„Polaroid“ komplektuojamos kortelės

Polaroid

Su savybėmis, filtrais ir CSS pasirinktiniai perėjimai Sukurta ši grupuotų „Polaroid“ kortelių serija; nepraleiskite šių SVG vaizdų žiniatinklio.


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

Komentaras, palikite savo

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.

  1.   Cristian sakė

    Bet kurią iš šių kortelių bus galima įterpti į puslapį su „WordPress“