CSS Card UI: een artikelkaart stap voor stap bouwen

In deze tutorial laat ik je zien hoe je een kaart bouwt, in het Engels een “card”. Een kaart toont de lezer een fragment van een artikel met de bijbehorende afbeelding en nodigt hem uit om het artikel aan te klikken en te lezen. Ze wordt uitsluitend met HTML en CSS gebouwd. Ik wilde daarbij een weinig gebruikte CSS-eigenschap inzetten, filter, waarmee je een afbeelding kunt bewerken, een transition zorgt bovendien voor beweging.

See the Pen
Card UI CSS by Damien Flandrin (@dam62500)
on CodePen.

Stap 1 – De structuur schetsen en het HTML opzetten

Voordat je het HTML schrijft, bedenk je eerst de structuur. Heb je een ontwerp, neem dan echt de tijd om de opbouw van je site of van je CSS-modules door te denken. Schets hem gerust op een blad papier. Goed gestructureerd HTML maakt de rest van het werk een stuk eenvoudiger!

<div class="card">
    <a href="https://www.gekkode.com/nl/blog/post/#">
        <!-- Image à la une -->
        <div class="card-image"><img src="https://www.gekkode.com/wp-content/uploads/2021/08/orange.jpeg" alt="Orange" /></div>
        <!-- Fin de l'image à la une -->

<!-- Corp de notre carte -->
        <div class="card-body">

<!-- Date de publication de l'article-->
            <div class="card-date">
                <time>20 Novembre 1992</time>
            </div>

<!-- Titre de l'article -->
            <div class="card-title">
                <h3>Lorem Ipsum</h3>
            </div>
            <!-- Extrait de l'article -->
            <div class="card-excerpt">
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam voluptatibus autem consectetur voluptate facere at, omnis ab optio placeat officiis! Animi modi harum enim quia veniam consectetur unde autem inventore.</p>
            </div>

</div>
        <!-- Fin du corp de notre carte -->
    </a>
</div>

Stap 2 – De basisregels vastleggen en de module stylen

Zodra de basis van je HTML staat, gaan we CSS schrijven. Daarvoor lopen we elk onderdeel van ons schema opnieuw langs.

Deze stijl schrijf je net zo goed in SCSS, met een variabele voor de schaduwkleur en nesting voor de hover-status. Dan heb je wel een compilatiestap nodig: zie SCSS compileren in een Webpack-build.

.card

.card {
  width: 400px; /*1*/
  margin: 0px auto; /*2*/
  background-color: white; /*3*/
  box-shadow: 0px 5px 20px #999; /*4*/
}
.card a { /*5*/
  color: #333;
  text-decoration: none;
}
.card:hover .card-image img { /*6*/
  width: 160%;
  filter: grayscale(0);
}

1. We geven onze kaart een vaste breedte.
2. We centreren hem met margin: 0px auto; let op dat hij wel op display: block staat.
3. We maken hem wit, standaard heb ik de body een iets donkerdere achtergrond gegeven zodat de kaart duidelijk van de pagina afsteekt.
4. We voegen een lichte schaduw toe, zodat de kaart boven de pagina lijkt te zweven.
5. We leggen de basisstijl van de links binnen onze module .card vast.
6. Voor de dynamiek zeggen we de browser, zoals gezegd, dat de kaart bij hover breder wordt via width en dat de kleuren terugkomen: we zetten via .card-image standaard een zwart-witfilter op de afbeelding.

.card-image

.card-image {
  height: 250px;/*1*/
  position: relative;/*2*/
  overflow: hidden;/*3*/
}
.card-image img {
  width: 150%;/*4*/
    /*5 - Centreermethode op basis van de afbeeldingsgrootte */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: grayscale(1);/*6*/
    /*7 - Transitie */
  transition-property: filter width;
  transition-duration: .3s;
  transition-timing-function: ease;
}

1. We leggen de afmetingen vast van het blok dat de afbeelding bevat, die vaste maat houdt alle afbeeldingen even groot als er meerdere kaarten naast elkaar staan.
2. We zetten de positie van het element op relative, want het gaat elementen met absolute bevatten.
3. We verbergen alles wat buiten het blok uitsteekt.
4. We zetten de breedte van de afbeelding op 100%. Je kunt die standaardwaarde naar behoefte verhogen, maar gebruik geen afbeeldingen smaller dan 400px en houd de verhouding breedte/hoogte aan om witruimte te vermijden.
5. Met deze methode centreer je een afbeelding ten opzichte van haar eigen afmetingen en van haar ouderelement. Het doel is dat het oorsprongspunt van de weergave het midden van .card-image is, met transform verschuiven we haar vervolgens op basis van haar eigen grootte, zodat ze precies in het midden van .card-image valt.
6. De eigenschap filter past een filter op een afbeelding toe. Hier zetten we er standaard een zwart-witfilter grayscale op, de bedoeling is dat de kleuren terugkomen zodra de bezoeker over de kaart beweegt.
7. Voor de dynamiek geven we de eigenschappen filter en width een transitie van 300ms mee.

.card-body

.card-body {
    text-align:center;  /*1*/
  padding: 15px 20px; /*2*/
  box-sizing: border-box; /*3*/
}

1. We lijnen alle elementen binnen .card-body uit.
2. Om te voorkomen dat de elementen tegen de rand plakken, geven we ze wat ruimte met padding.
3. Daarna zetten we, als dat niet al standaard gebeurt, box-sizing op border-box, zodat de padding binnen het blok valt en er niet bovenop komt.

De typografie

.card-date {
  font-family: 'Source Sans Pro', sans-serif;
}

.card-title, .card-excerpt {
   font-family: 'Playfair Display', serif;
}

.card-date, .card-title {
  text-align:center;
  text-transform:uppercase;
  font-weight: bold;
}

.card-date, .card-excerpt {
  color: #777;
}

Je raadt het al: hier leggen we de tekststijl vast. Ik heb Source Sans Pro als sans-serif en Playfair Display als serif gebruikt, met een paar opmaakcorrecties voor de tekst.