Introducción: Las tarjetas son una parte muy importante de cualquier sitio web. Se utiliza para mostrar información importante en breve a los espectadores. En este artículo, crearemos un efecto de desplazamiento de tarjetas de stackend responsivo usando HTML y CSS. Para lograr un efecto de apilamiento multicapa, debe seguir ciertos pasos que se detallan a continuación.
Nota: Al pasar el mouse sobre las tarjetas, podemos lograr varias direcciones o efectos en las tarjetas, como arriba a la izquierda, abajo a la derecha, diagonal, rotar, etc.
Enfoque: Primero, diseñaremos una estructura de tarjeta simple en HTM. Ahora usaremos algunas propiedades CSS para construir el diseño básico de la tarjeta y para crear un efecto de pila, definiremos los pseudo-elementos ::before y ::after y los posicionaremos absolutamente en relación con la tarjeta principal. Ahora tendremos que mover el div con la clase «card-inner» lejos de su posición original usando la propiedad de transformación. Finalmente, se agregó un efecto de desplazamiento en una pila de cartas mediante el uso de una transformación que puede traducir la carta antes y después del efecto de desplazamiento.
Veamos la implementación del enfoque anterior.
Ejemplo 1: en este ejemplo, veremos cuándo el usuario se desplazará sobre la tarjeta. La tarjeta superior se traducirá sobre el eje X y el eje Y, aquí (5px-eje X, 5px-eje Y) dirección inferior derecha y debajo de la tarjeta apilada se traducirá el eje ( -X ) y el eje ( -Y ), es decir, opuesto a la dirección inferior derecha, lo que creará múltiples efectos apilados en la parte inferior derecha con la ayuda del pseudoelemento antes y después.
HTML
<!DOCTYPE html>
<html>
<head>
<title> stackened cards hover effect </title>
<style>
body {
color: #FDFAF6;
background: #50CB93;
}
.card {
position: relative;
width: 400px;
margin: 60px auto;
}
.card::before,
.card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card::before,
.card::after,
.card .card-inner {
background-color: #423F3E;
border: 1px solid #01937C;
transition: transform 0.5s;
}
.card::before,
.card-inner {
z-index: 1;
}
.card-inner {
position: relative;
padding: 4rem;
}
/* Position the stacked cards in
different position */
.cards:hover {
transform: translate(5px, 5px);
}
.cards:hover::before {
transform: translate(-5px, -5px);
}
.cards:hover::after {
transform: translate(-10px, -10px);
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks</h1>
<div class="card-container">
<div class="card cards">
<div class="card-inner">
<h1>Down-Right</h1>
<h3 class="card-title">
GeeksforGeeks
</h3>
<div class="card-body">
A Complete Portal for Geeks.
</div>
</div>
</div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, veremos stacked-diagonal-left y stacked-rotate-left usando el mismo enfoque que se explicó anteriormente.
Stacked-Rotate-left:
- La tarjeta superior se traducirá solo sobre el eje X, aquí (translate(2.5px, 0)) dirección izquierda, y rotará en cierto ángulo, aquí sus 2.5 grados (rotate(2.5deg)). Luego
- La tarjeta apilada debajo también se trasladará y rotará en la misma dirección pero con doble píxel para crear un efecto de capas múltiples apiladas con la ayuda del pseudoelemento antes y después.
Apilado-diagonal-izquierda:
- En diagonal izquierda, inicialmente la tarjeta de pila multicapa se coloca en dirección opuesta a la dirección izquierda (translate(-16px, -16px) ) usando la propiedad transform:translate y luego
- Cuando el usuario pasa el cursor sobre la tarjeta, la tarjeta multicapa apilada se traducirá a la dirección diagonal izquierda usando el mismo valor, es decir (translate(16px, 16px)) pero el signo opuesto para que las tarjetas multicapa apiladas puedan cubrir la misma dirección.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #FDFAF6;
background: #50CB93;
}
:root {
--offset-before: 8px;
--offset-after: 16px;
}
.card {
position: relative;
width: 400px;
margin: 60px auto;
}
.card::before,
.card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card::before,
.card::after,
.card .card-inner {
background-color: #423F3E;
border: 1px solid #01937C;
transition: transform 0.5s;
}
.card::before,
.card-inner {
z-index: 1;
}
.card-inner {
position: relative;
padding: 4rem;
}
/*Diagonal => Left*/
.cards-diagonal::before {
transform: translate(calc(-1 * 8px),
calc(-1 * 8px));
}
.cards-diagonal::after {
transform: translate(calc(-1 * 16px),
calc(-1 * 16px));
}
.cards-diagonal:hover::before {
transform: translate(8px, 8px);
}
.cards-diagonal:hover::after {
transform: translate(16px, 16px);
}
/*Rotate => Left */
.cards-rotate::before,
.cards-rotate::after {
transform-origin: 50% 100%;
}
.cards-rotate:hover {
transform: translate(2.5px, 0) rotate(2.5deg);
}
.cards-rotate:hover::before {
transform: translate(2.5px, 0) rotate(2.5deg);
}
.cards-rotate:hover::after {
transform: translate(5px, 0) rotate(5deg);
}
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks</h1>
<div class="card-container">
<div class="card cards-diagonal">
<div class="card-inner">
<h1>Diagonal-Left</h1>
<h3 class="card-title">GeeksforGeeks</h3>
<div class="card-body">
A Complete Portal for Geeks.
</div>
</div>
</div>
</div>
<div class="card-container">
<div class="card cards-rotate">
<div class="card-inner">
<h1>Rotate-Left</h1>
<h3 class="card-title">GeeksforGeeks</h3>
<div class="card-body">
A Complete Portal for Geeks.
</div>
</div>
</div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 3: En este ejemplo, veremos los efectos Stacked-Up y Stacked-Right utilizando el mismo enfoque que se explicó anteriormente.
Amontonados:
- La tarjeta superior se traducirá solo en el eje Y negativo, aquí (traducir (0, -5px)) Dirección hacia arriba, luego
- debajo de la tarjeta apilada traducirá el eje Y positivo, es decir, opuesto a la dirección hacia arriba y también se escalará a lo largo del eje Y, lo que creará múltiples efectos apilados con la ayuda del pseudoelemento antes y después.
Apilado a la derecha:
- La tarjeta superior se traducirá solo en el eje X positivo, aquí (translate(5px, 0)) Dirección derecha, luego
- debajo de la tarjeta apilada se traducirá el eje X negativo (translate (-10px, 0)), es decir, en la dirección opuesta a la derecha y también se escalará a lo largo del eje X negativo, lo que creará múltiples efectos apilados con la ayuda del pseudoelemento antes y después .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #FDFAF6;
background: #50CB93;
}
:root {
--offset-before: 8px;
--offset-after: 16px;
}
.card {
position: relative;
width: 400px;
margin: 60px auto;
}
.card::before,
.card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card::before,
.card::after,
.card .card-inner {
background-color: #423F3E;
border: 1px solid #01937C;
transition: transform 0.5s;
}
.card::before,
.card-inner {
z-index: 1;
}
.card-inner {
position: relative;
padding: 4rem;
}
/*Stacked => Up*/
.cards-up::before,
.cards-up::after {
transform-origin: center bottom;
}
.cards-up:hover {
transform: translate(0, -5px);
}
.cards-up:hover::before {
transform: translate(0, 5px) scale(0.95);
}
.cards-up:hover::after {
transform: translate(0, 10px) scale(0.90);
}
/*Stacked => Right */
.cards-right::before,
.cards-right::after {
transform-origin: left center;
}
.cards-right:hover {
transform: translate(5px, 0);
}
.cards-right:hover::before {
transform: translate(-10px, 0) scale(0.95);
}
}
.cards-right:hover::after {
transform: translate(-10px, 0) scale(0.90);
}
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks</h1>
<div class="card-container">
<div class="card cards-up">
<div class="card-inner">
<h1>Stacked-Up</h1>
<h3 class="card-title">GeeksforGeeks</h3>
<div class="card-body">
A Complete Portal for Geeks.
</div>
</div>
</div>
</div>
<div class="card-container">
<div class="card cards-right">
<div class="card-inner">
<h1>Stacked-Right</h1>
<h3 class="card-title">GeeksforGeeks</h3>
<div class="card-body">
A Complete Portal for Geeks.
</div>
</div>
</div>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA