При описании вызова той или иной функции, часто требуется указать, какой именно пункт меню необходимо нажимать.
Например на странице LibreOffice указана следующая последовательность:
Меню -> Сервис -> Макросы -> Управление макросами -> Python…
Я решил сделать нечто похожее.
Код HTML:
<span class="menuitem">Меню</span>Оригинальный код CSS:
.menuitem {
background-image: linear-gradient(180deg,rgba(174,207,247,0.05) 0,rgba(174,207,247,0.2) 100%);
border-radius: 2px;
padding: 0 3px;
box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.6),0 0 0 1px rgb(174,207,247);
white-space: nowrap;
}Здесь рамка (граница) элемента отрисовывается с помощью эффекта теней, где-то я видел, что по производительности это ниже, чем создание этого же эффекта с помощью явного задания свойства border. К тому же эффект теней поддерживается не всеми клиентами.
В связи с замечанием выше, я немного подправлю код CSS…
.menuitem {
background: rgba(174,207,247,0.2);
border-radius: 2px;
padding: 0 3px;
border: 1px solid #aecff7;
white-space: nowrap;
}Осталось добавить вышестоящий код в файл style.css дочерней темы.
Таким образом, первоначальный пример будет такой:
-> -> -> ->
DenTNT недавно публиковал (посмотреть все)
- Не приходит СМС для авторизации на сайте Госуслуги - 01.11.2024
- VSCode: Найти и удалить элементы xml - 29.10.2024
- WordPress: Ошибка в плагине WpDiscuz - 08.10.2024