Имитация клавиш у клавиатуры на CSS

Имитация клавиш у клавиатуры на CSS

Имитация клавиш у клавиатуры на CSS

Используя только CSS, можно нарисовать реалистичные клавиши у клавиатуры. Достигается это с помощью комбинации градиентов и теней.

HTML код

Каждый тег span — это отдельная клавиша у клавиатуры.


<div>
    <span><i>C</i></span>
    <span><i>S</i></span>
    <span><i>S</i></span><br>
    <span><i>o</i></span>
    <span><i>n</i></span>
    <span><i>l</i></span>
    <span><i>y</i></span><br>
    <span><i></i></span>
</div>

Имитация клавиш у клавиатуры на CSS

CSS стилизация

Начнем стилизовать тег span и вы увидите, как легко он превратится в клавишу.


*{
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    box-sizing: border-box;
    font-family: consolas;
}
body {
    display: flex;/*flexbox сетка*/
    justify-content: center;/*горизонтальное выравнивание*/
    align-items: center;/*вертикальное выравнивание*/
    min-height: 100vh;/*растянуть на всю высоту экрана*/
    background: #232323;/*цвет фона*/
}
span {
    position: relative;/*относительное позиционирование*/
    display: inline-block;/*отображать как строчно-блочный элемент*/
    width: 80px;/*ширина клавиши*/
    height: 80px;/*высота клавиши*/
    padding: 8px 15px;/*поля для текста*/
    margin: 8px 4px;/*отступы от клавишей*/
    border-radius: 10px;/*закругления*/
    background: linear-gradient(180deg,#282828,#202020);/*линейный градиент*/
    box-shadow: inset -8px 0 8px rgba(0,0,0,0.15),/*тень*/
    inset 0 -8px 8px rgba(0,0,0,0.25),
    0 0 0 2px rgba(0,0,0,0.75),
    10px 20px 25px rgba(0,0,0,0.4);
    overflow: hidden;
}
span:last-child {
    width: 100%;/*последняя широкая клавиша*/
}
span i {
    position: relative;/*относительное позиционирование*/
    color: #fff;/*цвет текста*/
    font-style: normal;
    font-size: 1.5em;/*размер шрифта*/
    text-transform: uppercase;/*заглавные буквы*/
}

Имитация клавиш у клавиатуры на CSS

Волшебный градиент и тени добавят клавиатуре больше реалистичности. Псевдоэлемент before накидывает на элемент дополнительные свойства, при отсутствии самого элемента в разметке.


span::before {
    content: '';/*обязательно нужно прописывать*/
    position: absolute;/*абсолютное позиционирование*/
    top: 3px;/*позиция сверху*/
    left: 4px;
    bottom: 14px;
    right: 12px;
    background: linear-gradient(90deg,#232323,#4a4a4a);
    border-radius: 10px;
    box-shadow: -10px -10px 10px rgba(255,255,255,0.25),
    10px 5px 10px rgba(0,0,0,0.15);
    border-left: 1px solid #0004;/*сплошная рамка*/
    border-bottom: 1px solid #0004;
    border-top: 1px solid #0009;
}

Имитация клавиш у клавиатуры на CSS

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий