Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
Aplica todo lo aprendido — caja, flexbox, colores, tipografía y transiciones — para construir la interfaz completa de tu proyecto final.
Explicación
Esta tarjeta combina varias técnicas que ya conoces:
box-shadow + border-radiusLa combinación clásica para tarjetas modernas: esquinas suaves y una sombra ligera que las despega del fondo.
margin: 0 autoCentra la tarjeta horizontalmente dentro de su contenedor.
transition + :hoverDa feedback visual inmediato al usuario cuando pasa el mouse sobre el botón.
Reto rápido
Cambia los colores del avatar y del botón para crear tu propia versión de la tarjeta de perfil.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Construye por capas: primero el layout general, luego el espaciado, después colores y tipografía, y al final los detalles como sombras y transiciones.
Dato extra
Esta misma estructura de tarjeta (avatar + título + descripción + botón) es uno de los componentes más reutilizados en interfaces reales, desde redes sociales hasta tiendas en línea.
Error común
Intentar perfeccionar cada detalle (sombra exacta, animación) antes de tener el layout general funcionando: avanza primero en estructura, pule los detalles al final.
Siguiente paso
Tu proyecto ya tiene forma y estilo. El último paso es publicarlo para que cualquiera pueda verlo.
Ir a la siguiente lección