27 tarjetas gratuitas HTML y CSS para blogs, e-commerce y más

Los recursos online son casi infinitos, pero encontrarlos de calidad es realmente lo difícil, aunque buscando un poco y teniendo una buena lista de webs dedicadas al diseño, la cosa se convierte en más fácil. En un momento en el que lenguajes como HTML y CSS se encuentran en un gran momento, acercarnos a recursos gratuitos de gran calidad está casi a unos cuantos clics.

Vamos a listar una serie de tarjetas gratuitas en HTML y CSS que sirven perfectamente para todo tipo de blog, negocios, e-commerce y mucho más. Una colección de gran recorrido para que se pueda incorporar en algunos de los trabajos que estéis haciendo para todo tipo de clientes. Vamos a ello con esta lista que recurre en codepen.io para que podáis obtener el código tanto en HTML como en CSS.

Blog Card fun #1

Una tarjeta de gran diseño que lo dice casi todo la imagen que la representa, podéis pasaros por codepen.io para obtener el código correspondiente e instaurarla en vuestra web.

CSS News Cards solo CSS

Esta tarjeta, con Stranger Things como fondo, destaca por su animación suave que revela el contenido. Es puro CSS.

Blog Post Item

Un previo de la web al llevar el puntero del ratón sobre el mismo. Cuenta con CSS y HTML para una fácil incorporación.

Tarjetas de blog

Un diseño minimalista responsive de tarjetas para blog. Animaciones rápidas y suaves de mucha calidad que no dejan indiferente a nadie.

Tarjetas de empresa responsive

Destaca por la leve animación al dejar el puntero del ratón sobre la imagen de la tarjeta.

Otra tarjeta de blog

Aparece el texto de la tarjeta al posar el ratón en la misma.

Tarjetas de visita

Una simple pero actual tarjeta de visita con demo y el código en HTML y CSS.

Tarjeta de visita en 3D

Esta tarjeta se vale de una animación en 3D con HTML y CSS. Hecha por Elena Nazarova es una perfecta para una tarjeta de visita llamativa por el color.

Tarjeta de visita CSS

Una muy llamativa tarjeta de visita en CSS que se gira en 3D para dejar paso a una serie de direcciones URL que responden al puntero del ratón en el momento que lo posamos.

Rejillas de tarjetas

Una serie de tarjetas bien colocadas y con un diseño llamativo. Sorprende por su estética simplista, pero con un buen acierto en el código HTML, CSS y SCSS.

Tarjetas en 3D que se revelan

Esta serie de rejillas de tarjeta revelan más información en el momento que dejamos el ratón sobre el icono en verde. Al mismo tiempo que dejamos el puntero, el resto del grid se mueve consecuentemente.

Tarjeta Responsive Material Design

Con el lenguaje de diseño de Google, aparecen esta serie de tarjetas que destacan por el icono menú que abre toda la información de los actores como en el caso ejemplo. Bellas animaciones e intuitivas de gran aspecto visual.

Grid de tarjetas Flexbox

Prototype de tarjetas a la misma altura que destacan por usar el formato grid flexbox. Otro de sus valores es el uso de ratios de aspecto CSS y los filtros CSS.

Tarjetas Clash of Clans

El popular juego para móviles tiene sus tarjetas en HTML y CSS creadas por Andre Madarang. Podemos pasar entre ellas con una animación precisa y muy visual.

Tarjetas slide para eCommerce

Con una animación ágil, estas tarjetas animan a buscar por sus elementos para averiguar de qué se tratan. Con gran diseño desde Omar Dsoky.

Diseño de Interfaz – Tarjeta de producto

Una tarjeta perfecta para diseñar las de producto de nuestro eCommerce. Hecha en HTML y CSS.

Tarjeta de producto

Desde la misma tarjeta podemos pasar ante varias imágenes para ver mejor el producto. Incluye el botón añadir a carrito y contiene código HTML, CSS y JavaScript.

Tarjetas de producto Flexy

Como su propio nombre indica, se vale de flexbox para crear una interesante animación cuando pulsamos sobre el botón añadir a carrito.

Tarjetas flip

Poco código para unas tarjetas con una suave y perfecta animación. En cuestión de minutos podréis incorporarlas. Recientemente añadidas a codepen.

Tarjetas como cartas 3D de producto

Cabe destacar que estas tarjetas son como si tuviéramos sobre una mesa una serie de cartas. Se deja posado el puntero y se amplían, se hace clic sobre cada una, y muestra la parte trasera de la tarjeta para enseñar la información del producto. Volvemos a hacer clic y la dejamos como estaba con el frontal. Perfecto para aprender las propiedades 3D CSS.

Parallax Card

Un experimento muy visual con un efecto flip de gran vistosidad. Es mejor que lo veáis para saber de qué se está hablando.

Efecto hover para tarjetas

Un efecto simple pero efectista de hover sobre tarjetas.

Efecto simple hover

Llamativo efecto bastante simple, pero que tiene un gran efecto en el momento que lo visualizamos.

Tarjetas Parallax de profundidad

Estas tarjetas llevan el concepto parallax a todo lo alto para conformar unas tarjetas muy llamativas por el diseño. Simplemente hay que verlo para poder entender mejor el efecto que produce en el usuario cuando seleccione algunas de las categorías en nuestro blog.

Tarjeta UI para películas

Una tarjeta de gran diseño hecha con HTML y CSS.

Tarjeta de perfil

Muy buenas animaciones para una tarjeta de contacto en la que podemos implementar los accesos a los perfiles de redes sociales. HTML y CSS.

Tarjetas agrupadas Polaroid

Con propiedades, filtros y transiciones personalizadas CSS se crean esta serie de tarjetas agrupadas Polaroid; no faltes a estas web de imágenes SVG.


Categorías

CSS, HTML

Ilustrador con estudios formados en ESDIP con la diplomatura de tres años de General de Dibujos, Animados y Animación. Apasionado de la ilustración con un propio estilo. Podéis seguirme desde Behance: www.behance.net/Ramirez_M

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.