27 kariet všetkých typov HTML a CSS pre elektronické obchody, blogy a ďalšie

Online zdroje sú takmer nekonečné, ale nájsť ich kvalitne je naozaj ťažká vecAj keď trochu hľadáte a máte dobrý zoznam webových stránok venovaných dizajnu, veci sa uľahčujú. V čase, keď sú jazyky ako HTML a CSS v dobrej kondícii, je priblíženie sa ku kvalitným bezplatným zdrojom vzdialené takmer pár kliknutí.

Budeme uvádzať zoznam bezplatné karty v HTML a CSS ktoré sú úplne vhodné pre všetky typy blogov, firiem, elektronických obchodov a oveľa viac. Kolekcia ďalekého dosahu, aby ju bolo možné zahrnúť do práce, ktorú robíte pre všetky typy klientov. Urobme to s týmto zoznamom, ktorý používa codepen.io, aby ste mohli získať kód v HTML aj CSS.

Zábava s kartou Card # 1

Una karta skvelého dizajnu ktorý hovorí takmer o všetkom, čo ho predstavuje, môžete prejsť na stránku codepen.io, získať zodpovedajúci kód a nainštalovať si ho na svoj web.

Karty noviniek CSS iba CSS

Táto karta s Cudzie veci ako pozadie, vyniká plynulou animáciou, ktorá odhaľuje obsah. Je to čistý CSS.

Položka blogového príspevku

Ukážka webu umiestnením ukazovateľa myši nad ním. Má CSS a HTML pre ľahké zabudovanie.

Karty blogu

Minimalistický responzívny dizajn karty blogu. Rýchle a plynulé animácie vysokej kvality, ktoré nenechajú nikoho ľahostajným.

Citlivé vizitky

Vyniká pre mierna animácia umiestnením kurzora myši na obrázok karty.

Ďalšia karta blogu

Zobrazí sa text karty pri vznášaní v rovnakom.

Vizitky

Una jednoduchá, ale aktuálna karta navštívte s ukážkou a kódom v HTML a CSS.

3D vizitka

Táto karta stojí za to 3D animácia s HTML a CSS. Vyrobená Elenou Nazarovou je ideálna pre farebne nápadnú vizitku.

Vizitka CSS

Veľmi nápadná vizitka v CSS otáča sa v 3D aby sme uvoľnili miesto pre sériu adries URL, ktoré reagujú na ukazovateľ myši v okamihu, keď ho položíme.

Kartové mriežky

Séria dobre umiestnených kariet s pútavý dizajn. Je prekvapujúce svojou jednoduchou estetikou, ale s dobrým zásahom do kódu HTML, CSS a SCSS.

Odhaľujú sa 3D karty

Táto séria mriežok na karty v súčasnosti odhaliť viac informácií myšou sme nechali myš nad zelenou ikonou. Zároveň opustíme ukazovateľ, podľa toho sa posúva zvyšok mriežky.

Karta s responzívnym materiálom

S dizajnový jazyk google, objaví sa táto séria kariet, ktoré vynikajú ikonou ponuky, ktorá otvára všetky informácie o hercoch, ako v príklade. Nádherné a intuitívne animácie so skvelým vizuálnym vzhľadom.

Mriežka karty Flexbox

Prototyp karty v rovnakej výške, v ktorej vynikajú použitím formátu mriežky flexbox. Ďalšou z jeho hodnôt je použitie pomerov strán CSS a filtrov CSS.

Karty súbojov klanov

El populárna mobilná hra má svoje karty v HTML a CSS vytvorené Andre Madarangom. Môžeme medzi nimi prechádzať s precíznou a vysoko vizuálnou animáciou.

Vysúvacie karty pre elektronický obchod

S svižná animácia, tieto karty vám odporúčajú vyhľadať ich prvky a zistiť, o čo ide. So skvelým dizajnom od Omar Dsoky.

Návrh rozhrania - karta produktu

Dokonalá karta na návrh tých z produkt nášho elektronického obchodu. Vytvorené v HTML a CSS.

Karta produktu

Z tej istej karty môžeme odovzdať niekoľko obrázkov aby ste produkt lepšie videli. Zahŕňa tlačidlo pridať do košíka a obsahuje kód HTML, CSS a JavaScript.

Karty produktu Flexy

Ako naznačuje jeho názov, používa flexbox vytvoriť zaujímavú animáciu po kliknutí na tlačidlo Pridať do košíka.

Otočte karty

Malý kód pre niektoré karty s hladkým a dokonalá animácia. Môžete ich začleniť do niekoľkých minút. Nedávno pridané do codepenu.

Karty ako karty 3D produktu

Je potrebné poznamenať, že tieto karty sú akoby sme mali na stole sériu kariet. Ukazovateľ je ponechaný v pokoji a zväčšia sa, kliknú na každý z nich a na zadnej strane karty sa zobrazia informácie o produkte. Znovu klikneme a necháme to tak, ako to bolo s prednou časťou. Perfektné na učenie sa 3D vlastností CSS.