Las tarjetas son una parte muy importante para cualquier sitio web. Se utiliza para mostrar información importante en breve a los espectadores. Entonces, en este artículo crearemos una tarjeta receptiva con un increíble efecto de desplazamiento usando HTML y CSS. Al usar HTML , diseñaremos la estructura básica de la tarjeta y luego, al usar las propiedades de CSS , podemos crear el efecto de animación flotante.
Se proporciona un gif de muestra para comprender la tarea de hoy con más claridad.
Implementación paso a paso:
Paso 1: Primero, vaya a Internet y descargue una imagen para la tarjeta y guárdela en la carpeta de imágenes . Usaremos esta imagen más adelante durante la implementación.
Paso 2: Ahora, diseñaremos una estructura de tarjeta simple en HTML . Los comentarios ya están en código para su ayuda.
HTML
<!DOCTYPE html> <html> <body> <!--creating a class container which will hold card class and again card will hold imgbox class--> <div class="container"> <div class="card"> <div class="imgbox"> <!--extracting image named gfg.jpg from images folder--> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210215170112/geek2-200x200.jpg"> </div> <div class="content"> <!--heading of the card--> <h1>GFG</h1> <!--content of the card--> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes. </p> </div> </div> </div> </body> </html>
Paso 3: A continuación, usaremos algunas propiedades de CSS para diseñar la tarjeta y usaremos la clase de desplazamiento para obtener el efecto de animación cuando pasemos el mouse sobre la tarjeta.
HTML
* { padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; } /*Apply css properties to body*/ body { display: flex; justify-content: center; align-items: center; background-color: gray; } /*Apply css properties to container class*/ .container { position: relative; width: 1000px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 35px; } /*Apply css properties to card class*/ .container .card { height: 220px; max-width: 200px; position: relative; margin: 30px 10px; padding: 20px 15px; background: wheat; display: flex; flex-direction: column; box-shadow: 0 5px 202px black; transition: 0.3s ease-in-out; } /*Apply css properties to card class when it get pointed by cursor*/ .container .card:hover { height: 420px; } /*Apply css properties to imgbox class*/ .containe .card .imgbox { position: relative; width: 260px; height: 260px; top: -60px; left: 20px; } /*Apply css properties to img tag*/ .container .card .imgbox img { max-width: 100%; border-radius: 4px; } /*Apply css properties to content class*/ .container .card .content { position: relative; margin-top: -100px; padding: 10px 15px; text-align: center; color: #111; visibility: hidden; opacity: 0; transition: 0.3s ease-in-out; } /*Apply css properties to content when card gets hovered*/ .container .card:hover .content { visibility: visible; opacity: 1; margin-top: -10px; transition-delay: 0.3s; } /* Css part completed*/
Código completo: en esta sección, combinaremos las tres secciones anteriores para crear una tarjeta flotante usando HTML y CSS.
HTML
<!DOCTYPE html> <html> <head> <style> * { padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; } /*apply css properties to body*/ body { display: flex; justify-content: center; align-items: center; background-color: gray; } /*apply css properties to container class*/ .container { position: relative; width: 1000px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 35px; } /*apply css properties to card class*/ .container .card { height: 220px; max-width: 200px; position: relative; margin: 30px 10px; padding: 20px 15px; background: wheat; display: flex; flex-direction: column; box-shadow: 0 5px 202px black; transition: 0.3s ease-in-out; } /*apply css properties to card class when it get pointed by cursor*/ .container .card:hover { height: 420px; } /*apply css properties to imgbox class*/ .containe .card .imgbox { position: relative; width: 260px; height: 260px; top: -60px; left: 20px; } /*apply css properties to img tag*/ .container .card .imgbox img { max-width: 100%; border-radius: 4px; } /*apply css properties to content class*/ .container .card .content { position: relative; margin-top: -100px; padding: 10px 15px; text-align: center; color: #111; visibility: hidden; opacity: 0; transition: 0.3s ease-in-out; } /*apply css properties to content when card gets hovered*/ .container .card:hover .content { visibility: visible; opacity: 1; margin-top: -10px; transition-delay: 0.3s; } /* css part completed*/ </style> </head> <body> <!--creating a class container which will hold card class and again card will hold imgbox class--> <div class="container"> <div class="card"> <div class="imgbox"> <!--extracting image named gfg.jpg from images folder--> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210215170112/geek2-200x200.jpg"> </div> <div class="content"> <!--heading of the card--> <h1>GFG</h1> <!--content of the card--> <p> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes. </p> </div> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por riyamathur y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA