Pular para o conteúdo

Programando Soluções

Como fazer card com HTML + CSS

  • por
card

Introdução

O card é um elemento que pode ser criado com HTML e CSS e pode ter diversos casos de uso.

Podem ser utilizados em dashboards, para exibir dados informativos, em e-commerce também tem um uso bem comum, que são os cards para expor os dados de um produto e entre outros diversos locais que quiser utilizar.

Este recurso é comum, os principais frameworks CSS já trazem um estilo padrão para elementos desse tipo, porque sabem que são amplamente utilizados.

Veja neste artigo como criar estes cards com HTML e CSS

Começo do projeto

Primeiramente, crie um arquivo index.html, outro chamado styles.css.

Crie uma estrutura padrão de HTML5 e faça a linkagem do arquivo CSS com o HTML.

Após a importação do arquivo de estilos, vamos fazer a importação da fonte que será utilizada, para este caso será a fonte Poppins.

Para obter essa fonte utilizei o Google Fonts e pesquisei por Poppins, depois de selecionar a fonte desejada, ele já da o CSS de importação, com isso o código até aqui fica assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Card HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap"
      rel="stylesheet"
    />
  </head>
</html>

Elementos HTML

Dentro do body ficarão os elementos, crie uma div com a class row, ela vai ser utilizada para englobar todos os elementos.

A próxima etapa é colocar os cards, para cada um, terá dentro dele 3 elementos, um título, um parágrafo e uma imagem.

Para obter as imagens, utilizei o site flaticon, nele tem diversos ícones e imagens que você pode utilizar nos seus projetos.

O código dentro do body:

<body>
    <div class="row">
      <div class="card green">
        <h2>Monetização</h2>
        <p>Configure a monetização</p>
        <img class="image" src="money.png" alt="money" />
      </div>

      <div class="card blue">
        <h2>Configurações</h2>
        <p>Configure o seu sistema</p>
        <img class="image" src="settings.png" alt="settings" />
      </div>

      <div class="card red">
        <h2>Artigos</h2>
        <p>Crie e edite artigos</p>
        <img class="image" src="article.png" alt="article" />
      </div>
    </div>
  </body>

Os textos e imagens são apenas ilustrativos, você pode colocar qual preferir.

Estilos

Para o estilo, a primeira etapa é utilizar a fonte do projeto e também centralizar todos os elementos da div row.

body {
  font-family: "Poppins", sans-serif;
  background-color: #fafafa;
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
}

No font-family, caso por algum motivo, não encontre a fonte Poppins, irá utilizar qualquer fonte sans-serif

Para centralizar os elementos da row, utilizei flexbox, o align-items: center, centraliza na vertical e o justify-content: center, centraliza na horizontal.

O próximo estilo a ser aplicado é o controle principal do card:

.card {
  border-radius: 5px;
  box-shadow: 7px 7px 13px 0px rgba(50, 50, 50, 0.22);
  padding: 30px;
  margin: 20px;
  width: 400px;
  transition: all 0.3s ease-out;
}

O border-radius deixa a borda levemente arredondada.

O box-shadow serve para dar o sombreamento ao elemento, para fazer o efeito demonstrado na imagem, utilizei o site CSS3gen, nele é possível você personalizar o sombreamento e ele já te da o código CSS.

Os outros estilos controlam o tamanho do elemento.

Depois disso, ao passar o mouse por cima coloquei um pequeno efeito e também para o cursor virar a mãozinha, para ser clicável.

Também defini uma cor mais leve para o parágrafo e diminui o tamanho das imagens para encaixar melhor na tela.

.card:hover {
  transform: translateY(-5px);
  cursor: pointer;
}

.card p {
  color: #a3a5ae;
  font-size: 16px;
}

.image {
  float: right;
  max-width: 64px;
  max-height: 64px;
}

E por fim, defini as cores da borda esquerda para deixar um efeito bem legal.

.blue {
  border-left: 3px solid #4895ff;
}

.green {
  border-left: 3px solid #3bb54a;
}

.red {
  border-left: 3px solid #b3404a;
}

Com isso os cards já estarão prontos.

Este código pode ser reutilizado e adaptado para a ocasião que desejar, é um código simples e pode ser implementado facilmente em qualquer projeto.

Recomendo que tente implementar e alterar algumas coisas para adaptar ele ao que precisar.

Vídeo

Código fonte

O código fonte está no meu CodeSandbox, neste link.

Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.

Aprenda a testar Aplicações Javascript

Referências

https://getbootstrap.com.br/docs/4.1/components/card/

https://www.flaticon.com/br/

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok