Como fazer card com HTML e CSS responsivo

Indicação
Como fazer card com HTML e CSS responsivo

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>

				
			
imagem do card 1 html e css

Card 1

Descrição do card 1.

imagem do card 2 html e css

Card 2

Descrição do card 2.

imagem do card 3 html e css

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.

Imagem do Card

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?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação 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

2 respostas

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.