Супер классные 3D кнопки CSS3 (10 цветов) | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSСупер классные 3D кнопки CSS3 (10 цветов)
Дата: 14.04.2013 в 23:44 | Просмотров: 3685

Супер классные 3D кнопки CSS3 (10 цветов)

Супер классные 3D кнопки CSS3 (10 цветов)
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня мы будем делать CSS3 кнопки! Они основаны на популярном PSD макете  Орман Кларка, которые он сделал для своего веб-сайта. Мы постараемся сделать копию этих CSS кнопок.

Структура HTML документа

Мы начнем с создания нового HTML документа.
Для того, чтобы задать ему стили CSS, мы даем списку класс buttons. И так как мы собираемся создать кнопки всех цветов Ормана, используемые в его конструкции, мы зададим для каждой кнопки свой класс.

Это все, что нам нужно на данный момент, и наша работа над HTML завершена!
Вот как это будет выглядеть в браузере на данный момент:
HTML разметка кнопок без CSS

Некоторые основные стили CSS

Прежде чем мы начнем со стилей, таких как градиенты, закругление углов и т.д., мы в первую очередь применим некоторые основные стили. Ничего сложного здесь нет, просто обычные CSS2 стили.

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

Если Вы сделали все правильно, то у Вас должно получиться что-то вроде этого:
10 цветов 3d кнопок

Границы кнопок

Теперь, если хорошо осмотреть исходный PSD файл кнопок, вы заметите, что там есть не только толстая линия внизу кнопки, но и более тонкая обводка по всему периметру, и небольшая линия между толстой части и фактической границей. Чтобы осуществить это в CSS, мы будем использовать трюк CSS2 – псевдо-элементы :after и :before.

Кнопки начинают хорошо выглядеть, когда мы добавляем правильные цвета! :)

10 цветов 3d кнопок

Добавление CSS3

Теперь то, что вы, ребята, все ждали – стили CSS3. Начнем с того, что добавим закругление углов для наших кнопок:

И тогда, конечно, наши :after и :before элементы также должны иметь закругление. Однако :before элемент не должен иметь верхние закругленные углы потому, что отображение будет неправильным. Для :before в самом низу мы добавим тень.

И наконец, применим градиент, внутреннюю тень и некоторые тени текста. Мы добавим :visited, чтобы предотвратить ошибки в IE6.

И вот что мы имеем. Неплохо, правда?
10 цветов 3d кнопок

Мы ничего не забыли?

На самом там есть ещё кое-что, что нужно сделать; Орман сделал также дизайн кнопки в активном состоянии или при нажатии. Поэтому, конечно, мы добавим, это в наши стили CSS!
Мы поместим код для активного состояния для всех кнопок один, так как он одинаковый. Первое различие с предыдущими стилями кнопки это то, что она не имеет обводки. Она также расположена немного ниже, то есть без нижнего отступа. И мы должны использовать 2 функции тени вместо одного: обычный белый и второй, внутренний, который будет прозрачным. И наконец, нам больше не нужны псевдо-элементы :after и :before.

Ну вот, видим как они будут выглядеть в активном состоянии то есть при нажатии:
10 цветов 3d кнопок

Работа кнопки в старых браузерах

Итак мы создали хорошие CSS3 кнопки, которые работают во всех современных браузерах. Но как насчет Internet Explorer, например? IE8 и ниже не поддерживают тень текста или градиент.
Для того, чтобы красиво отображать их для этих браузеров, мы могли бы использовать Modernizr, библиотека JavaScript, которая проверяет может ли браузер пользователя обрабатывать CSS3 и HTML5 свойства. Если нет, то мы просто добавляем альтернативные стили. Например, мы просто будем использовать изображение для старых браузеров.
Сначала мы создаем наш Modernizr. Сделать это можно, на их сайте. Когда мы подключили JavaScript к HTML файлу, нужно всего лишь определить альтернативные стили для конкретного HTML класса. Мы собираемся использовать изображение для браузеров, которые не поддерживают наиболее важные CSS3 эффекты, которые мы использовали – это скругление углов, CSS градиент. И так как некоторые старые браузеры не поддерживают даже :before и :after, мы отметим следующее.

Для повышения производительности мы используем CSS Sprite, изображение кнопок при наведения и при нажатии. Класс :visited всё ещё используем, чтобы предотвратить ошибки IE6.

Заключение

Итак, теперь у нас есть кросс-браузерные 3D кнопки для сайта! Вы, вероятно, думаете, что это очень много кода для 10 3D кнопок, но, конечно, это лишь демонстрация того, что вы можете или не можете сделать с CSS3. Вы вольны делать с ними, все что хотите!
Я надеюсь, что вам понравилось, спасибо за чтение!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://webdesign.tutsplus.com
Перевел: Владислав Бондаренко


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