x
 
Константин Дубина
2 мая 2013

Поделитесь, как вы делаете кроссбраузерные кнопки?



Кнопки я оформляю с помощью ЦСС 3.

У матёрых верстальщиков есть миллион способов сделать карамельную кнопку картинками. Расставаться с таким багажом обидно. И всё же — время картинок прошло.

ЦСС гибче и легче. Ингредиенты сладких кнопок — градиенты и тени — если верить статистике, доступны уже 70% пользователей. О картинках стоит вспомнить только если кнопка — неотъемлемая часть фирменного стиля — должна выглядеть абсолютно одинаково на любых устройствах.

Дизайнеры жалуются — ЦСС-кнопки беднее фотошопных. Чаще всего верстальщики просто не знают о множественных градиентах и тенях, а с их помощью можно и картину нарисовать.

Другие препятствия к отказу от картинок — зоопарк вебкит-о-моз-префиксов и отличия синтаксиса в разных браузерах — разработчики давно научились обходить с помощью ЦСС-препроцессоров и утилит. Новинка — «Автопрефиксер» Андрея Ситника.

Мне нравится экспериментировать с оформлением кнопок прямо в коде:

button {
  border: none;
  outline: none;
  vertical-align: top;
  cursor: pointer;
  border-radius: 3px;
  padding: 10px 40px;
  margin-right: 0;
  font-size: 18px;
  line-height: normal;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
  background-image: linear-gradient(-180deg,
                        rgba(255, 255, 255, .5) 0%,
                        rgba(0, 0, 0, .5) 100%),
                    linear-gradient(-134deg, #1973a2 0%,
                        #67bd7c 51%, #b1e558 100%);
  background-color: #87ad80; /* Аварийный режим */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
              0 1px 1px rgba(0, 0, 0, .3)
}

button:hover {
  background-image: linear-gradient(-180deg,
                        rgba(255, 255, 255, .4) 0%,
                        rgba(0, 0, 0, .4) 100%),
                    linear-gradient(-134deg, #1973a2 0%,
                        #67bd7c 51%, #b1e558 100%)
}

button.active {
  padding-top: 11px;
  padding-bottom: 9px;
  background-image: linear-gradient(-180deg,
                        rgba(155, 155, 155, .6) 0%,
                        rgba(100, 100, 100, .6) 100%),
                    linear-gradient(-134deg, #1973a2 0%,
                        #67bd7c 51%, #b1e558 100%);
  background-color: #708e6a;
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, .6)
}

Но когда будет нужно точно воспроизвести замысел дизайнера, я предпочту функцию «скопировать ЦСС» прямо в Фотошопе. Такая возможность уже появляется в некоторых приложениях, однако ничего из того, что я пробовал, ещё не работает идеально.

Надеюсь, уважаемые советчики поделятся своими способами создания кнопок.

 

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Никита Козин
2 мая 2013

А как быть с тенями с непрямым сечением? Вроде таких: http://ilyabirman.ru/meanwhile/all/ui-shadows/

Александр Кравчук
2 мая 2013

Я видел много раз, как люди мучаются, пытаясь сделать две вещи:
— контролировать ширину кнопки,
— выровнять текст вертикально посередине.

Устанавливать фиксированную ширину кнопки бессмысленно — шаблон должен работать при разном объёме текста. Поэтому ширину не указываем, а используем display:inline-block;

Вертикальное выравнивание текста сильно зависит от значения line-height. По-умолчанию оно определяется автоматически, поэтому в разных браузерах текст начинает «гулять». Чтобы это исправить, указываем line-height равным суммарной высоте кнопки.

Никитин Никита
2 мая 2013

В Sketch.app есть функция «Copy CSS Attributes», которая достаточно неплохо справляется. Правда, пока не работают градиенты у бордеров и режимы наложения, но это пока :-)

Дмитрий Кравчик
2 мая 2013

Будучи в целом согласным с мыслью «кнопки в большинстве случаев пора верстать стилями», отмечу ещё одно исключение.

К сожалению, браузеры до сих пор ненадежно и не всегда предсказуемо рендерят несистемные шрифты. По-разному работает антиалиасинг (а бывает, что и не работает вовсе), скачет базовая линия… Особенно это заметно, если кегль мелкий.

И бывает, что какую-то Очень-Важную-Кнопку надежнее сделать картинкой, где шрифт уже растеризован и даже допилен вручную на пиксельном уровне.

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

Сергей Благодетелев
2 мая 2013

Гибкое визуальное управление стилями блоков и кнопок:

http://playground.webflow.com/

Вадим Макеев
3 мая 2013

Артём, синтаксис градиентов поменялся (точка отсчёта градусов и синтаксис ключевых слов) и никакой автопрефиксер тебя не спасёт от ошибки, которую ты допустил. Надеюсь, что ПНГ со скриншотом из Сафари, где направление градиента поехало, прикрепится к комментарию, несмотря на предостережение про «гиф или джипег». Чтобы избежать такой ошибки, лучше указывать направление градиента ключевыми словами.

Подробнее про новый синтаксис в статье Мейера: http://web-standards.ru/articles/linear-gradient-keywords/

Андрей Щербинин
3 мая 2013

Для создания кнопочек — требую от дизайнера использовать в Фотошопе только те инструменты, аналоги которых есть в ЦСС (например тени внутренние, тени внешние, градиенты, обводки…), и потом по аналогии переношу эти стили на кнопку.

А для быстрого создания зоопарка из префиксных стилей градиента (и самих градиентов соответственно) пользуюсь «Редактором градиентов»:

http://colorzilla.com/gradient-editor/

Он предельно похож на инструмент «Градиент» в Фотошопе, есть возможность залить картинку и подобрать её стили.


4 мая 2013

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


4 мая 2013

Вадим, спасибо за замечание. Автор «Автопрефиксера» обещает внести изменения, чтобы учитывать разницу синтаксиса.

Екатерина Кузьмина
7 мая 2013

Онлайн-конструктор кнопок:
http://livetools.uiparade.com/button-builder.html

Дмитрий Шимкин
9 мая 2013

Никита, почти бирмановские тени можно сделать с помощью отрицательного параметра spread: http://jsfiddle.net/xkpm8/


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

3 1




Недавно всплыло

Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Поделитесь соображениями, как работать, путешествуя 8 Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33