Card UI em CSS: criar um cartão com a propriedade filter

Neste tutorial vou mostrar-te como criar um cartão («card» em inglês). Um card serve para mostrar ao utilizador um excerto de um artigo com a respetiva imagem, para o levar a clicar nele e a lê-lo. Feito apenas com HTML e CSS. Quis usar uma propriedade pouco explorada em CSS, a propriedade filter, que aplica um tratamento sobre uma imagem, e acrescentei também uma transição para lhe dar dinamismo.

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

Passo 1 – Esquematizar e montar o código HTML

Antes de escreveres o HTML, começa por imaginar a sua estrutura. Quando tens uma maqueta, dedica tempo a pensar a estrutura do teu site ou dos teus módulos CSS. Não hesites em fazer esboços numa folha para a esquematizar. Um HTML bem estruturado vai facilitar-te muito o desenvolvimento a seguir!

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

Passo 2 – Definir as regras de base e dar estilo ao módulo

Assim que as bases do HTML estiverem postas, começamos a escrever o CSS. Para isso vamos retomar cada parte do esquema.

Este estilo escreve-se igualmente bem em SCSS, com uma variável para a cor da sombra e aninhamento para o estado de hover. É preciso, nesse caso, um passo de compilação: ver compilar SCSS num build de Webpack.

.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. Definimos um tamanho fixo para o card.
2. Centramo-lo com margin: 0px auto; atenção a estar em display: block.
3. Pomo-lo a branco: por predefinição coloquei um fundo ligeiramente mais escuro no body para diferenciar bem o card do corpo da página.
4. Acrescentamos-lhe uma sombra ligeira para criar um efeito de sobreposição em relação à página.
5. Definimos o estilo de base das ligações dentro do módulo .card.
6. Para dar dinamismo, como disse atrás, indicamos ao navegador que, assim que o visitante passar por cima do card, este aumenta através de width e volta a mostrar as cores, porque vamos aplicar por predefinição um filtro a preto e branco sobre a imagem a partir de .card-image.

.card-image

.card-image {
  height: 250px;/*1*/
  position: relative;/*2*/
  overflow: hidden;/*3*/
}
.card-image img {
  width: 150%;/*4*/
    /*5 - Método de centragem em função do tamanho da imagem */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: grayscale(1);/*6*/
    /*7 - Transição */
  transition-property: filter width;
  transition-duration: .3s;
  transition-timing-function: ease;
}

1. Fixamos o tamanho do bloco que vai conter a imagem, esse tamanho fixo permite manter a mesma medida entre todas as imagens caso existam vários cards.
2. Fixamos a posição do elemento em relative, porque vai conter elementos absolute lá dentro.
3. Escondemos tudo o que possa transbordar do bloco.
4. Fixamos o tamanho da imagem a 100%. Podes aumentar o tamanho por predefinição consoante as tuas necessidades, mas não uses imagens com menos de 400px e não te esqueças de respeitar a proporção largura/altura para evitar zonas em branco.
5. Este método permite centrar uma imagem em função do seu tamanho e do do elemento pai. A ideia é que o ponto de origem da sua apresentação seja o centro de .card-image, depois, com transform, redefinimos a sua posição em função do tamanho da imagem para a deixar mesmo no centro de .card-image.
6. A propriedade filter permite aplicar um filtro sobre uma imagem, aqui queremos aplicar por predefinição um filtro a preto e branco, grayscale, e devolver-lhe as cores quando o utilizador passar por cima do card.
7. Para dar dinamismo, aplicamos às duas propriedades, filter e width, um efeito de transição de 300ms.

.card-body

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

1. Alinhamos todos os elementos dentro de .card-body.
2. Para que os elementos não fiquem colados, aplicamos um enchimento com a propriedade padding.
3. E aplicamos, se ainda não estiver por predefinição, o box-sizing com o valor border-box, para que o padding fique incluído no bloco e não acrescentado a ele.

A tipografia

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

Como já percebeste, aqui definimos o estilo do texto: usei Source Sans Pro sans-serif e Playfair Display serif como tipos de letra, mais alguns ajustes de formatação.