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.
Paralaxa Card
Veľmi vizuálny experiment s a pútavý efekt preklopenia. Je lepšie, aby ste to videli, aby ste vedeli, o čom to hovorí.
Efekt umiestnenia kurzora na karty
Jednoduchý efekt, ale gýčový vznášať sa o kartách.
Jednoduchý efekt vznášania
Pozoruhodný, pomerne jednoduchý efekt, ale to má veľký efekt v okamihu, keď si to vizualizujeme.
Karty hĺbky paralaxy
Tieto karty obsahujú znak koncept paralaxy na vrchol vytvoriť niekoľko dizajnovo veľmi nápadných kariet. Musíte ho iba vidieť, aby ste lepšie pochopili, aký efekt má na používateľa, keď vyberiete niektorú z kategórií v našom blogu.
UI karta pre filmy
Kartu skvelé rozloženie pomocou HTML a CSS.
Profilová karta
veľmi dobré animácie pre kartu kontaktu, v ktorej môžeme implementovať prístup k profilom sociálnych médií. HTML a CSS.
Karty v balíku Polaroid
S vlastnosťami, filtrami a Vlastné prechody CSS Táto séria zoskupených kariet Polaroid je vytvorená; nenechajte si ujsť tieto obrázky SVG na webe.
Ktorúkoľvek z týchto kariet bude možné vložiť na stránku s wordpressom
MILUJEM ICH