Crie uma interface de usuário de cartões deslizantes com HTML e CSS

Neste tutorial, construiremos um design de interface de usuário de cartão e discutiremos diferentes maneiras de CSS para revelar suavemente o conteúdo de cada cartão ao passar o mouse.

Para ver todos os efeitos, passe o mouse sobre os cards das próximas demos!

Componente de cartão

Os componentes de cartão são um padrão de interface de usuário comum, frequentemente usado para representar postagens de blog, depoimentos, produtos, etc.

Muitas vezes, para economizar espaço, especialmente em dispositivos móveis, você os encontrará como parte de um controle deslizante horizontal.

1. A marcação

Para começar, dentro de um recipiente, colocaremos seis cartas.

1

 class="cards">

2

   class="card">...    

3

   class="card">...    

4

   class="card">...    

5

   class="card">...    

6

   class="card">...    

7

   class="card">...    

8

Cada cartão terá a seguinte estrutura:

1

 class="card card-top">

2

   class="card-link" href="#0">

3

     class="card-img" width="900" height="900" src="IMG_URL" alt="">

4

     class="card-details">

5

6

         class="card-subtitle">...

7

         class="card-title">...

8

         class="card-content">...

9

10

       class="card-view-more">

11

        View more

12

         width="24" height="24" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">

13

           d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z" />

14

15

16

17

18

2. Os Estilos

Vamos pular os estilos introdutórios e ir direto para os mais importantes:

• Daremos a cada cartão uma altura estática determinada pelo card-height Variável CSS.
• O .card-details elemento será posicionado absolutamente e ficará em cima da imagem. No entanto, por padrão, apenas uma parte deve ser visível, especificamente seu título e subtítulo. Para conseguir isso, também definiremos uma altura estática inicial para o .card-details elemento determinado pelo initial-visible-card-height Variável CSS. Observe que essa altura e os pontos de interrupção funcionam para nosso conteúdo aqui; no seu caso, você pode querer algo diferente.
• Enquanto passarmos o mouse sobre um cartão, animaremos a altura do .card-details elemento para 100%, então conseguiremos uma animação de slide de cima para baixo.

Aqui está uma parte dos estilos correspondentes:

1

/*CUSTOM VARIABLES HERE*/

2

3

.card {

4

  position: relative;

5

  margin: 0;

6

  overflow: hidden;

7

  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);

8

  height: var(--card-height);

9

}

10

11

.card-details {

12

  display: flex;

13

  flex-direction: column;

14

  justify-content: space-between;

15

  position: absolute;

16

  top: 0;

17

  left: 0;

18

  right: 0;

19

  bottom: 0;

20

  background: rgba(193, 18, 31, 0.7);

21

  color: var(--white);

22

  padding: 40px;

23

  height: var(--initial-visible-card-height);

24

  transition: all 0.3s;

25

}

26

27

.card-link:hover .card-details {

28

  height: 100%;

29

  background: var(--white);

30

}

E a demonstração relacionada — certifique-se de vê-la em uma tela maior:

Transformar Propriedade

Mas e se quisermos inverter a direção da animação? Nesse caso, tudo o que temos a fazer é animar o transform Propriedade CSS em vez de height um e defina o valor do transform-origin propriedade para o bottom.

Aqui está uma parte dos estilos correspondentes:

1

/*CUSTOM VARIABLES*/

2

3

.card-details {

4

  transform: translateY(calc(100% - var(--initial-visible-card-height)));

5

  transform-origin: bottom;

6

}

7

8

.card-link:hover .card-details {

9

  transform: none;

10

}

E a demonstração relacionada — certifique-se de vê-la em uma tela maior:

Propriedade Clip-Path

Alternativamente, podemos obter os efeitos acima mencionados usando o CSS clip-path propriedade. Também podemos usar o circle() função desta propriedade para criar alguns efeitos interessantes.

Aqui está uma parte dos estilos correspondentes:

1

.card-details {

2

  clip-path: circle(15% at 0 0);

3

  transition: all 0.4s;

4

}

5

6

.card-top-right .card-details {

7

  clip-path: circle(15% at 100% 0);

8

}

9

10

.card-bottom-right .card-details {

11

  clip-path: circle(15% at 100% 100%);

12

}

13

14

.card-bottom-left .card-details {

15

  clip-path: circle(15% at 0 100%);

16

}

17

18

.card-details * {

19

  opacity: 0;

20

}

21

22

.card-link:hover .card-details {

23

  clip-path: circle(150% at 100% 100%);

24

}

25

26

.card-link:hover .card-details * {

27

  opacity: 1;

28

}

E a demonstração relacionada — certifique-se de vê-la em uma tela maior:

Conclusão

É isso, pessoal! Neste breve tutorial, cobrimos diferentes métodos CSS para criar layouts de cartão com conteúdo animado. Esse tipo de layout tem limitações quando você trabalha com alturas estáticas, então esteja ciente disso e use-o somente se puder controlar o conteúdo do cartão.

Se você precisar de algo mais elegante, considere incluir JavaScript no loop.

Como próximo passo, você também pode habilitar esses efeitos somente se o mecanismo de entrada principal do usuário puder passar o mouse sobre os elementos aproveitando as consultas de mídia apropriadas.

Como sempre, muito obrigado pela leitura!