Создаем кнопки на CSS3. Шаг 1: Потрясающие кнопки

Хорошо известно, что технология CSS3 — это продолжение CSS2, который мы хорошо знаем и любим.

Стало появлятся все больше браузеров, например, Firefox 3.5 и выше, Safari 4 и Chrome, которые поддерживают новую технологию.

В этой статье мы попробуем применить на практике CSS3 и создадим парочку потрясающих кнопок.

Призывы к действию имеют решающее значение для любого веб-сайта, и, конечно, одними из самых лучших призывов являются красивые и интерактивные кнопки. В прошлом приходилось прибегать к различным хитростям, чтобы кнопки выглядели и работали привлекательно, но сейчас мы создадим хорошие кнопки без хаков и читов.

Шаг1: Супер-потрясающие кнопки

Использование Box-Shadow и RGBa

Наша первая цель, создать универсальное семейство кнопок, чтобы убрать проблемы с HEX цветами теней (drop-shadow), проявляемых при различных фонах (бэкграундах). Как вы можете видеть ниже, мы можем использовать box-shadow, чтобы создать drop-shadow. Но цвет тени не работает и на светлых и на темных фонах.

Исходя из всего этого мы решили использовать цветовую модель, доступную в новых браузерах: RGBa.

RGBa работает, как стандартная RGB модель — 255, 255, 255, например, для белого. Но у нее есть еще и четвертое свойство, которое контролирует альфа-канал, или прозрачность.

В кнопках выше, серая тень, которую мы создали для белого фона, является слишком светлой для темного фона. Используя RGBa, мы можем создать черную тень с прозрачностью. Это позволит использовать ее при различных фонах:

Проблемы с нашим box-shadow решены. Все что осталось, назначить CSS свойства и применить простые PNG наложения, чтобы создать готовые кнопки, которые могут быть любого цвета на любом фоне и которые конечно же будут прекрасно работать.

Удивительные радиусные границы (border-radius)

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

CSS3 сделал нашу жизнь немного легче, путем осуществления простого способа округления объектов без скриптов и не нужных PNG наложений и фонов. Мы используем стандартный цвет фона и наложения PNG, чтобы у кнопок появилась глубина. Мы не используем фоновое изображение для скругления краев.

В настоящее время Webkit (Safari, Chrome) и Firefox имеют различные реализации для радиусных границ. Webkit будет округлять функциональные элементы (например, изображения), в то время как Firefox не будет. Тем не менее, оба браузера достаточно чисто округляют различные объекты и цвета.

Вот полный CSS код для этих кнопок:

Последние штрихи

Как вы можете видеть выше, мы создали стандартные кнопки и не использовали при этом изображений, поэтому мы можем создать кнопку любого цвета и назначить этому оформлению определенный класс и, соответственно, вызывать этот класс когда нужно.

Это очень удобно для создания многоразовых наборов кнопок, которые могут быть адаптированы к вашему сайту или клиентам.
Представляем цветовые коды, что мы использовали:

Наш последний шаг — это размеры кнопок. Без скриптов наши кнопки ограничены только размером изображения наложения. Мы использовали несколько классов (small, medium and large), чтобы создать типоразмеры для различных ситуаций.

Вот оно! Масштабируемые, легко настраиваемые наборы кнопок, которые работают во всех браузерах и которыми очень просто управлять. В следующих шагах мы покажем вам, как можно развить идею таких наборов.

Примечание о совместимости: IE8 верен себе и не поддерживает border-radius. На ZURB мы приняли прагадигму “изящная деградация” , по которой, углы в IE будут по умолчанию квадратными. По нашему опыту, дополнительной разработки для этих элементов не требуется, на производительности IE это не отображается, при этом функциональность остается та же. Эти кнопки кликабельны, но с квадратными углами, что не очень красиво.