Création de cartes réactives de même hauteur avec un CSS moderne (Magie de Flexbox et aucune requête multimédia)

Table des matières

Présentation

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

Introduction

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 vitrine de produit/projet, un profil 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.

Quel est notre objectif ?

Le but 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 :

• affichage : flex
• aligner les éléments
• justifier-contenu
• flex-croissance

Explorons maintenant la magie de CSS flexbox en construisant les cartes !

Construire la structure à l'aide du HTML5 sémantique

<main class="card-container">
<!--   First card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240" alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title one</h2>
    <p class="card-description">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.</p>
    <button class="card-button" aria-label="Read more about Title one">Read More</button>
  </article>
  <!--   Second card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240"  alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title two</h2>
    <p class="card-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.</p>
    <button class="card-button" aria-label="Read more about Title two">Read More</button>
  </article>
  <!--   Third card -->
  <article class="card">
    <img src="https://placehold.co/320x240" width="320" height="240"  alt="Replace placeholder image here" class="card-image" loading="lazy">
    <h2 class="card-title">Title three</h2>
    <p class="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!</p>
    <button class="card-button" aria-label="Read more about Title three">Read More</button>
  </article>
</main>

Ajout du style à l'aide du CSS moderne

Réinitialisation du CSS

/* Basic CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Le corps

/* 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 */
}

Conception d'une disposition de carte avec Flexbox

/* 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;
}

Styliser le contenu interne de la carte

Styliser l'image de la carte

.card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 0.85rem;
}

Styliser le contenu de la carte

.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;
}

Styliser le bouton de la carte

/* 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;
}

Ajout de transitions de survol

.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;
}

Utiliser des variables CSS

/* 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;
}

Conclusion

Tout mettre ensemble

ALLER EN HAUT

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!