Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

09 Desafío: personalizando el proyecto con hover

Ejemplo de personalización con :hover

Para este desafío, elegí personalizar el nombre en un portafolio. Es un elemento central que capta la atención de inmediato. Al pasar el cursor sobre él, haré que el color del texto cambie y el tamaño de la fuente se incremente ligeramente. Esto le da un efecto sutil pero llamativo.

Código CSS
h1 {
color: #333;
font-size: 2.5rem;
transition: color 0.3s ease, font-size 0.3s ease; /* Transición suave */
}

h1:hover {
color: #007BFF; /* Cambia el color del texto a un azul vibrante /
font-size: 2.7rem; /
Aumenta el tamaño de la fuente */
}

1 respuesta

Hola Ernesto, espero que estés bien

¡Qué bueno que estás trabajando en personalizar tu portafolio! Tu idea de cambiar el color y el tamaño del texto al pasar el cursor sobre el nombre es excelente para captar la atención de manera sutil pero efectiva.

Tu código CSS está bien estructurado. Has utilizado la propiedad transition para suavizar el cambio de color y tamaño, lo cual es una buena práctica para mejorar la experiencia del usuario. Aquí tienes un pequeño ejemplo de cómo podría verse tu código en acción:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        h1 {
            color: #333;
            font-size: 2.5rem;
            transition: color 0.3s ease, font-size 0.3s ease;
        }

        h1:hover {
            color: #007BFF;
            font-size: 2.7rem;
        }
    </style>
    <title>Portafolio</title>
</head>
<body>
    <h1>Tu Nombre</h1>
</body>
</html>

Cuando pases el cursor sobre el título <h1>, verás que el color cambia a un azul vibrante y el tamaño de la fuente se incrementa ligeramente. Esto le da un efecto dinámico y profesional a tu portafolio.

Espero que esta personalización te ayude a darle un toque único a tu proyecto. ¡Sigue explorando y experimentando con diferentes estilos!

Espero haber ayudado y buenos estudios!