27 ingyenes HTML és CSS kártya blogokhoz, e-kereskedelemhez és egyebekhez

Hover Cards

Az online források szinte végtelenek, de minőségi megtalálásuk valóban nehéz, bár keresgélek egy kicsit, és a tervezéssel foglalkozó webhelyek jó listája van, a dolog könnyebbé válik. Abban az időben, amikor a nyelvek, mint a HTML és a CSS, remek formában vannak, az ingyenes, jó minőségű forrásokhoz való közelítés szinte néhány kattintással elérhető.

Sorolni fogjuk ezeket ingyenes kártyák HTML-ben és CSS-ben amelyek tökéletesen alkalmasak minden típusú bloghoz, üzleti tevékenységhez, e-kereskedelemhez és még sok minden máshoz. Nagy hatótávolságú kollekció, amely beépíthető minden olyan munkába, amelyet minden típusú ügyfél számára végez. Tegyük ezt a listát, amely a codepen.io fájlt használja, hogy HTML és CSS formában is megszerezhesse a kódot.

Blogkártya szórakozás # 1

Card Fun

egy remek design kártya amely szinte mindent elmond az ábrázoló képről, keresse fel a codepen.io webhelyet, hogy megszerezze a megfelelő kódot, és telepítse a webhelyére.

Csak CSS hírkártyák CSS

Hírlap

Ezt a kártyát Idegen dolgok háttérként, kiemelkedik a tartalmát feltáró sima animációból. Ez tiszta CSS.

Blogbejegyzés tétele

Blog hozzászólás A web előnézete az egérmutató fölé helyezésével. CSS és HTML van benne az egyszerű beépítés érdekében.

Blogkártyák

Blogkártyák

Minimalista érzékeny blogkártya-tervezés. Gyors és sima animációk kiváló minőségű, amely senkit sem hagy közömbösnek.

Reszponzív névjegykártyák

Reszponzív kártyák

Kitűnik az enyhe animáció úgy, hogy az egérmutatót a kártya képe fölé viszi.

Újabb blogkártya

Blog lebegő kártya

Megjelenik a kártya szövege lebegéskor ugyanabban a.

Névjegykártyák

Névjegykártya

egy egyszerű, de aktuális kártya látogasson el demóval és kóddal HTML-ben és CSS-ben.

3D névjegykártya

3D flip kártya

Ez a kártya megéri egy 3D animáció HTML és CSS segítségével. Elena Nazarova készítette, tökéletes színfeltű névjegykártyához.

CSS névjegykártya

CSS névjegykártya

Nagyon feltűnő névjegykártya a CSS-ben 3D-ben forog hogy helyet kapjon egy sor URL-cím, amely válaszol az egérmutatóra abban a pillanatban, amikor letettük.

Kártyarácsok

Rácskártya

Jól elhelyezett kártyák sora figyelemfelkeltő kialakítás. Egyszerű esztétikája miatt meglepő, de a HTML, a CSS és az SCSS kódban jó találatot mutat.

3D kártyák nyilvánosságra kerülnek

3D kártya

Ez a kártyarács-sorozat további információk felfedése az egeret a zöld ikon fölött hagytuk. Ugyanakkor elhagyjuk a mutatót, a többi rács ennek megfelelően mozog.

Reszponzív anyag tervezési kártya

Anyagok tervezési

Az google design nyelv, ez a kártyasorozat jelenik meg, amely kiemelkedik a menü ikonnal, amely megnyitja a szereplők összes információját, mint a példában. Gyönyörű és intuitív animációk, nagyszerű vizuális megjelenéssel.

Flexbox kártya rács

flexbox

Kártya prototípusa ugyanazon a magasságon, mint amivel kitűnnek a rácsos flexbox formátum használatával. Egy másik értéke a CSS képarányok és a CSS szűrők használata.

A klánok kártyáinak összecsapása

Clash of klánok

El népszerű mobil játék HTML és CSS kártyáit Andre Madarang készítette. Pontos és rendkívül látványos animációval haladhatunk közöttük.

Dia kártyák az e-kereskedelemhez

Termékkártya

Egy mozgékony animációEzek a kártyák arra ösztönzik Önt, hogy keresse meg elemeiket, hogy megtudja, miről szólnak. Omar Dsoky nagyszerű kivitelével.

Interfész tervezés - Termékkártya

Termék felhasználói felület

Tökéletes kártya ezek tervezéséhez e-kereskedelem terméke. HTML-ben és CSS-ben készült.

Termékkártya

E-kereskedelmi termék

Ugyanabból a kártyából tudjuk adjon át több képet hogy jobban lássa a terméket. Ez tartalmazza a Kosárba helyezés gombot, HTML, CSS és JavaScript kódot tartalmaz.

Flexy termékkártyák

Flexy kártya

Ahogy a neve is jelzi, flexboxot használ érdekes animáció készítéséhez, amikor rákattintunk a Kosárba helyezés gombra.

Flip kártyák

Flip kártya

Kevés kód néhány kártyához, sima és tökéletes animáció. Pár perc alatt beépítheti őket. Nemrégiben hozzáadva a kódtollhoz.

Kártyák 3D termékkártyákként

3D kártya

Meg kell jegyezni, hogy ezek a kártyák mintha egy sor kártyánk lenne az asztalon. A mutató pihentetve marad, és nagyítanak, mindegyikre kattintanak, és megmutatják a kártya hátulját a termékinformációk megjelenítéséhez. Újra kattintunk, és úgy hagyjuk, ahogy az elülső résznél volt. Tökéletes a 3D CSS tulajdonságok megismeréséhez.

Parallax kártya

Parallax kártya

Nagyon vizuális kísérlet a figyelemfelkeltő flip effektus. Jobb, ha látja, hogy tudja, miről beszél.

Lebegő effektus a kártyákhoz

Hover kártya

Egyszerű hatás, de trükkös lebegés a kártyákról.

Egyszerű lebegő hatás

Egyszerű kártya

Feltűnő meglehetősen egyszerű hatás, de ennek nagy hatása van jelen pillanatban.

Parallaxis mélység kártyák

Parallaxis mélység

Ezeken a kártyákon szerepel a parallaxis koncepció a csúcsra hogy nagyon szembetűnő kártyákat alakítson ki a tervezés alapján. Csak meg kell látnia, hogy jobban megértse a felhasználóra gyakorolt ​​hatását, amikor kiválasztja a blogunk néhány kategóriáját.

Felhasználói felület kártya filmekhez

Filmkártya

Egy kártya nagyszerű HTML-elrendezés és a CSS.

Profil kártya

Kapcsolattartó kártya

nagyon jó animációk egy névjegykártyához, amelyben megvalósíthatjuk a közösségi média profilokhoz való hozzáférést. HTML és CSS.

Csomagolt Polaroid kártyák

polaroid

Tulajdonságokkal, szűrőkkel és CSS egyéni átmenetek A Polaroid csoportosított kártyák e sorozatát létrehozzák; ne hagyja ki ezeket az SVG képeket az interneten.


A cikk tartalma betartja a szerkesztői etika. A hiba bejelentéséhez kattintson a gombra itt.

2 hozzászólás, hagyd a tiedet

Hagyja megjegyzését

E-mail címed nem kerül nyilvánosságra.

*

*

  1. Az adatokért felelős: Miguel Ángel Gatón
  2. Az adatok célja: A SPAM ellenőrzése, a megjegyzések kezelése.
  3. Legitimáció: Az Ön beleegyezése
  4. Az adatok közlése: Az adatokat csak jogi kötelezettség alapján továbbítjuk harmadik felekkel.
  5. Adattárolás: Az Occentus Networks (EU) által üzemeltetett adatbázis
  6. Jogok: Bármikor korlátozhatja, helyreállíthatja és törölheti adatait.

  1.   cristian dijo

    Ezeknek a kártyáknak a bármelyikét be lehet illeszteni a WordPress oldalra

  2.   Stan dijo

    SZERETEM ŐKET