Els recursos en línia són gairebé infinits, però trobar-los de qualitat és realment el difícil, Encara que buscant una mica i tenim una bona llista de webs dedicades a el disseny, la cosa esdevé més fàcil. En un moment en què llenguatges com HTML i CSS es troben en un gran moment, acostar-nos a recursos gratuïts de gran qualitat està gairebé a uns quants clics.
Anem a llistar una sèrie de targetes gratuïtes en HTML i CSS que serveixen perfectament per a tot tipus de bloc, negocis, comerç electrònic i molt més. Una col·lecció de gran recorregut perquè es pugui incorporar en alguns dels treballs que estigueu fent per a tot tipus de clients. Anem a això amb aquesta llista que recorre en codepen.io perquè pugueu obtenir el codi tant en HTML com en CSS.
Bloc Card fun # 1
Una targeta de gran disseny que ho diu gairebé tot la imatge que la representa, podeu passar-vos per codepen.io per obtenir el codi corresponent i instaurar-a la vostra web.
CSS News Cards només CSS
Aquesta targeta, amb Stranger Things com a fons, Destaca per la seva animació suau que revela el contingut. És pur CSS.
Bloc Post Item
Un previ del web a l'portar el punter de l'ratolí sobre el mateix. Compta amb CSS i HTML per a una fàcil incorporació.
Targetes de bloc
Un disseny minimalista responsive de targetes per bloc. Animacions ràpides i suaus de molta qualitat que no deixen indiferent a ningú.
Targetes d'empresa responsive
Destaca per la lleu animació a el deixar el punter del ratolí sobre la imatge de la targeta.
Una altra targeta de bloc
apareix el text de la targeta a l'posar el ratolí en la mateixa.
Targetes de visita
Una simple però actual targeta de visita amb demo i el codi en HTML i CSS.
Targeta de visita en 3D
Aquesta targeta es val de una animació en 3D amb HTML i CSS. Feta per Elena Nazarova és una perfecta per a una targeta de visita cridanera pel color.
Targeta de visita CSS
Una molt cridanera targeta de visita a CSS que es gira en 3D per deixar pas a una sèrie d'adreces URL que responen a el punter de l'ratolí en el moment que ho hi puguem.
Reixetes de targetes
Una sèrie de targetes ben col·locades i amb un disseny cridaner. Sorprèn per la seva estètica simplista, però amb un bon encert en el codi HTML, CSS i SCSS.
Targetes en 3D que es revelen
Aquesta sèrie de reixetes de targeta revelen més informació en el moment que vam deixar el ratolí sobre la icona en verd. A el mateix temps que vam deixar el punter, la resta de la graella es mou en conseqüència.
Targeta Responsive Material Design
Amb el llenguatge de disseny de Google, Apareixen aquesta sèrie de targetes que destaquen per la icona menú que obre tota la informació dels actors com en el cas exemple. Belles animacions i intuïtives de gran aspecte visual.
Grid de targetes Flexbox
Prototype de targetes a la mateixa altura que destaquen per usar el format grid flexbox. Un altre dels seus valors és l'ús de ràtios d'aspecte CSS i els filtres CSS.
Targetes Clash of Clans
El popular joc per a mòbils té les seves targetes en HTML i CSS creades per Andre Madarang. Podem passar entre elles amb una animació precisa i molt visual.
Targetes slide per eCommerce
Amb una animació àgil, Aquestes targetes animen a buscar per les seves elements per esbrinar de què es tracten. Amb gran disseny des Omar Dsoky.
Disseny d'Interfície - Targeta de producte
Una targeta perfecta per dissenyar les de producte del nostre eCommerce. Feta en HTML i CSS.
Targeta de producte
Des de la mateixa targeta podem passar davant diverses imatges per veure millor el producte. Inclou el botó afegir a cistella i conté codi HTML, CSS i JavaScript.
Targetes de producte Flexy
Com el seu propi nom indica, es val de flexbox per crear una interessant animació quan premem sobre el botó afegir a la cistella.
Targetes flip
Poc codi per unes targetes amb una suau i perfecta animació. En qüestió de minuts podreu incorporar-les. Recentment afegides a codepen.
Targetes com cartes 3D de producte
Cal destacar que aquestes targetes són com si tinguéssim sobre una taula un seguit de cartes. Es deixa posat el punter i s'amplien, es fa clic sobre cadascuna, i mostra la part posterior de la targeta per ensenyar la informació del producte. Tornem a fer clic i la deixem com estava amb el frontal. Perfecte per aprendre les propietats 3D CSS.
Parallax Card
Un experiment molt visual amb un efecte flip de gran vistositat. És millor que ho vegeu per saber de què s'està parlant.
Efecte hover per a targetes
Un efecte simple però efectista d'hover sobre targetes.
Efecte simple hover
Cridaner efecte bastant simple, Però que té un gran efecte en el moment que ho visualitzem.
Targetes Parallax de profunditat
Aquestes targetes porten el concepte parallax a magnificència per conformar unes targetes molt cridaneres pel disseny. Simplement cal veure-ho per poder entendre millor l'efecte que produeix en l'usuari quan seleccioni algunes de les categories en el nostre bloc.
Targeta UI per a pel·lícules
Una targeta de gran disseny feta amb HTML i CSS.
Targeta de perfil
Molt bones animacions per a una targeta de contacte en la qual podem implementar els accessos als perfils de xarxes socials. HTML i CSS.
Targetes agrupades Polaroid
Amb propietats, filtres i transicions personalitzades CSS es creen aquesta sèrie de targetes agrupades Polaroid; no faltis a aquestes web d'imatges SVG.
Sera possible inserir alguna d'estar targetes en una pagina amb wordpress
ELS AMO