3D кнопки с помощью CSS3

http://webdesign.tutsplus.com/tutorials/site-elements/orman-clarks-chunky-3d-web-buttons-the-css3-version/
  • Перевод
Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Preview


Заметка автора: Orman любезно разрешил нам кодировать любую из его фриби, так что в будущем ждите еще туториалы!

ПОСМОТРЕТЬ ДЕМО



Шаг 1: Создаем документ HTML


Мы начнем с создания нового документа HTML. Он будет основан на HTML5 boilerplate для того, чтобы у нас была удобная отправная точка. Теперь мы добавим список с ссылками. Вот в принципе и все, спасибо CSS3 за то, что мы не должны использовать дополнительные дивы и спаны.
Каждому пункту списка мы присвоим класс ‘buttons’. И так как Orman использовал различные цвета, мы назначим каждой кнопке свой собственный цвет в виде класса.

<ul class="buttons">
    <li><a href="#" class="button gray">Download</a></li>
    <li><a href="#" class="button pink">Download</a></li>
    <li><a href="#" class="button blue">Download</a></li>
    <li><a href="#" class="button green">Download</a></li>
    <li><a href="#" class="button turquoise">Download</a></li>
    <li><a href="#" class="button black">Download</a></li>
    <li><a href="#" class="button darkgray">Download</a></li>
    <li><a href="#" class="button yellow">Download</a></li>
    <li><a href="#" class="button purple">Download</a></li>
    <li><a href="#" class="button darkblue">Download</a></li>
</ul>

Это все, что нам понадобится на данном этапе.


Шаг 2: Основные правила CSS


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

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;
}

Теперь применим правила для различных цветов. Например, для серого. Все остальные цвета можно посмотреть в демо.
/* СЕРЫЙ */
.gray,
.gray:hover {
    color: #555;
    border-bottom: 4px solid #b2b1b1;
    background: #eee;
.gray:hover { background: #e2e2e2; }
}
 

У вас должно получиться что-то вроде этого. Выглядит довольно-таки солидно, если на дворе 2008 г.




Шаг 3: Двойные рамки!


Если вы внимательно посмотрите на конечный результат, то увидите, что по периметру всей кнопки расположена тонкая линия. Для осуществления этого эффекта мы будем использовать псевдо-элементы :before и :after.
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;
}

При добавлении цвета кнопки выглядят гораздо лучше.
/* СЕРЫЙ */
.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; }




Шаг 4: Немного магии CSS3


Теперь приступим к непосредственной части CSS3. Начнем с закругленных углов:
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;
}

Естественно элементы :before и :after так же нуждаются в закругленных углах.
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;
}

И наконец мы применим градиенты, внутренню тень и тень для текста. Чтобы избежать багов в IE6, добавим state :visited.
/* СЕРЫЙ */
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);
}

Наш конечный результат, не так уж и плохо!




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


В своем дизайне Orman так же предусмотрел состояние :active. Поэтому мы просто обязаны добавить его к нашему коду.
Мы разместим эту часть кода под правилами для различных цветов.
/* ACTIVE STATE */
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;
}

Вот, что у нас получится:



Шаг 6 (по желанию): Старые браузеры


