Primeira página > Programação > Construindo cartões responsivos e de altura igual com CSS moderno (Magic of Flexbox e No Media Queries)
Navegar:369
Introdução
Qual é o nosso objetivo?
Construindo a estrutura usando HTML5 semântico
Adicionando o estilo usando CSS moderno
- Redefinindo CSS
- Projetando layout de cartão com Flexbox
- Estilizando a imagem do cartão
- Estilizando o conteúdo do cartão
- Estilizando o botão do cartão
- Adicionando transições flutuantes
- Usando variáveis CSS
Conclusão
Como desenvolvedores web, frequentemente encontramos a necessidade de criar componentes de cartão. seja para uma vitrine de produto/projeto, perfil de usuário ou postagem de blog, os cartões estão por toda parte.
No passado, criar layouts responsivos era um desafio. A criação desses designs tornou-se significativamente mais simples e intuitiva devido ao advento das técnicas modernas de CSS, especificamente CSS Flexbox.
Flexbox simplifica o processo de criação de layouts responsivos. Podemos facilmente organizar, alinhar e espaçar itens em um contêiner sem usar consultas de mídia complexas. Isso significa que podemos construir layouts que se adaptam perfeitamente a diferentes tamanhos e orientações de tela sem especificar pontos de interrupção exatos.
O objetivo é criar cartões responsivos de alturas iguais sem depender de pontos de interrupção usando CSS Flexbox. Garantiremos que cada cartão mantenha a mesma altura, independentemente do comprimento do conteúdo, adaptando-se perfeitamente a diferentes tamanhos de tela.
principais propriedades CSS do layout:
Agora vamos explorar a magia do flexbox CSS construindo os cartões!
Title one
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
Title two
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.
Title three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!
/* Basic CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Ensure that our layout is centred horizontally and vertically on the page */
body {
display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-x: hidden; /* Prevent horizontal scrolling */
}
/* Cards */
.card-container {
display: flex; /* using CSS flexbox to display each card at the centre */
justify-content: center;
align-items: stretch; /* use stretch for equal height of all cards */
gap: 1.5625rem; /* add space between each card */
flex-wrap: wrap;
padding: 1rem;
max-width: 100%; /* Prevent container from exceeding viewport width */
}
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: #fff;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
text-align: center;
text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
overflow: hidden;
}
.card-image {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 0.85rem;
}
.card-title {
font-size: 1.25rem;
padding: 1rem;
color: #3ca69f;
}
.card-description {
flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
padding: 0 1rem 1rem;
font-size: 0.975rem;
line-height: 1.5;
}
/* Cards button */
.card-button {
align-self: center; /* placing the button at the center */
margin: 1rem 0 3rem;
padding: 0.625rem 1rem;
font-size: 1rem;
color: #ffffff;
background-color: #3ca69f;
border: none;
border-radius: 0.3125rem;
cursor: pointer;
}
.card {
transition: 0.5s ease all;
}
.card-button {
transition: 0.5s ease all;
}
/* cards hover effect */
.card:hover {
background-color: #276662;
color: #ffffff;
}
.card:hover > .card-button {
background-color: #ffffff;
color: #276662;
font-weight: 700;
}
.card:hover > .card-title {
color: #ffffff;
}
/* Declare variables */
:root {
--primary-color: #3ca69f;
--secondary-color: #276662;
--text-color: #ffffff;
--shadow-color: rgba(0, 0, 0, 0.4);
--border-radius: 0.3125rem;
--spacing: 1rem;
--transition-duration: 0.5s;
}
SEJA O MELHOR
Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.
Copyright© 2022 湘ICP备2022001581号-3