Hola a todos, un gusto publicar este tutorial.😀😀
En este tutorial, aprenderás a crear cards 🎴 adaptables que se ajusten de forma perfecta a cualquier dispositivo, ya sea un ordenador de escritorio 🖥️, una tablet 📱 o un smartphone 🤳. Utilizando solo unas pocas líneas de código, descubrirás cómo lograr que tus cards luzcan impecables 💯 y proporcionen una experiencia de usuario excepcional sin importar el tamaño de la pantalla. Si estás buscando una solución sencilla y efectiva para mejorar la apariencia de tus diseños web, ¡estás en el lugar adecuado! Comencemos a dominar el arte de crear cards adaptables en cuestión de minutos.
1️⃣ Estructura HTML
Crearás en nuestro documento HTML un contenedor para las cards, luego dentro del contenedor debes crear la cantidad de cards como vos quieras.
Dentro de la card le puedes poner el contenido que tu quieras, yo le puse una imagen de gatitos, un título, un pequeño párrafo y un botón…
<div class="container">
<divclass="card"><imgsrc="./img/8.jpg"alt=""><h3>Gatito 1</h3><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur dolorem officiis consequatur.</p><button>Leer Más</button></div></div>2️⃣Estilos al Contenedor
Utilizaremos el módulo de “Grid Layout” para definir un diseño de grilla adaptable que crea un conjunto de cards con un ancho mínimo de 200px y una distribución equitativa del espacio disponible.
display: grid;
La propiedad display: grid; establece el elemento HTML al que se aplica como un contenedor de tipo grid. Esto crea un contexto de grilla en el que podemos organizar los elementos hijos utilizando las propiedades de CSS relacionadas con la grilla.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
La propiedad grid-template-columns define el tamaño y la cantidad de columnas de la grilla. En este caso, se está utilizando la función repeat para repetir un patrón de columnas en la grilla. El primer argumento de repeat es auto-fit, lo que significa que la grilla ajustará automáticamente el número de columnas para adaptarse al espacio disponible.
El segundo argumento de repeat es minmax(200px, 1fr), que establece el tamaño mínimo y máximo de cada columna. minmax(200px, 1fr) indica que el ancho mínimo de cada columna será de 200px, pero se expandirá hasta 1 fracción del espacio disponible (1fr) si hay más espacio disponible en la grilla.
En resumen, esta línea crea columnas de grilla que se ajustarán automáticamente al ancho mínimo de 200px y se expandirán si hay más espacio disponible.
gap: 22px;
La propiedad gap establece el espacio entre las filas y columnas de la grilla. En este caso, se ha definido un espacio de 22px entre cada card en la grilla.
En conjunto, estas líneas de CSS definen una grilla responsive que organiza las cards en columnas con un ancho mínimo de 200px y se expanden según el espacio disponible. Además, se agrega un espacio de 22px entre cada card para mejorar el aspecto visual y la legibilidad del diseño. Esto garantiza que las cards se adapten de manera elegante a diferentes tamaños de pantalla y dispositivos.
.container {
padding: 10px;
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 22px;
}
3️⃣EstilosalasCards
Aplicaremos los estilos para crear una card con una apariencia redondeada, una sombra sutil, y centrado tanto horizontal como verticalmente dentro de su contenedor. Utilizamos Flexbox para organizar su contenido en una columna vertical y asegura que el elemento no exceda un ancho máximo de 300 píxeles. Además, recorta cualquier contenido que se desborde del elemento.
.card {
margin: auto;
border-radius: 18px;
max-width: 300px;
height: auto;
box-shadow: 0px0px10px#777373;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.cardimg {
width: 100%;
height: 150px;
}
.cardp {
width: 90%;
}
.card > button {
width: 40%;
padding: 5px;
border: none;
border-radius: 5px;
background-color: rgb(75, 146, 212);
color: white;
font-weight: 700;
margin-bottom: 10px;
}
.card > button: hover {
background-color: greenyellow;
color: #000;
}
.card { … }: Este selector agrupa todas las propiedades quese aplicarán a elementos con la clase “card”, es decir, a elementos que tengan la clase “card” definida ensu atributo “class”.
margin: auto;: Centra horizontalmente el elemento “.card” dentro desu contenedor.
border-radius: 18px;: Establece un radio de borde de 18 píxeles, creando esquinas redondeadas para la tarjeta.
max-width: 300px;: Fija el ancho máximo dela tarjeta en 300 píxeles, evitando quese extienda demasiado en pantallas grandes.
height: auto;: Ajusta automáticamente la altura dela tarjeta para adaptarse al contenido que contiene.
box-shadow: 0px0px10px#777373;: Agrega una sombra sutil a la tarjeta con un desplazamiento horizontal y vertical de 0 píxeles y un desenfoque de 10 píxeles. El color dela sombra es “#777373”.
display: flex;: Establece la tarjeta como un contenedor flexible para utilizar Flexbox en el diseño.
flex-direction: column;: Define que los elementos hijos dela tarjeta se apilen en una columna vertical.
justify-content: center;: Centra verticalmente los elementos hijos enla tarjeta.
align-items: center;: Centra horizontalmente los elementos hijos enla tarjeta.
overflow: hidden;: Oculta cualquier contenido quese desborde del tamaño dela tarjeta, asegurando quenose muestre fuera de los límites definidos.
.card img { … }: Este selector aplica estilos específicos a las imágenes dentro de elementos con la clase “card”.
width: 100%;: Hace que las imágenes ocupen todo el ancho disponible dentro dela tarjeta.
height: 150px;: Establece una altura de 150 píxeles para las imágenes, manteniendo su relaciónde aspecto.
.card p { … }: Este selector aplica estilos específicos a los párrafos dentro de elementos con la clase “card”.
width: 90%;: Define que los párrafos ocupen el 90% del ancho dela tarjeta, permitiendo un margen en los lados.
.card > button { … }: Este selector aplica estilos específicos a los botones que son hijos directos de elementos con la clase “card”.
width: 40%;: Establece el ancho del botónen un 40% del ancho dela tarjeta.
padding: 5px;: Agrega un espacio interno de 5 píxeles alrededor del contenido del botón.
border: none;: Elimina el borde del botón.
border-radius: 5px;: Establece un radio de borde de 5 píxeles para crear esquinas redondeadas en el botón.
background-color: rgb(75, 146, 212);: Define el color de fondo del botón como un tono de azul.
color: white;: Establece el color del texto del botónen blanco.
font-weight: 700;: Define el grosor del texto del botón como “bold” (negrita).
margin-bottom: 10px;: Agrega un margen inferior de 10 píxeles al botón para separarlo de otros elementos.
.card > button:hover { … }: Este selector aplica estilos específicos al botón cuando se coloca el cursor sobre él (estado “hover”).
background-color: greenyellow;: Cambia el color de fondo del botón a un tono de verde amarillento cuando se coloca el cursor sobre él.
color: #000;: Cambia el color del texto del botón a negro cuando se coloca el cursor sobre él.
😛😛Luego creé algunos nuevos elementos html y les di sus estilos, cómo para agregarle algo más y que quede mas bonita la página
Acá te dejo el link del repo de github para que lo mires y pruebes en tu computadora…!
Hasta pronto, deja tu like o comentario.
Gracias!🤍🤍
