25 января 2012 в 20:56

3D кнопки с помощью CSS3 перевод

CSS*
Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки 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. С радостью готов выслушать все замечания по поводу перевода.
Автор оригинала: Lukas Van Orshoven
Павел Шиманский @shimapa23
карма
134,5
рейтинг 0,0
Самое читаемое Разработка

Комментарии (59)

  • +40
    С ума сойти, с помошью ccs3 можно делать тени и градиенты. Почему вы раньше молчали?
    • +1
      Это сарказм?
      • +30
        Нет, что вы.
    • +3
      Скруглённые уголки ещё можно.
      • +6
        Следующая статья цикла будет именно об этом.
      • +1
        а еще можно сделать iPhone на CSS3 ;) — habrahabr.ru/blogs/webdev/135349/
        • 0
          Уточните пжлст. iPhone 3 на CSS3? А на CSS4 — iPhone4?
    • 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
            В смысле?
        • 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
  • +3
    • 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 клика опять начинает работать…

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

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