En este tutorial te mostraré cómo crear un piano básico con dos teclas usando solo HTML y CSS. Las teclas serán de color rosa y, cuando hagas clic sobre ellas, cambiarán de color, simulando la acción de presionarlas. Este es un ejemplo básico que puedes expandir más adelante, añadiendo más teclas o funcionalidades.
Requisitos previos:
Paso a paso:
1. Crea la estructura básica en HTML: Empezamos creando un archivo HTML en el que vamos a definir las teclas del piano con un nombre cada una.
<htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title> Piano con CSS </title><linkrel="stylesheet"href="styles.css"></head><body><divclass="piano"><divclass="tecla">Do </div><divclass="tecla">Re </div></ div></body></html>Explicación:
En el, creamos un contenedor llamado piano que contiene dos teclas, representadas por dos elementos
<div>con la clase tecla.</div>
Cada tecla se le coloca un nombre como “Do” y “Re” de la escala musical.
El archivo está enlazado a una hoja de estilos CSS llamada styles.css, donde definiremos el aspecto y comportamiento del piano.
/* Estilo del piano */.piano {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
/* Estilo de las teclas */.tecla {
width: 100px;
height: 200px;
background-color: pink;
display: flex;
justify-content: center;
border: 2px solid black;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Cambiar el color al hacer clic en la tecla */.tecla:active {
background-color: hotpink;
}
Explicación:
/* Sombra para las teclas */.tecla {
box-shadow: 2px4px10px black;
}
Explicación:
Conclusión:
¡Felicidades! Has creado un piano básico con dos teclas utilizando HTML y CSS. Las teclas cambian de color al hacer clic sobre ellas, simulando la acción de presionar una tecla de piano. Este es un ejemplo sencillo que puedes expandir añadiendo más teclas, sonidos o estilos adicionales.
Posibles extensiones:
