Мелочь, а приятно

Несмотря на то, что я предпочитаю использовать при разработке интерфейсов только Semantic UI, так получилось, что один из клиентских проектов поднимаю на Bootstrap. В обоих этих фреймворках есть одна раздражающая вещь — кнопки там по умолчанию выполнены абсолютно плоскими.

Позволю себе потратить немного букв на объяснение, почему кнопки не должны быть плоскими.

Для начала, откуда такое вообще появилось? Это идиотский тренд, который начал набирать обороты в начале десятилетия и к его окончанию, к счастью, понемногу уходит. Напомню, сами по себе тренды никакой практической нагрузки не несут — их суть заключается в том, что кто-то сделал оригинальное решение (причём необязательно удачное), а другие, как обезьяны, начинают повторять за ним. И никто не может, конечно, пояснить, зачем он так делает. Фраза «чтобы как у всех» за объяснение не считается, в большинстве случаев это расписка в собственной немощности.

Почему кнопки должны быть объёмными? Потому что в ином случае их иногда становится трудно отличить от других элементов интерфейса. Если элемент нажимается, то своим видом он должен намекать на эту возможность. Это не значит, что надо совсем уж ударяться в скевоморфизм (хотя почему бы и нет?), но необходимо облегчать восприятие интерфейса для пользователя, давать ему вот такие маленькие подсказки.

Облегчение восприятия ≠ упрощение, как нам это сейчас пытаются подать.

В Semantic UI сделать кнопки объёмными несложно — достаточно выставить для них в конфигурации тему 'classic' и пересобрать фреймворк.

В Bootstrap такой возможности нет. Что делать? Естественно, мастерить костыль. К счастью, есть способ сделать его максимально коротким и легко отключаемым — это будет лишь блок CSS-кода, который не затрагивает ничего, кроме кнопок, и никак не способен испортить их вид. Можете считать это хаком, но когда я задался вопросом, как наложить градиент на все кнопки сразу и с минимальными затратами времени, то в голову тут же пришло решение с background-image. Нет, мы не будем возвращаться в 2004 год и рисовать PNG-файлы — воспользуемся «инлайновым» svg, подключенным через псевдо-протокол data.

.btn
 {
    background-size:contain;
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" > <defs> <linearGradient id="lgrad" x1="50%" y1="100%" x2="50%" y2="0%" > <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0.07" /> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0.2" /> </linearGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)"/> </svg>');
 }

Грязновато? Есть немного, зато всего два CSS-атрибута. Как это выглядит в итоге:

Загрузка...