Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

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

Tarjetas Hover
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

Card Fun
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

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

Blog Post Item

Blog postUn 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

Tarjetas 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

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

Otra tarjeta de blog

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

Tarjetas de visita

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

Tarjeta de visita en 3D

Tarjeta 3D Flip
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

Tarjeta 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

Tarjeta Rejilla
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

Tarjeta 3D
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

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

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

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

Tarjeta Producto
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

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

Tarjeta de producto

Producto eCommerce
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

Tarjeta 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

Tarjeta 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

3D Tarjeta
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

Tarjeta Parallax
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

Tarjeta Hover
Un efecto simple pero efectista de hover sobre tarjetas.

Efecto simple hover

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

Tarjetas Parallax de profundidad

Parallax 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

Tarjeta película
Una tarjeta de gran diseño hecha con HTML y CSS.

Tarjeta de perfil

Tarjeta contacto
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

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.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas