Как создать дизайн пользовательского интерфейса клавиатуры с использованием HTML и CSS | How to Make A Keyboard UI Design using HTML and CSS

В этом видео мы создадим дизайн пользовательского интерфейса клавиатуры, используя HTML и CSS. Надеюсь, это видео будет полезным для вас. Если у вас возникли какие-либо трудности при создании этого кода, вы можете скачать готовый исходный код, нажав на кнопку «СКАЧАТЬ».

Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, напишите их в комментариях ниже. Ваши отзывы помогают нам создавать более ценный контент.

HTML КОД:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Keyboard UI Design</title>

    <!--css file-->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="row">
        <button>~</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button>0</button>
        <button>-</button>
        <button>=</button>
        <button class="backspace">Backspace</button>
      </div>
      <div class="row">
        <button class="tab">Tab</button>
        <button>Q</button>
        <button>W</button>
        <button>E</button>
        <button>R</button>
        <button>T</button>
        <button>Y</button>
        <button>U</button>
        <button>I</button>
        <button>O</button>
        <button>P</button>
        <button>[</button>
        <button>]</button>
        <button class="slash">\</button>
      </div>
      <div class="row">
        <button class="caps">Caps lock</button>
        <button>A</button>
        <button>S</button>
        <button>D</button>
        <button>F</button>
        <button>G</button>
        <button>H</button>
        <button>J</button>
        <button>K</button>
        <button>L</button>
        <button>;</button>
        <button>'</button>
        <button class="enter">Enter</button>
      </div>
      <div class="row">
        <button class="shift">Shift</button>
        <button>Z</button>
        <button>X</button>
        <button>C</button>
        <button>V</button>
        <button>B</button>
        <button>N</button>
        <button>M</button>
        <button>,</button>
        <button>.</button>
        <button>/</button>
        <button class="shift">Shift</button>
      </div>
      <div class="row">
        <button>Ctrl</button>
        <button>Fn</button>
        <button>Win</button>
        <button>Alt</button>
        <button class="space">Space</button>
        <button>Alt</button>
        <button>Fn</button>
        <button>Ctrl</button>
      </div>
    </div>
  </body>
</html>

CSS КОД:

* {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(214, 214, 214);
}

.wrapper .row {
  width: 100%;
  height: 60px;
  margin: 10px 0 0 0;
}

.wrapper .row button {
  width: 55px;
  height: 55px;
  background: rgb(214, 214, 214);
  outline: none;
  border: none;
  box-shadow: 5px 5px 10px #474343, -5px -5px 10px #fff;
  border-radius: 20%;
  font-size: 18px;
  color: #000;
  margin-left: 5px;
  cursor: pointer;
}

.wrapper .row button:active {
  box-shadow: 1px 1px 2px #fff8f8, -1px -1px 2px #474343;
}

.row button.backspace {
  width: 115px;
  border-radius: 10px;
}

.row button.tab {
  width: 85px;
  border-radius: 10px;
}

.row button.slash {
  width: 85px;
  border-radius: 10px;
}

.row button.caps {
  width: 100px;
  border-radius: 10px;
}

.row button.enter {
  width: 135px;
  border-radius: 10px;
}

.row button.shift {
  width: 150px;
  border-radius: 10px;
}

.wrapper .row:nth-child(5) button {
  width: 70px;
  border-radius: 10px;
}

.wrapper .row button.space {
  width: 398px;
  border-radius: 10px;
}

0 Комментарии

Подписывайтесь на Boosty и скачивай БЕСПЛАТНО любые файлы и скрипты!!!

🔥 Стать автором на Boosty »