Fix black keys in a virtual piano - css problem

1

Hi

I created this virtual piano:

Screenshot_2020-06-04 Virtual Piano
Screenshot_2020-06-04 Virtual Piano2148×1261 331 KB

I wish the black keys were longer and the keys were closer to each other.

P.S. Feel free of suggestions or criticisms about the code :slight_smile:

I post my codes:

-CSS

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

body{
background-size: 100%;
background-image: url("images/michal-czyz-sGS3O-aqffk-unsplash.jpg");
}


.piano{
display: flex;
flex: 8;
justify-content: center;
padding: 1%;
}

.note{
flex: 1;
display: inline-flex;
align-items: center;
}
.key-up{

flex: 1;
display: inline-flex;
align-items: center;
width: 250px;
height: 500px;
font-family: 'Cutive', serif;
font-weight: 700;
font-size: 90px;
border: 2px solid;
animation: anime 5s infinite;
}

.key-bottom{
display: flex;
flex-flow: column;
justify-content: center;
position: relative;
margin: 0 -4%;
width: 0px;
height: 150px;
background-color: black;
border: 1px solid black;
animation: anime 5s infinite;
}

u/keyframes anime {
10%{border-color: #080808;}
30%{border-color: #2b2b2b;}
70% {border-color: #c7c7c7;}
100%{border-color: #e9e9e9;}
}

-HTML

<!DOCTYPE html>
<html>
<head>
  <title>Virtual Piano</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Cutive&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="piano">
      <kbd class="note key-up">A</kbd>
      <div class="note key-bottom">w</div>
      <kbd class="note key-up">S</kbd>
      <div class="note key-bottom">e</div>
      <kbd class="note key-up">D</kbd>
      <div class="note key-bottom">r</div>
      <kbd class="note key-up">F</kbd>
      <kbd class="note key-up">G</kbd>
      <div class="note key-bottom">u</div>
      <kbd class="note key-up">H</kbd>
      <div class="note key-bottom">i</div>
      <kbd class="note key-up">J</kbd>

    </div>
    </body>
</html>

Thanks

2

It looks like you already have a height property on the keys - try making that larger for longer keys.

To make the keys closer together, you could change the width you currently have on the keys to min-width. This way the keys won’t go smaller than this amount. Start with 160px, feel free to change as you’d like! You could also try adjusting the flex property to have the keys span various widths.

One thing that might be nice is to center the letter on the keys. Since you already have a display: inline-flex on the keys, try adding a justify-content: center;

1 Like