Karta (card UI) w CSS: efekt hover z właściwością filter

W tym tutorialu pokażę ci, jak zbudować kartę. Karta pokazuje czytelnikowi zajawkę artykułu razem z grafiką, żeby zachęcić go do kliknięcia i przeczytania całości. Powstaje wyłącznie z HTML-a i CSS-a. Chciałem wykorzystać rzadko spotykaną właściwość CSS, filter, która nakłada obróbkę na obrazek, i dodałem przejście, żeby całość nabrała życia.

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

Krok 1 – Naszkicuj strukturę i napisz HTML

Zanim napiszesz choćby linijkę HTML-a, wyobraź sobie strukturę. Jeśli pracujesz na makiecie, poświęć chwilę na przemyślenie struktury strony i modułów CSS. Śmiało naszkicuj ją na kartce. Dobrze zbudowany HTML ułatwi ci całą dalszą robotę!

<div class="card">
    <a href="https://www.gekkode.com/pl/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>

Krok 2 – Ustal reguły bazowe i ostyluj moduł

Kiedy szkielet HTML jest już gotowy, przechodzimy do CSS-a, biorąc po kolei każdą część szkicu.

Ten sam styl równie dobrze zapisze się w SCSS, ze zmienną na kolor cienia i zagnieżdżeniem dla stanu hover. Dochodzi wtedy krok kompilacji: zobacz kompilowanie SCSS w buildzie Webpacka.

.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. Nadajemy karcie stałą szerokość.
2. Centrujemy ją przez margin: 0px auto, pilnuj, żeby element faktycznie był w display: block.
3. Robimy ją białą; na body ustawiłem nieco ciemniejsze tło, żeby karta wyraźnie odcinała się od strony.
4. Dokładamy delikatny cień, żeby karta sprawiała wrażenie unoszącej się nad stroną.
5. Ustalamy bazowy styl linków wewnątrz modułu .card.
6. Dla wspomnianego wcześniej dynamizmu mówimy przeglądarce, że gdy tylko odwiedzający najedzie na kartę, obrazek powiększa się przez width i odzyskuje kolory, bo domyślnie nakładamy na niego czarno-biały filtr w .card-image.

.card-image

.card-image {
  height: 250px;/*1*/
  position: relative;/*2*/
  overflow: hidden;/*3*/
}
.card-image img {
  width: 150%;/*4*/
    /*5 - Metoda centrowania zależna od rozmiaru obrazka */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: grayscale(1);/*6*/
    /*7 - Przejście */
  transition-property: filter width;
  transition-duration: .3s;
  transition-timing-function: ease;
}

1. Ustalamy wysokość bloku, który pomieści obrazek, stały rozmiar sprawia, że przy kilku kartach obok siebie wszystkie obrazki trzymają się tej samej wielkości.
2. Ustawiamy element na relative, bo w środku znajdą się elementy absolute.
3. Ukrywamy wszystko, co wychodzi poza blok.
4. Ustawiamy rozmiar obrazka na 100%. Możesz podnieść tę wartość według potrzeb, ale nie używaj obrazków węższych niż 400px i zachowaj proporcje szerokości do wysokości, żeby nie zostały puste miejsca.
5. Tak właśnie wyśrodkowuje się obrazek względem własnego rozmiaru i elementu rodzica. Chodzi o to, żeby punktem odniesienia stał się środek .card-image, a potem przez transform cofamy obrazek o połowę jego rozmiaru, żeby wypadł dokładnie na środku .card-image.
6. Właściwość filter nakłada filtr na obrazek, tu chcemy domyślnie czarno-biały grayscale, po to by kolory wróciły dopiero wtedy, gdy użytkownik najedzie na kartę.
7. Dla dynamiki nakładamy przejście 300ms na obie właściwości: filter i width.

.card-body

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

1. Wyrównujemy wszystkie elementy wewnątrz .card-body.
2. Żeby treść nie kleiła się do krawędzi, dokładamy oddech właściwością padding.
3. Na koniec, jeśli nie jest to już domyślne, ustawiamy box-sizing na border-box, żeby padding liczył się wewnątrz bloku, a nie doliczał do niego.

Typografia

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

Jak łatwo zgadnąć, tutaj ustawiamy styl tekstu: użyłem Source Sans Pro jako kroju bezszeryfowego i Playfair Display jako szeryfowego, plus kilka drobnych korekt formatowania.