Criando um Card Interativo com HTML e CSS
Neste artigo, vamos explorar e detalhar um código HTML e CSS que cria um card interativo com efeito de virada. Esse card pode ser usado para exibir informações sobre produtos, serviços ou qualquer outra coisa que você queira destacar em um site. O código foi projetado para criar um design atraente e envolvente, utilizando efeitos de transformação e animação.
Estrutura HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Card Presents</title>
</head>
<body>
<div class="card">
<div class="image"><img src="img/img.jpg"></div>
<div class="card__content">
<p class="card__title">Título do Card</p>
<p class="card__description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</body>
</html><div class="card">: Esta é a div principal que representa o card em si. Ela envolve todo o conteúdo do card, incluindo a imagem, o título e a descrição. A classe “card” é usada para aplicar estilos específicos a essa div, como tamanho, fundo e efeitos de transição
<div class="image"><img src="img/img.jpg"></div>: Esta div contém a imagem do card. A classe “image” é usada para aplicar estilos específicos a essa div, se necessário. A tag<img>é usada para exibir a imagem, onde o atributo “src” aponta para o local da imagem (“img/img.jpg” neste caso). Essa imagem é exibida na parte superior do card.
<div class="card__content">: Esta div envolve o conteúdo textual do card, incluindo o título e a descrição. A classe “card__content” é usada para aplicar estilos específicos a essa div, como posicionamento, cor de fundo e efeitos de animação.
<p class="card__title">Título do Card</p>: Esta é uma tag de parágrafo que exibe o título do card. A classe “card__title” é usada para aplicar estilos específicos ao título. O texto “Título do Card” é apenas um exemplo e pode ser substituído pelo título real do seu card.
<p class="card__description">Lorem Ipsum... specimen book.</p>: Outra tag de parágrafo que exibe a descrição do card. A classe “card__description” é usada para aplicar estilos específicos à descrição. O texto de exemplo “Lorem Ipsum…” pode ser substituído pelo seu próprio texto descritivo.
Estilização CSS
O CSS desempenha um papel crucial na criação do visual atraente e interativo do card. Vamos analisar cada parte do código CSS em detalhes:
Reset de Estilos Globais
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}Essa parte define uma reinicialização de estilos globais para garantir consistência e evitar comportamentos indesejados.
Estilos da Página
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(37, 36, 36);
}
Esses estilos definem a exibição do corpo da página, centralizando seu conteúdo verticalmente e aplicando um fundo escuro.
Estilos da Imagem
img{
width: 100%;
}Aqui, a largura da imagem é definida como 100% para garantir que ela se ajuste ao espaço disponível no card.
Estilos do Card
.card {
cursor: pointer;
position: relative;
width: 300px;
height: 200px;
background-color: #1c0501;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
perspective: 1000px;
box-shadow: 0 0 0 5px #110300;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}Nesta seção, o estilo do card é definido. O card tem um tamanho fixo, um fundo escuro, um sombreamento e um efeito de transição ao ser ampliado ao passar o mouse sobre ele.
Estilos da Imagem do Card
.card .image {
width: 100%;
fill: #333;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}Aqui, a imagem dentro do card é estilizada para ocupar 100% da largura disponível. A propriedade fill define a cor de preenchimento da imagem.
Efeito de Hover no Card
.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px #f16331;
}Quando o mouse está sobre o card, ele é ampliado e recebe um sombreamento mais intenso, proporcionando uma sensação de interatividade.
Estilos do Conteúdo do Card
.card__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
background-color: #250801;
transform: rotateX(-90deg);
transform-origin: bottom;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}Aqui, o estilo para o conteúdo do card é definido. Ele é posicionado absolutamente em relação ao card, tem um fundo escuro, efeitos de rotação e transição que permitem a animação da virada do card ao passar o mouse sobre ele.
Efeito de Hover no Conteúdo do Card
.card:hover .card__content {
transform: rotateX(0deg);
}Quando o mouse está sobre o card, o conteúdo é girado para a posição frontal, criando o efeito de virada.
Estilos do Título do Card
.card__title {
margin: 0;
font-size: 24px;
color: #f16331;
font-weight: 700;
font-family: sans-serif;
}Aqui, o título do card é estilizado com tamanho de fonte, cor e peso definidos. A fonte é definida como “sans-serif”.
Efeito de Hover na Imagem do Card
.card:hover .image {
scale: 0;
}Quando o mouse está sobre o card, a imagem é escalada para 0, proporcionando uma transição suave de visualização.
Estilos da Descrição do Card
.card__description {
margin: 10px 0 0;
font-size: 14px;
color: #ffffff;
line-height: 1.4;
}A descrição do card é estilizada com margem superior, tamanho de fonte, cor do texto e altura de linha definidos.
Conclusão
Neste artigo, exploramos um código HTML e CSS que cria um card interativo com efeito de virada. Cada parte do código foi detalhada para fornecer uma compreensão completa de como o card é construído e estilizado. Você pode usar esse código como ponto de partida para criar cards atraentes e interativos em seus projetos web. Lembre-se de personalizar as imagens, cores e conteúdo de acordo com suas necessidades específicas. Com esse conhecimento, você estará pronto para criar elementos visuais envolventes em suas páginas da web.
