Page de garde > La programmation > Création de cartes réactives de même hauteur avec CSS moderne (Magie de Flexbox et sans requêtes multimédias)
Parcourir:100
Introduction
Quel est notre objectif ?
Construire la structure à l'aide du HTML5 sémantique
Ajout du style à l'aide du CSS moderne
- Réinitialisation du CSS
- Conception de la mise en page des cartes avec Flexbox
- Styliser l'image de la carte
- Styliser le contenu de la carte
- Styliser le bouton de la carte
- Ajout de transitions de survol
- Utilisation de variables CSS
Conclusion
En tant que développeurs Web, nous sommes souvent confrontés au besoin de créer des composants de cartes. que ce soit pour une présentation de produit/projet, un profil d'utilisateur ou un article de blog, les cartes sont partout.
Dans le passé, créer des mises en page réactives était un défi. La création de ces conceptions est devenue beaucoup plus simple et intuitive grâce à l'avènement des techniques CSS modernes, en particulier CSS Flexbox.
Flexbox simplifie le processus de création de mises en page réactives. Nous pouvons facilement organiser, aligner et espacer les éléments dans un conteneur sans utiliser de requêtes multimédias complexes. Cela signifie que nous pouvons créer des mises en page qui s'adaptent parfaitement aux différentes tailles et orientations d'écran sans spécifier de points d'arrêt exacts.
L'objectif est de créer des cartes réactives de hauteurs égales sans compter sur des points d'arrêt en utilisant CSS Flexbox. Nous veillerons à ce que chaque carte conserve la même hauteur quelle que soit la longueur du contenu, en s'adaptant parfaitement aux différentes tailles d'écran.
propriétés CSS clés pour la mise en page :
Explorons maintenant la magie de CSS flexbox en créant les cartes !
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;
}
ALLER EN HAUT
Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.
Copyright© 2022 湘ICP备2022001581号-3