<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Имитация клавиш у клавиатуры на 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.


Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.