Я хочу воссоздать клавиатуру калькулятора с css - PullRequest
Новая
       32

Я хочу воссоздать клавиатуру калькулятора с css

0 голосов
/ 26 марта 2020

Я хотел воссоздать этот калькулятор в css: Калькулятор

Но я могу сделать эти квадратные разделители вокруг кнопок. Я пытался создать div вокруг кнопки, но, похоже, он не работает, поскольку клавиатура переворачивается с места

JSBin 

  <div id="calculator">

    <div class="output">
      <p>1234</p>
    </div>

    <div class="squareborder">
      <button class="minus">c</button>
    </div>
    <button class="minus">cm</button>
    <button class="equal">%</button>
    <button class="equal">rm</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button class="equal">÷</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button class="equal">x</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="minus">-</button>
    <button>0</button>
    <button>•</button>
    <button class="equal">=</button>
    <button class="plus">+</button>
  </div>
</body>
</html>

1 Ответ

0 голосов
/ 27 марта 2020

Конечно, есть несколько способов сделать это, но так я бы это сделал ...

  • обернуть каждую строку кнопок в элемент <div class="row">, чтобы применить flex
  • Оберните каждую кнопку в <span class="squareborder"> элемент для border
  • стиля squareborder с box-shadow для глубины

Мне также пришлось поиграть с CSS немного, но ничего особенного!

Кстати ... ваш калькулятор очень приятный, хороший помощник ? 

#calculator {
  background-color: #918764;
  width: 12.5em;
  padding: 2em 0 0.8em;
}

.output {
  box-shadow: inset 0 1.6em rgba(255, 255, 255, 0.1);
  font-family: 'Krona One', sans-serif;
  font-size: 10pt;
  background-color: #3d0000;
  color: #e8001f;
  width: 13em;
  padding: 0 0.7em;
  display: flex;
  justify-content: flex-end;
  align-content: center;
  margin: 0 auto 0.3em;
  border: none;
  border-radius: 0.3em;
}

button {
  font-family: 'Krona One', sans-serif;
  background-color: #988d6d;
  color: #fffde7;
  border: none;
  width: 2.6em;
  margin: 0.3em;
  padding: 0.7em 0.6em;
  border-radius: 4em;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  cursor: pointer;
}

button.equal {
  background-color: #21302b
}

button.plus {
  background-color: #21302b;
  color: #2ea4ee;
}

button.minus {
  background-color: #21302b;
  color: #89734e;
}

.row {
  display: flex;
  justify-content: center;
}

.squareborder {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.4);
  border-radius: 0.2em;
  margin: 1px;
  padding: 2px
}
<link href="https://fonts.googleapis.com/css?family=Krona+One&display=swap" rel="stylesheet">

<div id="calculator">

  <div class="output">
    <p>1234</p>
  </div>

  <div class="row">
    <span class="squareborder">
      <button class="minus">c</button>
    </span>
    <span class="squareborder">
      <button class="minus">cm</button>
    </span>
    <span class="squareborder">
      <button class="equal">%</button>
    </span>
    <span class="squareborder">
      <button class="equal">rm</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>7</button>
    </span>
    <span class="squareborder">
      <button>8</button>
    </span>
    <span class="squareborder">
      <button>9</button>
    </span>
    <span class="squareborder">
      <button class="equal">÷</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>4</button>
    </span>
    <span class="squareborder">
      <button>5</button>
    </span>
    <span class="squareborder">
      <button>6</button>
    </span>
    <span class="squareborder">
      <button class="equal">x</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>1</button>
    </span>
    <span class="squareborder">
      <button>2</button>
    </span>
    <span class="squareborder">
      <button>3</button>
    </span>
    <span class="squareborder">
      <button class="minus">-</button>
    </span>
  </div>

  <div class="row">
    <span class="squareborder">
      <button>0</button>
    </span>
    <span class="squareborder">
      <button>*</button>
    </span>
    <span class="squareborder">
      <button class="equal">=</button>
    </span>
    <span class="squareborder">
      <button class="plus">+</button>
    </span>
  </div>
</div>
...