Title one
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
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 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 rencontrons souvent le 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 construisant 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; }
GO TOP
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!