Apprendre à faire des cards en CSS

Construction de la structure de base en HTML

• Création de la structure HTML de la carte

On vient créer une div principale avec une classe card. Puis on ajoute un container avec une div avec une classe .card-container . A la suite on rajoute une div avec une classe card-body pour le corps de la carte. Et pour finir on rajoute un titre <h2>, un <p> et une ancre <a>.

• Exemple de code :

  
    <div class="card">
      <div class="card-container">
        <div class="card-body">
          <h2>Ma card</h2>
        <p>Ici c'est le coprs de la card</p>
            <a href="#">En savoir plus...</a>
        </div>
      </div>
  </div>
  
  

[article-internal-link]

Stylisation de la Carte avec CSS

1. Ajoutons le style de base

Dans notre fichier CSS, on vient faire les manipulations suivantes :

Dans la div principale .card : on vient insérer un background-image. Puis, on modifie l’en-tête de la carte .card-container pour que les textes et l’ancre apparaissent en bas de celle-ci. On continue avec le corps dans le.card-body, en changeant la typographie, les tailles et les couleurs. Avec le :hover, on vient rajouter un peu d’animation lorsque le pointeur de la souris passe au-dessus de la card.

1. Exemple de code CSS :

   cssCopier le code
   /* Add styles here */
   @import url('<https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>');    //import de la font Poppins
   
   .card {
       transition: all 200ms;
       height:35vh;
       border: 1px solid #ddd;
       border-radius: 8px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       max-width: 300px;
       position: relative;
       background-image: url('<https://images.pexels.com/photos/14835122/pexels-photo-14835122.webp>');
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
       
   }
   .card-container{
       padding: 10px 10px;
       position:absolute;
       bottom: 0;
       left:0
   
   }
   .card-body h2{
       color:#ffff;
       font-size: x-large;
       font-weight: bold;
       margin:0;
       font-family: 'poppins',sans-serif;
   }
   
   .card-body  p{
       font-size: small;
       color: #ffff;
       margin:5px 0 5px 0;
       font-family: 'poppins',sans-serif;
   }
   
   .card-body  a {
       font-family: 'poppins',sans-serif;
       font-size: small;
       color: #ffff;
       border: none;
       cursor: pointer;
       text-decoration:none;
       background-color: transparent;
       margin:5px 0 5px 0;
   
   }
   
   .card:hover{
       transition: all 500ms;
       transform:scale(1.05);
   }
   
   

Et voila comment coder une card en CSS, de manière personnalisé !

Amusez-vous à en créer une seconde avec l’éditeur !
[article-internal-link]