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

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

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

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

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

Karty blogu

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

Reagovat vizitky

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

Další karta blogu

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

Vizitky

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

3D vizitka

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

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

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

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

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

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ů

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

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

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

Karta produktu

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

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

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ů

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.