27 tarxetas HTML e CSS gratuítas para blogs, comercio electrónico e moito máis

Tarxetas de Pase

Os recursos en liña son case infinitos, pero atopalos de calidade é realmente o difícilA pesar de buscar un pouco e ter unha boa lista de sitios web dedicados ao deseño, as cousas fanse máis fáciles. Nun momento no que idiomas como HTML e CSS están en bo estado, a case uns clics achégase a recursos gratuítos e de alta calidade.

Imos enumerar unha serie de tarxetas gratuítas en HTML e CSS que son perfectamente axeitados para todo tipo de blogs, negocios, comercio electrónico e moito máis. Unha colección de longo alcance para que poida incorporarse a algúns dos traballos que está a facer para todo tipo de clientes. Fagámolo con esta lista que usa codepen.io para que poida obter o código en HTML e CSS.

Tarxeta de blog divertido # 1

Card Fun

un gran tarxeta de deseño que di case todo a imaxe que a representa, podes ir a codepen.io para obter o código correspondente e instalalo no teu sitio web.

Tarxetas de novas CSS só CSS

Tarxeta de novas

Esta tarxeta, con Stranger Things como fondo, destaca pola súa animación suave que revela o contido. É CSS puro.

Artigo de publicación do blog

Publicación do blogue Unha vista previa da web poñendo o punteiro do rato sobre ela. Ten CSS e HTML para unha fácil incorporación.

Tarxetas de blogue

Tarxetas de blogue

Un deseño de tarxetas de blog responsivo minimalista Animacións rápidas e suaves de alta calidade que non deixan indiferente a ninguén.

Tarxetas de visita sensibles

Tarxetas de resposta

Destaca por a lixeira animación pasando o punteiro do rato sobre a imaxe da tarxeta.

Outra tarxeta de blogue

Tarxeta de Pase do Blog

Aparece o texto da tarxeta ao pasar o rato no mesmo.

Tarxetas de visita

Tarxeta de visita

un tarxeta sinxela pero actual visita con demostración e código en HTML e CSS.

Tarxeta de visita 3D

Tarxeta 3D Flip

Esta tarxeta vale unha animación 3D con HTML e CSS. Feito por Elena Nazarova, é perfecto para unha tarxeta de visita que chame a cor.

Tarxeta de visita CSS

Tarxeta de visita CSS

Unha tarxeta de visita moi sorprendente en CSS xira en 3D para deixar paso a unha serie de enderezos URL que responden ao punteiro do rato no momento en que o poñemos.

Reixas de tarxetas

Tarxeta de reixa

Unha serie de cartas ben colocadas con un deseño atractivo. Sorprende pola súa estética simplista, pero con bo éxito no código HTML, CSS e SCSS.

Revélanse as tarxetas 3D

Tarxeta 3D

Esta serie de cuadrículas de tarxetas revela máis información neste momento que deixamos o rato na icona en verde. Ao mesmo tempo que deixamos o punteiro, o resto da grade móvese en consecuencia.

Tarxeta de deseño de material sensible

material deseño

Co linguaxe de deseño de google, aparecen esta serie de cartas que destacan pola icona do menú que abre toda a información dos actores como no caso de exemplo. Animacións fermosas e intuitivas con gran aspecto visual.

Reixa da tarxeta Flexbox

Flexbox

Prototipo de tarxeta á mesma altura que destacan por empregar o formato grid flexbox. Outro dos seus valores é o uso de relacións de aspecto CSS e filtros CSS.

Cartas Clash of Clans

Choque de clans

El popular xogo móbil ten as súas tarxetas en HTML e CSS creadas por Andre Madarang. Podemos pasar entre eles cunha animación precisa e altamente visual.

Tarxetas de diapositivas para comercio electrónico

Tarxeta de produto

Cun animación áxil, estas tarxetas animan a buscar os seus elementos para saber de que se trata. Cun gran deseño de Omar Dsoky.

Deseño de interface - Tarxeta de produto

IU do produto

Unha tarxeta perfecta para deseñar as de produto do noso comercio electrónico. Feito en HTML e CSS.

Tarxeta de produto

Produto de comercio electrónico

Dende a mesma tarxeta que podemos percorre varias imaxes para ver mellor o produto. Inclúe o botón engadir ao carro e contén código HTML, CSS e JavaScript.

Tarxetas de Produto Flexy

Tarxeta Flexy

Como o seu nome indica, usa flexbox para crear unha animación interesante cando prememos no botón engadir ao carro.

Tirar cartas

Flipar tarxeta

Pouco código para algunhas tarxetas cun animación perfecta. En cuestión de minutos podes incorporalos. Engadiuse recentemente a codepen.

Tarxetas como tarxetas de produto 3D

Tarxeta 3D

Nótese que estas tarxetas son coma se tivésemos unha serie de cartas sobre unha mesa. O punteiro queda á esquerda e amplían, fan clic en cada un e mostran a parte traseira da tarxeta para amosar a información do produto. Volvemos a facer clic e deixámolo como estaba coa parte dianteira. Perfecto para aprender propiedades CSS en 3D.

Tarxeta Parallax

Tarxeta Parallax

Un experimento moi visual con chamativo efecto flip. É mellor que o vexas para saber de que se fala.

Efecto de desprazamento para as cartas

Tarxeta de desprazamento

Un efecto sinxelo pero gimmicky hover sobre as tarxetas.

Efecto simple de desprazamento

Tarxeta sinxela

Efecto bastante sorprendente, pero iso ten un gran efecto no momento en que o visualizamos.

Tarxetas Parallax Profundidade

Profundidade de paralaxe

Estas tarxetas levan o concepto de paralaxe á parte superior para formar unhas tarxetas moi rechamantes por deseño. Só tes que velo para comprender mellor o efecto que produce no usuario ao seleccionar algunhas das categorías do noso blog.

Tarxeta de interface de usuario para películas

Tarxeta de película

Unha tarxeta de excelente deseño feito con HTML e CSS.

Tarxeta de perfil

Tarxeta de contacto

Moi boas animacións para unha tarxeta de contacto na que podemos implementar o acceso aos perfís das redes sociais. HTML e CSS.

Tarxetas de paquete Polaroid

Polaroid

Con propiedades, filtros e Transicións personalizadas CSS Créanse esta serie de cartas agrupadas Polaroid; non perdas estas imaxes web SVG.


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

Un comentario, deixa o teu

Deixa o teu comentario

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados con *

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.

  1.   Cristian dixo

    Será posible inserir calquera destas tarxetas nunha páxina con wordpress