- PVSM.RU - https://www.pvsm.ru -
Привет, всем!
Пытливость ума (да и не только) заставляет искать новые и лучшее решения в том или ином направлении. Это и привело меня на страницы блога некого @simurai [1]. Возможно, кто-то уже знаком с наработками товарища «Самурая [2]», с остальными же хочу просто поделиться интересными идеями псевдо-японского [3] гуру. В этой статье хочу рассмотреть один из его проектов: BonBon — Sweet CSS3 Buttons [4] (по желанию читателей, другие работы автора будут преданы вниманию в последующих статьях). Начальная цель: создание CSS-кнопок, которые приятно смотрятся, имеют гибкую настройку, и в это же время будут иметь максимально простую разметку.
Автор старался вложить в идею максимальную простоту в использовании, без «многабукав»; элементарный пример финальной реализации (Demo [5]):
<a href="#" class="button">Label</a>
Также Вы можете изменить внешний вид за счет добавления к кнопке парочки классов, например: оранжевую окраску и глянцевый блеск (Demo [5]):
<a href="#" class="button orange glossy">Label</a>
Если вы хотите добавить иконку, для большей ассоциативности веб-элемента, вы можете использовать HTML5-атрибут, наподобие этого: data-icon=«S». Это позволяет использовать Unicode-символы [6], иконочные шрифты [7] и многие др.
.button:before {
content: attr(data-icon);
}
Данный CSS-код добавляет иконку перед содержимым кнопки, что позволяет сохранить семантическую разметку и изменять иконки, без редактирования CSS-стилей (Demo [8]):
<a href="" class="button orange glossy" data-icon="✈"> Label</ a>
Если добавить к нашим кнопкам атрибут role=”button” и использовать TabIndex, мы можем делать их активными и выделять поочередно. Или же — если вы используете тег , вы можете применять атрибут «disabled» для блокирования кнопки от нажатий (Demo [9]).
Автор пытался избежать использования каких-либо изображений при верстке, но как он сам пишет — «не удержался» и добавил PNG-картинку — для шума. Остальное же все — представляет собой сочетание элементов CSS3: text-shadows, box-shadows, gradients и borders. Это позволяет легко изменять размеры кнопок, сохраняя их начальный вид, пропорции и четкость, при этом не теряя возможности изменять их форму: morphing (Demo [10]).
Border-radius – не всегда должен быть круглым, мы его может выгнуть в более овальную форму, используя дополнительный набор точек, прописывая его через "/"
border-radius: 5em / 2em;
border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;
Я пытался имитировать различные материалы: "матовые", "глянцевые" и "стекло". Результаты вы можете оценить сами (Demo [11]):
Глянцевая форма создается с помощью селектора :after с градиентом фона на вершине
Ради фокуса, можно попробовать применить HTML5-атрибут contenteditable=«true», в результате чего получаем забавную редактируемую кнопку (Demo [11]):
Все выше описанные эксперименты, можно представить в виде такого вот «мануального» списка (здесь все дополнительные имена классов, с которыми вы можете поиграть самостоятельно, использую Firebug или другую оснастку):
Данный материал — это всего лишь демо-версия, которая не предназначена для использования на рабочих проектах. Не все браузеры поддерживают данное решение. Целью разработки было — показать пару методов по использованию некоторые из новых функций CSS3/HTML5
© simurai
Demo: lab.simurai.com/buttons/ [4]
Author: simurai.com [1]
Source: github.com/simurai [12]
Как итог предлагаю обсудить концепт в принципе: предложения по улучшению, замечания по недостаткам, конструктивная критика (без «а чем bootstrap не угодил ....»).
Также, прошу голосовать… Спасибо.
Автор: vnDeveloper
Источник [14]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css3/26259
Ссылки в тексте:
[1] @simurai: http://simurai.com/
[2] Самурая: http://lab.simurai.com/
[3] псевдо-японского: http://simurai.com/about
[4] BonBon — Sweet CSS3 Buttons: http://lab.simurai.com/buttons/
[5] Demo: http://lab.simurai.com/buttons/#markup
[6] Unicode-символы: http://panmental.de/symbols/info.htm
[7] иконочные шрифты: http://fontello.com/
[8] Demo: http://lab.simurai.com/buttons/#icons
[9] Demo: http://lab.simurai.com/buttons/#accessibility
[10] Demo: http://lab.simurai.com/buttons/#looks
[11] Demo: http://lab.simurai.com/buttons/#material
[12] github.com/simurai: https://github.com/simurai/lab/tree/gh-pages/buttons
[13] Войдите: https://www.pvsm.ru/login/
[14] Источник: http://habrahabr.ru/post/168117/
Нажмите здесь для печати.