27 targetes gratuïtes HTML i CSS per blocs, e-commerce i més

Targetes Hover

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

Card Fun

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

News card

Aquesta targeta, amb Stranger Things com a fons, Destaca per la seva animació suau que revela el contingut. És pur CSS.

Bloc Post Item

Publicació del bloc 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

Targetes 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

Targetes responsive

Destaca per la lleu animació a el deixar el punter del ratolí sobre la imatge de la targeta.

Una altra targeta de bloc

Targeta Bloc Hover

apareix el text de la targeta a l'posar el ratolí en la mateixa.

Targetes de visita

Targeta visita

Una simple però actual targeta de visita amb demo i el codi en HTML i CSS.

Targeta de visita en 3D

Targeta 3D Flip

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

Targeta 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

Targeta Reixeta

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

Targeta 3D

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

Disseny de materials

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

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

Xoc de 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

Targeta Producte

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

producte UI

Una targeta perfecta per dissenyar les de producte del nostre eCommerce. Feta en HTML i CSS.

Targeta de producte

producte eCommerce

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

Targeta 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

Targeta 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

3D Targeta

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

Targeta Parallax

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

Targeta Hover

Un efecte simple però efectista d'hover sobre targetes.

Efecte simple hover

Targeta simple

Cridaner efecte bastant simple, Però que té un gran efecte en el moment que ho visualitzem.

Targetes Parallax de profunditat

Parallax 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

Targeta pel·lícula

Una targeta de gran disseny feta amb HTML i CSS.

Targeta de perfil

Targeta contacte

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

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.


El contingut d'l'article s'adhereix als nostres principis de ètica editorial. Per notificar un error punxa aquí.

2 comentaris, deixa el teu

Deixa el teu comentari

La seva adreça de correu electrònic no es publicarà.

*

*

  1. Responsable de les dades: Miguel Ángel Gatón
  2. Finalitat de les dades: Controlar l'SPAM, gestió de comentaris.
  3. Legitimació: El teu consentiment
  4. Comunicació de les dades: No es comunicaran les dades a tercers excepte per obligació legal.
  5. Emmagatzematge de les dades: Base de dades allotjada en Occentus Networks (UE)
  6. Drets: En qualsevol moment pots limitar, recuperar i esborrar la teva informació.

  1.   cristian va dir

    Sera possible inserir alguna d'estar targetes en una pagina amb wordpress

  2.   Stan va dir

    ELS AMO