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/