—»     —»   Создаем кнопки посредством CSS3
  Раздел: Кнопки   Нет комментариев  

Создаем кнопки посредством CSS3



CSS3, по сути, является расширенным продолжением CSS2, с которым многие знакомы. CSS3 уже поддерживается в современных браузерах (Firefox 3.5, Safari 4 и Chrome). В этой статье мы начнем с применения CSS3 к тому, что абсолютно все используют при разработке сайтов – к кнопкам.

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

Этап 1: Суперкрутая кнопка!

Давайте считать, что именно в этой статье мы будем создавать на самом деле суперские кнопки. Для начала, кратко пробежимся по технике разработки, а затем рассмотрим все подробнее, попутно справляясь с возникающими проблемами.

Применение RGBa и Box-Shadow

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

Создаем кнопки посредством CSS3

RGBa работает по стандарту модель RGB (например, для получения белого цвета, нужно ввести 255, 255, 255), но кроме этого наделена еще четырьмя параметрами – смешивание с фоном (alpha), уровень прозрачности, и канал. На кнопках, которые вы видите выше, серая тень, которую мы используем для белого фона, чересчур светлая для черного фона. Однако, с помощью RGBa, мы можем создать прозрачную черную тень, что позволяет теням работать с любым типом фона:

Создаем кнопки посредством CSS3

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

Вот и все! Наш набор разных кнопок работает во всех браузерах (несмотря на некоторые отличия) и смогут привлечь к себе внимание. Дальше мы расскажем о том, как применить CSS3, чтобы сделать наши кнопки более привлекательными.

Посмотреть демо

Создаем кнопки посредством CSS3

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

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

Этап 2: Радиоактивные кнопки

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

Создаем кнопки посредством 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.

- Посмотреть демо

Создаем кнопки посредством CSS3

Посмотрите демо радиоактивных кнопок на той же игровой площадке. Для большего эффекта, проверяйте из в Safari 4; радиоактивные кнопки используют специфические параметры Webkit-, которые пока что плохо поддерживаются в Chrome.

Красивые, простые, дружелюбные кнопки в стиле Google

Наш последний пример основан на вдохновении последними обновлениями, которые произошли на самой посещаемой в мире странице – поисковой системе Google. Вдобавок к увеличению строки поиска и размера текста, команда Google также разработала новые кнопки для браузеров, работающих с Webkit- (в особенности для их собственного – Chrome).

Эти кнопки объединяют в себе все, о чем мы говорили в данной статье, и все они не лишены основной задумки – Никакого использования изображений. Google использовали новый параметр под названием «-webkit-gradient» для создания эффекта градации посредством CSS.

Создаем кнопки посредством CSS3

Применение градации 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, без применения каких-либо изображений.

- Посмотреть демо

Создаем кнопки посредством CSS3

Вы можете посмотреть демо таких кнопок все на той же площадке, или же просто открыть страницу Google через соответствующие Webkit браузеры.

В последующих статьях мы расскажем вам не только о том, как быстро и легко применять CSS3, но и о том как разрабатывать собственные впечатляющих и захватывающие визуальные эффекты.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, кнопки
Опубликовал Mysterious Master   Прочитано (раз): 15651   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Табло курсов валют
Тепловое оборудование. Рекламные поставки.
ledtex.ru
Сохранить зелень свежей
сохранить зелень свежей
emmapak.ru
Болид
болид
fobos-m.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31