BonBon — Sweet CSS3 Buttons

от автора

Привет, всем!

:before

Пытливость ума (да и не только) заставляет искать новые и лучшее решения в том или ином направлении. Это и привело меня на страницы блога некого @simurai. Возможно, кто-то уже знаком с наработками товарища «Самурая», с остальными же хочу просто поделиться интересными идеями псевдо-японского гуру. В этой статье хочу рассмотреть один из его проектов: BonBon — Sweet CSS3 Buttons (по желанию читателей, другие работы автора будут преданы вниманию в последующих статьях). Начальная цель: создание CSS-кнопок, которые приятно смотрятся, имеют гибкую настройку, и в это же время будут иметь максимально простую разметку.

Разметка:

Автор старался вложить в идею максимальную простоту в использовании, без «многабукав»; элементарный пример финальной реализации (Demo):

<a href="#" class="button">Label</a> 

Также Вы можете изменить внешний вид за счет добавления к кнопке парочки классов, например: оранжевую окраску и глянцевый блеск (Demo):

<a href="#" class="button orange glossy">Label</a> 

Иконки:

Если вы хотите добавить иконку, для большей ассоциативности веб-элемента, вы можете использовать HTML5-атрибут, наподобие этого: data-icon=«S». Это позволяет использовать Unicode-символы, иконочные шрифты и многие др.

.button:before {          content: attr(data-icon);  }  

Данный CSS-код добавляет иконку перед содержимым кнопки, что позволяет сохранить семантическую разметку и изменять иконки, без редактирования CSS-стилей (Demo):

<a href="" class="button orange glossy" data-icon="✈"> Label</ a> 

Доступность:

Если добавить к нашим кнопкам атрибут role=”button” и использовать TabIndex, мы можем делать их активными и выделять поочередно. Или же — если вы используете тег , вы можете применять атрибут «disabled» для блокирования кнопки от нажатий (Demo).

Внешний вид:

Автор пытался избежать использования каких-либо изображений при верстке, но как он сам пишет — «не удержался» и добавил PNG-картинку — для шума. Остальное же все — представляет собой сочетание элементов CSS3: text-shadows, box-shadows, gradients и borders. Это позволяет легко изменять размеры кнопок, сохраняя их начальный вид, пропорции и четкость, при этом не теряя возможности изменять их форму: morphing (Demo).

Border-radius – не всегда должен быть круглым, мы его может выгнуть в более овальную форму, используя дополнительный набор точек, прописывая его через "/"

border-radius: 5em / 2em; border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em; 

Я пытался имитировать различные материалы: "матовые", "глянцевые" и "стекло". Результаты вы можете оценить сами (Demo):

Глянцевая форма создается с помощью селектора :after с градиентом фона на вершине

Ради фокуса, можно попробовать применить HTML5-атрибут contenteditable=«true», в результате чего получаем забавную редактируемую кнопку (Demo):

Гибкость:

Все выше описанные эксперименты, можно представить в виде такого вот «мануального» списка (здесь все дополнительные имена классов, с которыми вы можете поиграть самостоятельно, использую Firebug или другую оснастку):

  • Color: orange, pink, blue, green, transparent
  • Font: serif
  • Material: glossy, glass
  • Size: xs, xl
  • Shape: round, oval, brackets, skew, back, knife, shield, drop, morph
  • Icon only: icon
  • Disabled: disabled

:after

Данный материал — это всего лишь демо-версия, которая не предназначена для использования на рабочих проектах. Не все браузеры поддерживают данное решение. Целью разработки было — показать пару методов по использованию некоторые из новых функций CSS3/HTML5

© simurai

Demo: lab.simurai.com/buttons/
Author: simurai.com
Source: github.com/simurai

Как итог предлагаю обсудить концепт в принципе: предложения по улучшению, замечания по недостаткам, конструктивная критика (без «а чем bootstrap не угодил ….»).

Также, прошу голосовать… Спасибо.

Как Вы считаете, стоит ли делать обзоры?

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Никто ещё не голосовал. Воздержавшихся нет.

ссылка на оригинал статьи http://habrahabr.ru/post/168117/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *