2
.teclado {
  background-color: darkslategrey;
  grid-row-start: 2;
  grid-column: 2 2;
  display: flex;
  justify-self: center;
  margin-bottom: 20px;
  
}
    

.tecla--blanca {
      background-color: white;
      height: var(--altura-teclado);
      width: calc(var(--altura-teclado)/ 7);
    }
    
    .tecla--negra {
      background-color: black;
      color: white;
      height: calc(var(--altura-teclado) *2/3);
      width: calc((var(--altura-teclado)/7)*2/3); ;
    }
     
    .do-sostenido {
      top: 0px;
    }
    .re-sostenido {
      top: 0px;
    }

El tema es que me gustaría poner las teclas negras por ejemplo las clases .do-sostenido , .re-sostenido , por encima de las blancas como si se tratase de un piano , de momento no lo he conseguido dejo lo que tengo por si alguien tiene alguna sugerencia El contenedor entero es .teclado

introducir la descripción de la imagen aquí

2
  • Buenas, Te recomendaria hacer las teclas blancas del tamaño de la tecla blanca + tecla negra y luego la tecla negra ponerla como position: absolute top0 right0
    – adro
    Commented el 20 dic. 2020 a las 1:53
  • Hola @pighfs, ¿podrías añadir el código HTML además del CSS? Sin saber cuál es la estructura de tu HTML, puede que recibas respuestas de usuarios que no te funcionen porque no se ajusten a lo que ya tengas. Lee sobre cómo crear un ejemplo mínimo verificable para más información.
    – Alvaro Montoro
    Commented el 20 dic. 2020 a las 17:08

2 respuestas 2

1

Podrías lograr lo que deseas utilizando cuatro (04) reglas CSS y dos (02) propiedades personalizadas claves para el tamaño y ubicación de las teclas.

.teclado {
    ...
    /* Importante para que se apilen horizontalmente */
    display: flex;

    /* Propiedades personalizadas claves */
    --tecla-width: 50px;
    --tecla-height: 250px;
}

Que es donde se derivarán todos los cálculos necesarios para ubicar las teclas en su ubicación adecuada.

Las cuatro cuatro (04) reglas a utilizar son:

  • .teclado {}: contenedor de las teclas del teclado
  • .teclado__item {}: teclas con propiedades comunes para todas las teclas.
  • .teclado__item--blanco {}: propiedades específicas para las teclas blancas.
  • .teclado__item--negro {}: propiedades específicas para las teclas negras.

Importante: se debe establecer display: flex al contenedor de las teclas para que se apilen horizontalmente.

Además, a la regla .teclado__item debes establecerle box-sizing: border-box para evitar que se descuadren los tamaños y posiciones de las teclas del teclado si le aplica algún borde o relleno.

Por ejemplo:

.teclado__item {
  box-sizing: border-box;
}

Por ejemplo, la tecla negra del teclado la podremos establecer en 3/4 de altura y 1/2 de ancho respecto a la tecla blanca.

Por ejemplo:

.teclado__item--negra {
    width: calc(var(--tecla-width) * (1/2));
    height: calc(var(--tecla-height) * (3/4));
}

En cuanto a su posición horizontal deben establecerse márgenes negativos a la izquierda y la derecha de 1/4 parte del ancho de las teclas blancas con valores negativos.

Por ejemplo:

.teclado__item--negra {
    ...
    /* Dividirlo por 4 es lo mismo que multiplicarlo por 1/4 */
    margin-left: calc(var(--tecla-width) / 4 * (-1));
    margin-right: calc(var(--tecla-width) / 4 * (-1));
}

Visualizar Demo

Lea los comentarios del código.

Ya explicado lo anterior, veamos una Demo de su funcionamiento:

.teclado {
    min-height: 100px;
    display: flex;

    /* Tamaño de las teclas */
    --tecla-width: 60px;
    --tecla-height: 250px;
  }
  
  .teclado__item {
    background-color: var(--fondo);
    border-radius: 0 0 7px 7px;
    border: 1px solid;

    box-sizing: border-box;
  }
  
  .teclado__item--blanco {
    --fondo: white;
    width: var(--tecla-width);
    height: var(--tecla-height);
  }
  
  .teclado__item--negro {
    --fondo: black;

    /* Proporciones */
    width: calc(var(--tecla-width) / 2);
    height: calc(var(--tecla-height) * (3/4));

    /* Ubicación */
    margin-left: calc(var(--tecla-width) / 4 * (-1) );
    margin-right: calc(var(--tecla-width) / 4 * (-1) );

    z-index: 1
  }
<div class="teclado">
  <div class="teclado__item teclado__item--blanco"></div>
  <div class="teclado__item teclado__item--negro"></div>
  <div class="teclado__item teclado__item--blanco"></div>
  <div class="teclado__item teclado__item--negro"></div>
  <div class="teclado__item teclado__item--blanco"></div>
  <div class="teclado__item teclado__item--blanco"></div>
  <div class="teclado__item teclado__item--negro"></div>
  <div class="teclado__item teclado__item--blanco"></div>
  <div class="teclado__item teclado__item--negro"></div>
  <div class="teclado__item teclado__item--blanco"></div>
  <div class="teclado__item teclado__item--negro"></div>
  <div class="teclado__item teclado__item--blanco"></div>
</div>

Puede jugar cambiando los valores de --tecla-width y --tecla-height a los valores que quiera. No se descuadrará.

Por ejemplo:

.teclado {
    --tecla-width: 130px;
    --tecla-height: 100vh;
}

Además, de agregar las teclas que quiera:

<div class="teclado">
    <div class="teclado__item teclado__item--blanco"></div>
    <div class="teclado__item teclado__item--negro"></div>
    <div class="teclado__item teclado__item--blanco"></div>
    ...
</div>

Tampoco se va a distorsionar, a menos, que utilice un navegador que no soporte las cajas flexibles o propiedades CSS personalizadas, así como la función calc().

Actualización

Hice un revisión del código que tienes en CodePen y he observado que tiene la misma estructura HTML que la publicada acá. Esto me lleva a explicar en esta actualización dónde se encuentraron los problemas que evitan que visualice como se desea.

En esta actualización se enumeran los siguientes problemas encontrados, las cuales se explican a continuación:

  • La regla .lienzo {}. En este caso, es preferible dejar que las proporciones sean automáticas (eliminando las propiedades width y height) con anchuras máximas. Por ejemplo:

    .lienzo {
        ...
        /* Puede establecer su anchura máxima */
        max-width: 1024px; 
    
        /* Lo puedes agregar si lo quieres centrar horizontalmente */
        margin: 0 auto;
    }
    
  • En la regla .teclado {} se deben eliminar las siguientes propiedades:

    .teclado {
        ...
    
        /* Estas deben ser eliminadas: */
        height: var(--tecla-height);
        width: var(--tecla-width);
    }
    

    Porque provoca que el contenedor de las teclas sea menor que el conjunto de teclas que se encuentran en él. Las razones se encuentran en sus valores establecidos (de allí su necesaria eliminación).

  • Agregar en la regla tecla--negra {} las siguientes propiedades:

    .tecla--negra {
      ...
    
      margin-left: calc(var(--tecla-width) / 4 * (-1));
      margin-right: calc(var(--tecla-width) / 4 * (-1));
    
      /* Además de agregar */
      z-index: 1;
    }
    

    Las dos primeras propiedades se agregan para acomodar horizontalmente las teclas negras respecto a las teclas blancas y z-index: 1 para evitar que las teclas blancas se encaramen sobre las teclas negras.

5
  • Hola , muchas gracias por tu respuesta , veo que tu respuesta funciona para tu caso , pero para el mío aún sigue sin funcionar y no sé por qué. Si tienes un momento y puedes revisar mi codepen codepen.io/jejelul/pen/vYXJKbz
    – pighfs
    Commented el 20 dic. 2020 a las 17:47
  • Hola @pighfs. Ya lo reviso. Commented el 20 dic. 2020 a las 17:51
  • @pighfs, acabo de revisar todo el código que tienes en CodePen. He observado que el código tienes exactamente la misma estructura HTML que coloqué en esta respuesta. Sin embargo, corregí el problema y marqué donde las tenías para colocarlas acá. En un rato actualizo la respuesta. De todas formas, agrega el fragmento de código HTML donde se ubica el <div class="teclado"></div> a tu pregunta mientras te actualizo la respuesta acá. Commented el 20 dic. 2020 a las 18:23
  • De acuerdo muchas gracias
    – pighfs
    Commented el 20 dic. 2020 a las 18:27
  • 1
    @pighfsm ya actualicé la respuesta con las recomendaciones que debes seguir para corregir el problema. Recuerda compartir la estructura HTML que empieza en <div class="teclado">...</div> en el área de preguntas para completarla. Commented el 20 dic. 2020 a las 19:05
1

Como dije en el comentario te recomiendo hacer las teclas blancas del tamaño de la tecla blanca + tecla negra y luego poner la tecla arriba con position absolute , aqui un ejemplo (No puedo ver el valor de tus variables asi que use porcentajes, tu cambialo a lo que necesites:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: wheat;
}
.teclado {
  border: 2px solid red;
  height: 40vh;
  width: 60%;
  display: flex;
}

.c,
.d,
.e,
.f {
  border: 2px solid blue;
  width: 25%;
  background: white;
  position: relative;
}

.c-black,
.d-black,
.f-black {
  background: black;
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 80%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<div class="container">
    <div class="teclado">
        <div class="c">
            <div class="c-black"></div>
        </div>
        <div class="d">
            <div class="d-black"></div>
        </div>
        <div class="e"></div>
        <div class="f">
            <div class="f-black"></div>
        </div>
    </div>
</div>
</body>
</html>

1
  • 2
    Esto no ha solucionado elproblema , lo siento
    – pighfs
    Commented el 20 dic. 2020 a las 8:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.