27 bezplatných karet HTML a CSS pro blogy, elektronický obchod a další

Vznášející se karty

Online zdroje jsou téměř nekonečné, ale najít je kvalitní je opravdu obtížná věcI když trochu hledáme a máme dobrý seznam webů věnovaných designu, věci se ulehčují. V době, kdy jsou jazyky jako HTML a CSS ve skvělé kondici, je přiblížení bezplatných vysoce kvalitních zdrojů téměř na pár kliknutí.

Budeme vypisovat řadu karty zdarma v HTML a CSS které perfektně fungují pro všechny typy blogů, podnikání, elektronického obchodování a mnoho dalšího. Sbírka s dlouhým dosahem, aby ji bylo možné začlenit do práce, kterou děláte pro všechny typy klientů. Uděláme to s tímto seznamem, který používá codepen.io, abyste mohli získat kód v HTML i CSS.

Zábavná karta blogu č. 1

Karetní zábava

A skvělý design karta který říká téměř vše, co obrázek představuje, můžete přejít na stránku codepen.io, získat odpovídající kód a nainstalovat jej na svůj web.

Karty CSS News pouze CSS

Novinky

Tato karta s Cizí věci jako pozadí, vyniká svou plynulou animací, která odhaluje obsah. Je to čistý CSS.

Položka blogového příspěvku

Blogu Náhled webu přenesením ukazatele myši nad něj. Má CSS a HTML pro snadné zabudování.

Karty blogu

Karty blogu

Minimalistický responzivní design karty blogu. Rychlé a plynulé animace vysoké kvality, které nenechají nikoho lhostejným.

Reagovat vizitky

Responzivní karty

Stojí za nepatrná animace umístěním kurzoru myši na obrázek karty.

Další karta blogu

Karta pro umístění blogu

Zobrazí se text karty při vznášení ve stejné.

Vizitky

Vizitka

A jednoduchá, ale aktuální karta návštěva s ukázkou a kódem v HTML a CSS.

3D vizitka

3D otočná karta

Tato karta stojí za to 3D animace s HTML a CSS. Vyrobená Elenou Nazarovou, je ideální pro barevně nápadnou vizitku.

Vizitka CSS

Vizitka CSS

Velmi nápadná vizitka v CSS otáčí se ve 3D uvolnit cestu pro řadu adres URL, které reagují na ukazatel myši v okamžiku, kdy jej položíme.

Mřížky karet

Grid Card

Série dobře umístěných karet s poutavý design. Je překvapující svou zjednodušující estetikou, ale s dobrým zásahem do kódu HTML, CSS a SCSS.

Odhalují se 3D karty

3D karta

Tato řada karetních mřížek odhalit více informací v tuto chvíli ponechali jsme myš nad zelenou ikonou. Ve stejné době, kdy opustíme ukazatel, se odpovídajícím způsobem přesune zbytek mřížky.

Responzivní materiál Design Card

Materiálové provedení

S designový jazyk google, objeví se tato řada karet, které vynikají ikonou nabídky, která otevírá všechny informace o hercích, jako v příkladu. Krásné a intuitivní animace se skvělým vizuálním vzhledem.

Mřížka karet Flexbox

Flexbox

Prototyp karty ve stejné výšce, ve které vynikají pomocí formátu mřížky flexbox. Další z jeho hodnot je použití poměrů stran CSS a filtrů CSS.

Střet karet klanů

Clash of Clans

El populární mobilní hra má své karty v HTML a CSS vytvořené Andre Madarangem. Můžeme se mezi nimi pohybovat s přesnou a vysoce vizuální animací.

Vysouvací karty pro eCommerce

Karta produktu

S agilní animaceTyto karty vás vyzývají k hledání jejich prvků, abyste zjistili, o co jde. Se skvělým designem od Omar Dsoky.

Návrh rozhraní - karta produktu

Uživatelské rozhraní produktu

Perfektní karta pro design těch z produkt našeho elektronického obchodu. Vyrobeno v HTML a CSS.

Karta produktu

Produkt elektronického obchodu

Ze stejné karty můžeme projít několika obrázky abyste produkt lépe viděli. Zahrnuje tlačítko pro přidání do košíku a obsahuje kód HTML, CSS a JavaScript.

Karty produktů Flexy

Flexy karta

Jak naznačuje jeho název, používá flexbox vytvořit zajímavou animaci, když klikneme na tlačítko Přidat do košíku.

Otočte karty

Otočit kartu

Malý kód pro některé karty s hladkým a perfektní animace. Během několika minut je můžete začlenit. Nedávno přidáno do codepen.

Karty jako 3D karty produktů

3D karta

Je třeba poznamenat, že tyto karty jsou jako bychom měli na stole řadu karet. Ukazatel je vlevo a oni se přiblíží, kliknou na každý z nich a zobrazí zadní část karty, aby zobrazili informace o produktu. Znovu klikneme a necháme to tak, jak to bylo s přední částí. Ideální pro učení vlastností 3D CSS.

Paralaxová karta

Paralaxová karta

Velmi vizuální experiment s a poutavý flip efekt. Je lepší, když to vidíte, abyste věděli, o čem to mluví.

Efekt najetí myší na karty

Umístěte ukazatel myši

Jednoduchý efekt, ale nezvyklý vznášet se o kartách.

Jednoduchý efekt vznášení

Jednoduchá karta

Stávkující poměrně jednoduchý efekt, ale to má velký efekt v okamžiku, kdy si to představíme.

Karty hloubky paralaxy

Hloubka paralaxy

Tyto karty nesou koncept paralaxy nahoru vytvořit některé velmi nápadné karty záměrně. Musíte to jen vidět, abyste lépe porozuměli účinku, který vyvolá pro uživatele, když vyberete některou z kategorií v našem blogu.

UI karta pro filmy

Filmová karta

Kartu skvělé rozložení pomocí HTML a CSS.

Profilová karta

Kontaktní karta

Velmi dobré animace pro kontaktní kartu, ve které můžeme implementovat přístup k profilům sociálních médií. HTML a CSS.

Balíčky karet Polaroid

Polaroid

S vlastnostmi, filtry a Vlastní přechody CSS Tato série seskupených karet Polaroid je vytvořena; nenechte si ujít tyto obrázky SVG web.


Obsah článku se řídí našimi zásadami redakční etika. Chcete-li nahlásit chybu, klikněte zde.

Komentář, nechte svůj

Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.

  1.   Cristian řekl

    Na stránku s WordPressem bude možné vložit kteroukoli z těchto karet