Вообще, призывы к каким-либо действиям очень необходимы каждому веб-сайту, а привлекающие внимание кнопки в самый раз могут подойти к выполнению данной задачи. В прошлом, для создания красивой и хорошей кнопки требовалось много дополнительной верстки, изображений и так далее. А сегодня мы с радостью расскажем вам о том, как сделать отличную кнопку, не прибегая к этим старомодным методам.
Этап 1: Суперкрутая кнопка!
Давайте считать, что именно в этой статье мы будем создавать на самом деле суперские кнопки. Для начала, кратко пробежимся по технике разработки, а затем рассмотрим все подробнее, попутно справляясь с возникающими проблемами.
Применение RGBa и Box-Shadow
Когда мы решили создать комплект универсальных кнопок, нам пришлось решать проблему, которая заключалась в отображении тени, основанной на HEX-данных на разных фонах. Как вы видите ниже, мы можем применить box-shadow для создания теней, но они не будут работать сразу и на белом и на черном фоне. В обход этой проблемы мы применили модель RGBa, которая доступна в новых браузерах.
RGBa работает по стандарту модель RGB (например, для получения белого цвета, нужно ввести 255, 255, 255), но кроме этого наделена еще четырьмя параметрами – смешивание с фоном (alpha), уровень прозрачности, и канал. На кнопках, которые вы видите выше, серая тень, которую мы используем для белого фона, чересчур светлая для черного фона. Однако, с помощью RGBa, мы можем создать прозрачную черную тень, что позволяет теням работать с любым типом фона:
button.awesome, .button.awesome {
…
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
…
}Это решает нашу проблему с box-shadow. Все что нам осталось, так это подправить параметры CSS и сделать простое PNG-наложение. Это и будет завершающим этапом в создании стильной кнопки, цвет, фон и другие параметры которой можно будет изменить в любое время.
Удивительный border-radius
Разработка объектов с закругленными краями – это по-настоящему беда в мире Web в наши дни. В конечном счете доминируют прямоугольники. CSS3 значительно облегчает наши жизни тем, что позволяет воспользоваться легким способом создания объектов с закругленными углами без применения надоедливых махинаций с фоном. Говоря конкретно об этих кнопках, мы используем стандартный цвет фона и PNG-наложение, тем самым придавая глубину. Нам не нужно использовать фоновое изображение для того, чтобы реализовать закругленные углы.
button.awesome, .button.awesome {
…
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
…
}На сегодняшний день, в Safari, Chrome, и Firefox существует небольшое различие в поддержке использования параметра border-radius. Заключается оно в том, что в Safari и Chrome параметр будет охватывать функциональные элементы (как, например, изображения), а Firefox это игнорирует. Тем не менее, все браузеры достаточно чисто воспроизводят параметр наложения маскируя фоновое изображение или цвет, или же и то и то ,(как в ситуации с нашими кнопками).
Если вы приглядитесь, то можете заметить, что границы на пиксельном уровне выглядят немного странно. Но с другой стороны, border-radius – это лучший способ создания закругленных углов в вашем дизайне. Вот конечный CSS-код кнопок:
button.awesome, .button.awesome {
…
background: #222 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
…
}Последние штрихи
Как вы можете видеть выше, мы сделали стандартные кнопки, но здесь суть в том, что для их создания мы не прибегали к использованию изображений, и мы можем использовать любой цвет, который пожелаем, и посредством простых классов, мы можем создать целый набор разных кнопок, которые можно применить в любой момент. Такой метод отлично подойдет для создания сета многократно используемых кнопок, применяемых в дизайне сайта. Дальше посмотрите на коды для цветов:
.blue.awesome {
background-color: #2daebf;
}
.red.awesome {
background-color: #e33100;
}
.magenta.awesome {
background-color: #a9014b;
}
.orange.awesome {
background-color: #ff5c00;
}
.yellow.awesome {
background-color: #ffb515;
}Простые заданные классы позволяют нам быстро обратиться к той или иной кнопке, для ее дальнейшего применения. Мы использовали похожие методы с теми кнопками, которые мы рассмотрим далее.
Заключительной ступенью является масштабирование. Размеры нашей кнопки ограничены только размером поверхностного изображения (а в будущем не будет даже и этого ограничения). Мы используем несколько классов (маленький, средний и большой) для создания разных размеров для различных ситуаций.
Кнопки различного размера:
Вот и все! Наш набор разных кнопок работает во всех браузерах (несмотря на некоторые отличия) и смогут привлечь к себе внимание. Дальше мы расскажем о том, как применить CSS3, чтобы сделать наши кнопки более привлекательными.
Посмотреть демо
Мы сделали демо-страницу для этих кнопок. Оно представляет собой игровую площадку, на которой мы создаем маленькие сторонние проекты и игрушки. Мы и дальше будем ссылаться на эту площадку по ходу статьи.
Немного о совместимости: по правде говоря, IE8 не поддерживает border-radius. На сайте ZURB была использована интересная парадигма, а углы все равно отображаются квадратно. Из нашего опыта мы выяснили, что такие элементы не стоят дополнительных разработок, поэтому нужно стараться применять это методы так, чтобы не навредить общей красоте дизайна, в случае чего. И такие кнопки тоже не исключение: на них по-прежнему можно нажать и в IE, разве что они выглядят уже не так привлекательно.
Этап 2: Радиоактивные кнопки
Вот мы и промочили ноги на CSS3, теперь следует пойти в другом направлении. Для одного из проектов заказчика нам требовалось создать привлекательную и красивую область, побуждающую к какому-либо действию. Мы решили реализовать ее в виде радиоактивной кнопки, которая способна привлечь внимание.
Безвкусица? Ну, разве что немного. Но даже несмотря на его непрактичность для некоторых проектов и клиентов, эффект «WOW!» - чувство, когда человек попадает на вашу страницу и не может сдержать восхищение, вряд ли будет игнорирован. И так, благодаря некоторым трюкам, о которых мы уже рассказали (и одному, которых мы не охватывали), мы может продвинуться дальше за пределы тэга поднадоевшего эффекта блика и рассмотреть новый ряд возможностей анимации посредством CSS.
Анимация: не требуется javascript
Секрет радиоактивных кнопок заключается в новом параметре CSS3, под названием animation (или же -webkit-animation и -moz-animation). Наши радиоактивные кнопки структурно и стилистически идентичны с теми, что мы рассматривали в первом этапе, но есть одно но. Вместо статичного drop-shadow, мы применили box-shadow для создания свечения вокруг кнопки. После того, как мы добавили светящуюся тень, следующим этапом будет применение анимации CSS3 для ее затемнения и осветления.
Создание анимации
Первым этапом создания потрясающего эффекта нашей радиоактивной кнопки является редактирование существующих параметров CSS для создания повременного события.
@-webkit-keyframes greenPulse
{
from {
background-color: #749a02;
-webkit-box-shadow: 0 0 9px #333;
}
50% {
background-color: #91bd09;
-webkit-box-shadow: 0 0 18px #91bd09;
}
to {
background-color: #749a02;
-webkit-box-shadow: 0 0 9px #333;
}
}Вот так работает данный код:
* @-webkit-keyframes говорит браузеру, что мы определяем анимацию, основывающуюся на кадрах, или же на значениях, на которые должны смениться параметры. Тогда браузер создает плавный переход между этими кадрами.
* greenPulse – это название анимации. Далее нам придется состыковать это с объектами.
* from { … } определяет исходную точку анимации; в нашем случае, конкретный цвет фона для кнопки, и цвет для box-shadow (тот, который сливается с фоном)
* 50% { … } означает, что на половине процесса анимации происходит одно изменение.
* to { … } определяет последний кадр анимации. Учтите, что анимация всегда возвращается к первому кадру, она не останавливается на последнем. Это означает, что плавная анимация должна начинаться и заканчиваться с одинаковыми параметрами.
Итак, с анимацией мы закончили. Объект подвергается изменениям цвета в box-shadow на зеленый, а затем обратно на серый. Теперь нам просто нужно привести это в действие, применив анимацию к нашим кнопкам.
.green.button {
…
-webkit-animation-name: greenPulse
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
…
}Круто, не правда ли? -webkit-animation можно применять во многих случаях, а если еще комбинировать его с некоторыми простыми значениями javascript (например – onclick), то можно создавать отличные эффекты, даже без обращения к сторонним библиотекам javascript.
- Посмотреть демо
Посмотрите демо радиоактивных кнопок на той же игровой площадке. Для большего эффекта, проверяйте из в Safari 4; радиоактивные кнопки используют специфические параметры Webkit-, которые пока что плохо поддерживаются в Chrome.
Красивые, простые, дружелюбные кнопки в стиле Google
Наш последний пример основан на вдохновении последними обновлениями, которые произошли на самой посещаемой в мире странице – поисковой системе Google. Вдобавок к увеличению строки поиска и размера текста, команда Google также разработала новые кнопки для браузеров, работающих с Webkit- (в особенности для их собственного – Chrome).
Эти кнопки объединяют в себе все, о чем мы говорили в данной статье, и все они не лишены основной задумки – Никакого использования изображений. Google использовали новый параметр под названием «-webkit-gradient» для создания эффекта градации посредством CSS.
Применение градации CSS
Градации посредством CSS хороши тем, что являются функцией CSS (так же как и url() ), что означает, что мы можем использовать градации везде, где раньше для этого использовались изображения, включая фон и границы (не беспокойтесь, об изображениях в роли границ мы поговорим в наших следующих статьях). В чем заключается работа градаций:
.g-button {
…
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227)));
…
}Давайте разберем подробнее:
* linear означает, что градация будет линейной, а не радиальная.
* 0% 0%, 0% 100% - это координаты. Т.е., мы указывает то, что градация начинается от 0% X и 0% Y, а заканчивается 0% X и 100% Y: от верхнего левого угла к нижнему левому углу. Мы не можем использовать значения top-left и bottom-left.
* from(rgb(255, 255, 255)) – это начальное значения цвета градации.
* to(rgb(221, 221, 221)) – это конечное значение цвета градации. Так как мы используем RGB-значения для указания цвета, вы можете видеть, какие интересные градации можно создавать. А также есть возможность указания уровня прозрачности градации.
Остальные значения кнопки обычные: padding, border-radius и все остальное. Градации здесь нечто вроде звезд и имеют достаточно обширное применение. Итак, мы создали (по примеру Google) красивые и привлекательные кнопки, на 100% с использованием CSS, без применения каких-либо изображений.
- Посмотреть демо
Вы можете посмотреть демо таких кнопок все на той же площадке, или же просто открыть страницу Google через соответствующие Webkit браузеры.
В последующих статьях мы расскажем вам не только о том, как быстро и легко применять CSS3, но и о том как разрабатывать собственные впечатляющих и захватывающие визуальные эффекты.
