Spletnih virov je skoraj neskončno, vendar njihovo kakovostno iskanje je resnično težkoČeprav nekoliko iščemo in imamo dober seznam spletnih strani, namenjenih oblikovanju, stvari postanejo lažje. V času, ko so jeziki, kot sta HTML in CSS, v odlični formi, je približevanje brezplačnim visokokakovostnim virom oddaljeno skoraj nekaj klikov.
Našteli bomo vrsto brezplačne kartice v HTML in CSS ki so popolnoma primerni za vse vrste blogov, podjetij, e-trgovine in še veliko več. Zbirka velikega obsega, tako da jo je mogoče vključiti v nekatera dela, ki jih opravljate za vse vrste strank. Naredimo to s tem seznamom, ki uporablja codepen.io, tako da lahko kodo dobite v HTML in CSS.
Blog Card fun # 1
A odlična oblikovalska kartica to pomeni skoraj vse slike, ki jih predstavljajo, lahko pojdite na codepen.io, da dobite ustrezno kodo in jo namestite na svoje spletno mesto.
CSS News Cards samo CSS
Ta kartica s Neznanke kot ozadje, izstopa z gladko animacijo, ki razkriva vsebino. Je čisti CSS.
Postavka v spletnem dnevniku
Predogled spleta tako, da preko njega premaknete kazalec miške. Ima CSS in HTML za enostavno vgradnjo.
Spletne kartice
Minimalistično odzivno oblikovanje blogovskih kartic. Hitre in gladke animacije visoke kakovosti, ki nikogar ne pustijo ravnodušnega.
Odzivne vizitke
Izstopa za rahla animacija tako, da miškin kazalec pomaknete na sliko kartice.
Še ena blog kartica
Prikaže se besedilo kartice, ko lebdite v istem.
Vizitke
A preprosta, a aktualna kartica obisk z predstavitvijo in kodo v HTML in CSS.
3D vizitka
Ta karta je vredna 3D animacija s HTML in CSS. Izdelala ga je Elena Nazarova, je kot nalašč za barvno vpadljivo vizitko.
CSS vizitka
Zelo presenetljiva vizitka v CSS vrti v 3D da naredimo prostor za vrsto naslovov URL, ki se odzivajo na kazalec miške v trenutku, ko ga spustimo.
Mreže za kartice
Serija dobro postavljenih kart z privlačen dizajn. Presenetljivo je zaradi poenostavljene estetike, vendar z dobrim zadetkom v kodi HTML, CSS in SCSS.
3D kartice so razkrite
Ta serija mrežnih kartic trenutno razkrijte več informacij da smo miško na ikoni pustili zeleno. Istočasno, ko zapustimo kazalec, se tudi preostali del mreže premakne.
Kartica odzivnega materiala
Z google jezik oblikovanja, se prikaže ta serija kart, ki izstopajo po ikoni menija, ki odpira vse informacije o igralcih, kot v primeru. Lepe in intuitivne animacije z odličnim vizualnim videzom.
Mreža kartice Flexbox
Prototip kartice na isti višini, kot sta izstopajo z uporabo mrežnega formata flexbox. Druga njegova vrednost je uporaba razmerja stranic CSS in filtrov CSS.
Karte Clash of Clans
El priljubljena mobilna igra ima svoje kartice v HTML in CSS, ki jih je ustvaril Andre Madarang. Med njimi lahko prestopimo z natančno in zelo vizualno animacijo.
Diapozitivi za e-trgovino
Z gibčna animacija, te kartice vas spodbujajo, da poiščete njihove elemente in ugotovite, za kaj gre. Z odličnim dizajnom Omarja Dsokyja.
Oblika vmesnika - kartica izdelka
Popolna karta za oblikovanje teh izdelek našega e-poslovanja. Izdelano v HTML in CSS.
Kartica izdelka
Z iste kartice lahko prenese več slik za boljši ogled izdelka. Vključuje gumb za dodajanje v košarico in vsebuje kodo HTML, CSS in JavaScript.
Kartice izdelkov Flexy
Kot že ime pove, uporablja flexbox ustvariti zanimivo animacijo, ko kliknemo na gumb dodaj v košarico.
Flip karte
Majhna koda za nekatere kartice z gladkim in popolna animacija. V nekaj minutah jih lahko vključite. Pred kratkim dodano v codepen.
Kartice kot 3D-kartice izdelkov
Treba je opozoriti, da so te karte kot da imamo na mizi vrsto kart. Kazalec je levi in povečajo ga, kliknejo vsakega in prikažejo hrbtno stran kartice, da prikažejo informacije o izdelku. Ponovno kliknemo in pustimo, kot je bilo spredaj. Kot nalašč za učenje lastnosti 3D CSS.
Kartica Parallax
Zelo vizualni eksperiment z a privlačen učinek flip. Bolje je, da to vidite, da veste, o čem govori.
Učinek lebdenja za kartice
Preprost učinek, ampak muhasto lebdenje o kartah.
Preprost učinek lebdenja
Presenetljiv dokaj preprost učinek, toda to ima velik učinek v trenutku, ko si to vizualiziramo.
Karte globine paralaksa
Te karte nosijo znak koncept paralaksa na vrh oblikovati nekaj zelo presenetljivih kart. Videti ga morate, da boste bolje razumeli učinek, ki ga ima na uporabnika, ko izberete nekatere kategorije v našem blogu.
UI kartica za filme
Izkaznica odlična postavitev narejena z HTML-jem in CSS.
Profilna kartica
Zelo dobre animacije za kontaktno kartico, v kateri lahko uvedemo dostop do profilov na družbenih omrežjih. HTML in CSS.
Kartice v paketu Polaroid
Z lastnostmi, filtri in CSS prehodi po meri Ustvarjene so te serije Polaroid združenih kart; ne zamudite teh slik SVG v spletu.
Katero koli od teh kartic bo mogoče vstaviti na stran z wordpressom
RAD JIH IMAM