Este é o décimo quarto post da nossa série de tutoriais que vai te ajudar a criar sua primeira página web de forma profissional com HTML e CSS. Portanto, neste artigo vamos te ensinar como fazer card com HTML e CSS de forma responsiva.
Mas é claro, também temos um conteúdo em nosso site que explica o que é HTML e CSS e como essas tecnologias são utilizadas no desenvolvimento web. Então, confira os seguintes artigos:
Conteúdo
Introdução a como fazer card com HTML e CSS
Fazer um card com HTML e CSS é uma maneira eficiente de apresentar informações de forma visualmente atraente em uma página web. Pois, um card é um elemento retangular que contém informações sobre um determinado tópico, produto ou serviço.
No entanto, para criá-lo, é necessário ter conhecimentos básicos de HTML e CSS. O HTML é usado para criar a estrutura do card, enquanto o CSS é responsável por definir a aparência visual do elemento.
É possível personalizar o card com cores, fontes, imagens e outros elementos para torná-lo mais atraente para o usuário. Saiba que com o uso adequado de HTML e CSS, é possível criar um card impressionante que chamará a atenção do usuário e destacará o conteúdo da página.
Elementos e tags usadas para fazer card com HTML e CSS
Então, para fazer um card com HTML e CSS, é necessário utilizar algumas tags e elementos específicos. A estrutura básica de um card pode ser criada usando a tag <div> do HTML. Dentro dessa tag, é possível incluir outras tags, como <h1> para o título, <p> para o texto e <img> para uma imagem.
Depois de criar a estrutura seguimos para definir o estilo visual do card, é necessário utilizar o CSS. Também, é possível utilizar propriedades como background-color, border-radius e box-shadow para personalizar a aparência do card. Além disso, é possível utilizar classes e IDs para aplicar estilos específicos a cada card.
Com essas tags, é possível criar cards impressionantes e informativos para a sua página web. Vejá o exemplo a seguir:
<div class="card">
<img decoding="async" src="https://via.placeholder.com/150" alt="Imagem de exemplo">
<h2>Título do card</h2>
<p>Descrição do card.</p>
<button>Saiba mais</button>
</div>
Neste exemplo, temos um card simples com uma imagem, título, descrição e um botão “Saiba mais”.
Aplicando estilos no card com HTML e CSS
Para tornar o card mais atraente visualmente, é importante aplicar estilos com o CSS. Uma das maneiras mais comuns de fazer isso é utilizar a propriedade background-color para definir uma cor de fundo para o card.
Além disso, a propriedade border-radius pode ser usada para arredondar os cantos do card e a propriedade box-shadow para adicionar uma sombra ao redor do elemento.
É possível utilizar a propriedade font-family para escolher uma fonte que combine com o conteúdo do card e a propriedade font-size para definir o tamanho do texto.
També é importante, utilizando classes e IDs, com isso, é possível aplicar estilos específicos a cada card e criar uma aparência personalizada para sua página web.
Para fazer um card responsivo, é possível utilizar a propriedade CSS media queries, que permite definir estilos diferentes com base no tamanho da tela do dispositivo.
.card {
background-color: #f2f2f2;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 20px;
width: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.card h2 {
font-family: helvetica;
font-size: 24px;
margin-bottom: 10px;
}
.card p {
font-family: helvetica;
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
.card img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.card button{
border: none;
border-radius: 5px;
padding: 10px 20px;
background-color: blue;
color: white;
}
Aqui, o CSS foi utilizado para aplicar estilos ao card, incluindo cores, fontes, tamanhos e posicionamento dos elementos. Claro que é possível personalizar ainda mais o card e adicionar mais elementos conforme necessário.
Demostração e código final – HTML e CSS responsivo
Estes são apenas alguns exemplos básicos de como fazer card com HTML e CSS de forma responsiva.
Exemplo 1: Card com Ícone e Efeito Hover
Este card possui um estilo mais minimalista e interativo. Pois, ele inclui um ícone, que serve como uma representação visual do conteúdo ou categoria associada. E, quando o cursor do mouse passa sobre o card, um efeito de hover é ativado.
<style>
/* Estilos comuns para os cards */
.secao4 {
margin: 0;
font-family: Helvetica, sans-serif;
}
.secao4-div {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
text-align: center;
}
.secao4-div-card {
display: flex;
flex-direction: column;
align-items: center;
width: calc(100% / 3 - 60px);
margin: 10px;
padding: 20px;
box-shadow: 2px 2px 16px 0px rgba(0, 0, 0, 0.1);
border-radius: 15px;
background-color: white;
transition: all 0.5s ease;
}
.secao4-div-card:hover {
transform: scale(1.1);
z-index: 1;
}
.secao4-div-card img {
width: 35%;
height: auto;
}
.secao4-div-card h3 {
margin-bottom: 0px;
}
/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
.secao4-div-card {
width: 100%;
}
}
</style>
<!-- Seção com cards -->
<section class="secao4" id="sobre">
<div class="secao4-div">
<!-- Card 1 -->
<div class="secao4-div-card">
<img decoding="async" src="/pagina-html-css/missao.png" alt="imagem do card 1 html e css">
<h3>Card 1</h3>
<p>Descrição do card 1.</p>
</div>
<!-- Card 2 -->
<div class="secao4-div-card">
<img decoding="async" src="/pagina-html-css/analise.png" alt="imagem do card 2 html e css">
<h3>Card 2</h3>
<p>Descrição do card 2.</p>
</div>
<!-- Card 3 -->
<div class="secao4-div-card">
<img decoding="async" src="/pagina-html-css/valor.png" alt="imagem do card 3 html e css">
<h3>Card 3</h3>
<p>Descrição do card 3.</p>
</div>
</div>
</section>
Card 1
Descrição do card 1.
Card 2
Descrição do card 2.
Card 3
Descrição do card 3.
Ambos a seguir seguem a mesma estrutura já bordada nesse post. Mas, lembre-se que as possibilidades são muitas e a aparência de cada card pode ser personalizada conforme as necessidades do seu projeto.
Exemplo 2: Card com Imagem, Título e Descrição
Esse card é projetado para fornecer informações detalhadas de maneira clara e concisa. Esse estilo de card é ideal para apresentar produtos, serviços ou artigos, pois oferece uma visão rápida e informativa do que está sendo oferecido.
Exemplo 3: Card com Degrade e Imagem de Fundo
Este card apresenta um design elegante e moderno. A sua base é composta por um gradiente suave que vai de uma cor mais clara no topo para uma cor mais escura na parte inferior, criando um efeito de degradê que atrai a atenção do espectador.
Card simples
Este é um exemplo de card simples criado com HTML e CSS.
Card com degradê
Este é um exemplo de card com imagem de fundo e degradê para o texto.
Conclusão – Como fazer card com HTML e CSS responsivo
Em suma, ao criar um card, é importante considerar a responsividade do elemento. Isso significa que o card deve ser exibido de forma apropriada em diferentes tamanhos de tela, incluindo dispositivos móveis.
Dessa forma, o card pode ser adaptado para ser exibido de forma adequada em qualquer dispositivo, garantindo uma experiência de usuário positiva.
Com essas dicas, é possível criar cards impressionantes e profissionais usando HTML e CSS.
Você também pode aprimorar mais suas páginas com imagens no guia:
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
Respostas de 2
Tenho dificuldades em usar o display:flex.
Ágler temos uma breve explicação sobre flexbox nesse post sobre flexbox e css grid. Mas também recomendo para um estudo mais profundo esse artigo sobre flexbox de outro site.