Веб-дизайнеру
Веб-разработчику
Дополнительно
Супер классные 3D кнопки CSS3 (10 цветов)
Скачать
Демо
↓ Также Вам будет интересно ↓
Сегодня мы будем делать CSS3 кнопки! Они основаны на популярном PSD макете Орман Кларка, которые он сделал для своего веб-сайта. Мы постараемся сделать копию этих CSS кнопок.
Структура HTML документа
Мы начнем с создания нового HTML документа.
Для того, чтобы задать ему стили CSS, мы даем списку класс buttons. И так как мы собираемся создать кнопки всех цветов Ормана, используемые в его конструкции, мы зададим для каждой кнопки свой класс.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul id="buttons"> <li><a class="button gray" href="#">Загрузить</a></li> <li><a class="button pink" href="#">Загрузить</a></li> <li><a class="button blue" href="#">Загрузить</a></li> <li><a class="button green" href="#">Загрузить</a></li> <li><a class="button turquoise" href="#">Загрузить</a></li> <li><a class="button black" href="#">Загрузить</a></li> <li><a class="button darkgray" href="#">Загрузить</a></li> <li><a class="button yellow" href="#">Загрузить</a></li> <li><a class="button purple" href="#">Загрузить</a></li> <li><a class="button darkblue" href="#">Загрузить</a></li> </ul> |
Это все, что нам нужно на данный момент, и наша работа над HTML завершена!
Вот как это будет выглядеть в браузере на данный момент:
Некоторые основные стили CSS
Прежде чем мы начнем со стилей, таких как градиенты, закругление углов и т.д., мы в первую очередь применим некоторые основные стили. Ничего сложного здесь нет, просто обычные CSS2 стили.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ul { list-style: none; } a.button { display: block; float: left; position: relative; height: 25px; width: 80px; margin: 0 10px 18px 0; text-decoration: none; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 25px; text-align: center; } |
Мы можем легко изменить цвет кнопки, так как для каждой из них мы добавили классы. В качестве примера, в уроке мы сделаем только серый. Остальные цвета Вы можете увидеть в демо или скачать исходник.
|
1 2 3 4 5 6 7 8 |
/* СЕРЫЙ */ .gray, .gray:hover { color: #555; border-bottom: 4px solid #b2b1b1; background: #eee; } .gray:hover { background: #e2e2e2; } |
Если Вы сделали все правильно, то у Вас должно получиться что-то вроде этого:
Границы кнопок
Теперь, если хорошо осмотреть исходный PSD файл кнопок, вы заметите, что там есть не только толстая линия внизу кнопки, но и более тонкая обводка по всему периметру, и небольшая линия между толстой части и фактической границей. Чтобы осуществить это в CSS, мы будем использовать трюк CSS2 – псевдо-элементы :after и :before.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
a.button { display: block; float: left; position: relative; height: 25px; width: 80px; margin: 0 10px 18px 0; text-decoration: none; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 25px; text-align: center; } a.button:before, a.button:after { content: ''; position: absolute; left: -1px; height: 25px; width: 80px; bottom: -1px; } a.button:before { height: 23px; bottom: -4px; border-top: 0; } |
Кнопки начинают хорошо выглядеть, когда мы добавляем правильные цвета! 
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* СЕРЫЙ */ .gray, .gray:hover { color: #555; border-bottom: 4px solid #b2b1b1; background: #eee; } .gray:before, .gray:after { border: 1px solid #cbcbcb; border-bottom: 1px solid #a5a5a5; } .gray:hover { background: #e2e2e2; } |
Добавление CSS3
Теперь то, что вы, ребята, все ждали – стили CSS3. Начнем с того, что добавим закругление углов для наших кнопок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
a.button { display: block; float: left; position: relative; height: 25px; width: 80px; margin: 0 10px 18px 0; text-decoration: none; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; line-height: 25px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } |
И тогда, конечно, наши :after и :before элементы также должны иметь закругление. Однако :before элемент не должен иметь верхние закругленные углы потому, что отображение будет неправильным. Для :before в самом низу мы добавим тень.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
a.button:before, a.button:after { content: ''; position: absolute; left: -1px; height: 25px; width: 80px; bottom: -1px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } a.button:before { height: 23px; bottom: -4px; border-top: 0; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-box-shadow: 0 1px 1px 0px #bfbfbf; -moz-box-shadow: 0 1px 1px 0px #bfbfbf; box-shadow: 0 1px 1px 0px #bfbfbf; } |
И наконец, применим градиент, внутреннюю тень и некоторые тени текста. Мы добавим :visited, чтобы предотвратить ошибки в IE6.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* GRAY */ a.gray, a.gray:hover, a.gray:visited { color: #555; border-bottom: 4px solid #b2b1b1; text-shadow: 0px 1px 0px #fafafa; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e2e2e2)); background: -moz-linear-gradient(top, #eee, #e2e2e2); box-shadow: inset 1px 1px 0 #f5f5f5; } .gray:before, .gray:after { border: 1px solid #cbcbcb; border-bottom: 1px solid #a5a5a5; } .gray:hover { background: #e2e2e2; background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#eee)); background: -moz-linear-gradient(top, #e2e2e2, #eee); } |
И вот что мы имеем. Неплохо, правда?
Мы ничего не забыли?
На самом там есть ещё кое-что, что нужно сделать; Орман сделал также дизайн кнопки в активном состоянии или при нажатии. Поэтому, конечно, мы добавим, это в наши стили CSS!
Мы поместим код для активного состояния для всех кнопок один, так как он одинаковый. Первое различие с предыдущими стилями кнопки это то, что она не имеет обводки. Она также расположена немного ниже, то есть без нижнего отступа. И мы должны использовать 2 функции тени вместо одного: обычный белый и второй, внутренний, который будет прозрачным. И наконец, нам больше не нужны псевдо-элементы :after и :before.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* АКТИВНОЕ СОСТОЯНИЕ */ a.button:active { border: none; bottom: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3); } a.button:active:before, a.button:active:after { border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } |
Ну вот, видим как они будут выглядеть в активном состоянии то есть при нажатии:
Работа кнопки в старых браузерах
Итак мы создали хорошие CSS3 кнопки, которые работают во всех современных браузерах. Но как насчет Internet Explorer, например? IE8 и ниже не поддерживают тень текста или градиент.
Для того, чтобы красиво отображать их для этих браузеров, мы могли бы использовать Modernizr, библиотека JavaScript, которая проверяет может ли браузер пользователя обрабатывать CSS3 и HTML5 свойства. Если нет, то мы просто добавляем альтернативные стили. Например, мы просто будем использовать изображение для старых браузеров.
Сначала мы создаем наш Modernizr. Сделать это можно, . Когда мы подключили JavaScript к HTML файлу, нужно всего лишь определить альтернативные стили для конкретного HTML класса. Мы собираемся использовать изображение для браузеров, которые не поддерживают наиболее важные CSS3 эффекты, которые мы использовали – это скругление углов, CSS градиент. И так как некоторые старые браузеры не поддерживают даже :before и :after, мы отметим следующее.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
/* MODERNIZR FALLBACK */ .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generatedcontent a.button, .no-generatedcontent a.button:visited { background: url(images/sprite.png) no-repeat 0 0px; height: 32px; width: 82px; } .no-cssgradients a.button:hover, .no-borderradius a.button:hover, .no-generatedcontent a.button:hover { background: url(images/sprite.png) no-repeat 0 -32px; } .no-cssgradients a.button:active, .no-borderradius a.button:active, .no-generatedcontent a.button:active { background: url(images/sprite.png) no-repeat 0 -64px; bottom: 0; line-height: 35px; } .no-cssgradients a.gray, .no-cssgradients a.gray:visited, .no-cssgradients a.gray:hover { background-position-x: 0; } .no-cssgradients a.pink, .no-cssgradients a.pink:visited, .no-cssgradients a.pink:hover { background-position-x: -82px; } .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover { background-position-x: -164px; } .no-cssgradients a.green,, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover { background-position-x: -246px; } .no-cssgradients a.turquoise, .no-cssgradients a.turquoise:visited, .no-cssgradients a.turquoise:hover { background-position-x: -328px; } .no-cssgradients a.black, .no-cssgradients a.black:visited, .no-cssgradients a.black:hover { background-position-x: -410px; } .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visited, .no-cssgradients a.darkgray:hover { background-position-x: -492px; } .no-cssgradients a.yellow, .no-cssgradients a.yellow:visited, .no-cssgradients a.yellow:hover { background-position-x: -574px; } .no-cssgradients a.purple, .no-cssgradients a.purple:visited, .no-cssgradients a.purple:hover { background-position-x: -656px; } .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visited, .no-cssgradients a.darkblue:hover { background-position-x: -738px; } .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a.button:hover, .no-cssgradients a.button:before, .no-cssgradients a.button:after, .no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius a.button:hover, .no-borderradius a.button:before, .no-borderradius a.button:after, .no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover, .no-generatedcontent a.button:before, .no-generatedcontent a.button:after { border: 0; } |
Для повышения производительности мы используем CSS Sprite, изображение кнопок при наведения и при нажатии. Класс :visited всё ещё используем, чтобы предотвратить ошибки IE6.
Заключение
Итак, теперь у нас есть кросс-браузерные 3D кнопки для сайта! Вы, вероятно, думаете, что это очень много кода для 10 3D кнопок, но, конечно, это лишь демонстрация того, что вы можете или не можете сделать с CSS3. Вы вольны делать с ними, все что хотите!
Я надеюсь, что вам понравилось, спасибо за чтение!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