Итак, мы создали приятные кнопки CSS3, которые работают во всех современных браузерах. Но как быть с Internet Explorer 8 и ниже. В этих браузерах нет поддержки ни теней для текста, ни градиентов.
Для решения этой проблемы мы можем использовать javascript библиотеку Modernizr, которая может определять, поддерживает ли ваш браузер CSS3 и HTML5. Библиотека не исправляет проблемы, она лишь предлагает альтернативный стиль.
Во-первых, мы создадим собственную версию Modernizr, чтобы не таскать за собой огромный javascript. Это можно сделать на их веб-сайте. Как только мы вставили javascript в наш документ, необходимо определить правила разных классов для альтернативного стиля. Мы будем использовать изображения для тех браузеров, которые не поддерживают border-radius и градиенты.
/* 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;
}



Заключение


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

ДЕМО | ИСХОДНИКИ | JSFIDDLE

P.S. С радостью готов выслушать все замечания по поводу перевода.
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 59
  • +40
    С ума сойти, с помошью ccs3 можно делать тени и градиенты. Почему вы раньше молчали?
    • +1
      Это сарказм?
    • +3
      Скруглённые уголки ещё можно.
    • 0
      Да ладно вам, это хороший пример использования возможностей.
    • +13
      А вот мой вариант этих кнопок, выполненный в начале текущего месяца — http://dimox.name/examples/beautiful-3d-buttons-using-css3/, он ближе к PSD-исходнику, чем у tutsplus.
      • +1
        У таких кнопок есть баг. Они иногда дергаются, если их нажать и, не отпуская, поводить указателем вверх-вниз.
        • +2
          Подозреваю, что баг не у кнопок, а у браузера. Проверил в Опере, Хроме, Фаерфоксе — не дергаются. Правда ведут себя по-разному. В Фаерфоксе остаются нажатыми, когда уводишь курсор за границу, в Опере не поймешь (градиент не меняется, текст меняет положение), в Хроме состояние меняется полностью
          • 0
            Даже не у браузера, а у двух браузеров и одной операционной системы (Chrome и Safari на Mac OS X 10.6.8).
            • 0
              В OS X 10.7 все нормально.
            • 0
              Вообще-то, на Chrome 16 в Windows XP SP3 тоже так. У Вас какая версия?
              • 0
                Windows XP SP3 на виртуалке, Хром 12, потом обновился до 16. А опишите, как именно «дергается»?
                • +1
                  С частотой от 1 Гц до 10 Гц переходит из положения «нажато» в положение «отжато». Если указатель двигать ооочень медленно (по пикселю), то не дергается.
                  • 0
                    Если просто нажать и водить вверх-вниз (хоть быстро, хоть медленно), ничего такого нет. Если водить по верхней кромке толщиной 2-3 пиксели влево-вправо, тогда такой эффект есть.
                    • 0
                      У меня есть и тот, и другой эффекты.
              • +1
                Чтобы в Опере при нажатии на кнопку текст не сдвигался, можно использовать вот такое решение (выявил методом тыка):

                .submit:after {
                content: '';
                }
                • –3
                  Мне кажется самый главный «баг» таких кнопок — фиксированная ширина.
                • 0
                  у меня в опере дёргаются. надписи, а не сами кнопки
              • НЛО прилетело и опубликовало эту надпись здесь
                • +2
                  • 0
                    Ого, какие штуки можно засовывать в стили. А как такое править? Или заново написал SVG-код, закодировал в base-64 и просто поменял?
                    • +1
                      ну в общем да. Вряд ли менять градиенты нужно хоть сколько нибудь часто. Иначе можно вытащить скрипт наверное)
                  • 0
                    Надо будет попробовать. Спасибо за подсказку и за отзыв!
                  • 0
                    Спасибо за ссылку, так как действительно результат (в статье) совсем не тот что в исходнике.
                  • +3
                    Стоило бы добавить блокировку выделения текста. Хотя, конечно, это вопрос спорный. Я достаточно часто в таких (и не только) кнопках вместо нажатия — случайно выделяю текст. Полагаю, что я не 1 такой :)
                    • НЛО прилетело и опубликовало эту надпись здесь
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • НЛО прилетело и опубликовало эту надпись здесь
                        • +3
                          Это конечно хорошо, что автор освоил часть HTML5 и CSS3, но почему бы ему еще не заглянуть в HTML4.01 и посмотреть, каким тегом делаются кнопки.

                          Хотя возможно, конечно, автор хотел сделать именно ссылку. Странно, правда, что в виде кнопки.

                          Еще. Уважаемые верстальщики! Если вы пишете (a href="#") или (a onclick=«return false») или (a href=«javascript:void(0)»), то вы неграмотные верстальщики.
                          • 0
                            А каков способ по вашему годен?
                            • +1
                              Если в форме — это должна быть кнопка. Если это ссылка — то в идеале, если у пользователя отключены скрипты, должна вести на нужную страницу где эта функциональность доступна. А если скрипты работают — блокируем переход в обработчике события и производим нужные действия.
                              • +3
                                Input (type: button/submit), Button. Но тут есть подвох: некоторые браузеры, во-первых, добавляют неубиваемые рамки, во-вторых, все браузеры по-разному выравнивают кнопку с соседним текстом (при разных значениях vertical-align).

                                Поэтому, в силу кривизны рук и несогласованности производителей браузера и спецификации, допустимо делать кнопки с помощью тегов span или div. НО! В этом случае вы должны предотвращать выделение текста, например при клике или двойном клике (если использовать input/button, такой проблемы нет). Если вы думаете «ну кто же будет дважды кликать по кнопке» — поверьте, вы плохо знаете пользвоателей. Будут, еще как.

                                Если же вы ставите тег a, это знаичт, вы хотите сделать ссылку, и она должна куда-то вести, а не ссылаться на несуществующую (и не прописанную никакими стандартами) на страницу javascript:void.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                  • 0
                                    У button есть еще одна проблема, это vertical-align, который одну и ту же кнопку в разных браузерах выравнивает по-разному. У меня вообще такое ощущение, что в итоге получился неюзабельный тег.

                                    Потому я сам предпочитаю input:submit, завернутый в спан с display:inline-block и кучей ins для декораций.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • 0
                                        Для традиционных методов изготовления теней и уголков.
                              • 0
                                <a href="#link" onclick="do(); onclick false;">link</a>
                                так?
                                • НЛО прилетело и опубликовало эту надпись здесь
                                • НЛО прилетело и опубликовало эту надпись здесь
                                • +8
                                  Блин, мне показалось что на CSS такую кнопочку сделать проще чем красиво в PhotoShop -_-. Дожил.
                                  • +2
                                    Может кто знает, но меня мучает вопрос. Почему у кнопок всегда курсор — обычная стрелка и все постоянно перебивают стилями курсор на палец?
                                    • –2
                                      Комментариев не много, но в избранное добавлено более 400! На порядок больше. Показатель!
                                      • +1
                                        У меня у одного в Chrome эти кнопки выглядяит не так как на PSD?
                                        Chrome 17.0.963.38 beta
                                          • 0
                                            Кстати, среди этого делал еще и Google подобные кнопки sofcase.net/post/buttons-as-a-new-interface-from-googleplus-using-css3/ :)
                                            • –1
                                              в ff наблюдаю интересный эффект:
                                              1. Нажимаю на кнопку, в нажатом состоянии увожу курсор
                                              2. Переключаюсь на другую вкладку в браузере
                                              3. Переключаюсь на вкладку обратно и нажимаю на ту же кнопку

                                              в .ds-button не хватает стиля outline: none;
                                            • 0
                                              Тоже хотел перевести этот туториал, но как посмотрел демо в хроме — сразу передумал.
                                              • –1
                                                Надо еще сделать outline: none чтобы пунктирную обводку после клика убрать.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                • 0
                                                  Обожаю CSS3, жаль что эти кнопки в виде PNG занимают меньше байт и времени, чем css код для их рисования.
                                                  • 0
                                                    Зато не делает лишний запрос к серверу :)
                                                    • 0
                                                      А по времени по сути столько же наверно :)
                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                      • 0
                                                        Здается мне, что основная проблема этих кнопок — фиксированная ширина. Именно по этому на них можно долго смотреть, но использовать почему-то не хочется.

                                                        Я решал эту проблему с красотами, но решение свелось к кнопке в двух обертках: в первой была ее «трехмерная часть», во второй — «навершие». Я пытался использовать :before и :after, но не смог привязать ширину псевдоэлемента к ширине кнопки, не укладывая их в один контейнер. Может, мало пытался.
                                                        • 0
                                                          Может мне какой-нибудь гуру помочь с css кнопками? Я установил их на свою простенькую страничку, подредактировал цвета. Немного поигрался с тенями и элементами active, hover. Короче сейчас они работают не всегда — бывает нажимаешь на кнопку, а она кроме анимации нажатия/отжатия ничего не делает. a href не срабатывает :( После 3-4 клика опять начинает работать…

                                                          Кому не лень, помочь?

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