Поделитесь, как вы делаете кроссбраузерные кнопки?
Артём Поликарпов
Кнопки я оформляю с помощью ЦСС 3.
У матёрых верстальщиков есть миллион способов сделать карамельную кнопку картинками.
Расставаться с таким багажом обидно. И всё же — время картинок прошло.
ЦСС гибче и легче.
Ингредиенты сладких кнопок — градиенты и тени — если верить статистике, доступны уже 70% пользователей.
О картинках стоит вспомнить только если кнопка — неотъемлемая часть фирменного стиля — должна выглядеть абсолютно одинаково на любых устройствах.
Дизайнеры жалуются — ЦСС-кнопки беднее фотошопных. Чаще всего верстальщики просто не знают о множественных градиентах и тенях, а с их помощью можно и картину нарисовать.
Другие препятствия к отказу от картинок — зоопарк вебкит-о-моз-префиксов и отличия синтаксиса в разных браузерах — разработчики давно научились обходить с помощью ЦСС-препроцессоров и утилит.
Новинка —«Автопрефиксер» Андрея Ситника.
Мне нравится экспериментировать с оформлением кнопок прямо в коде:
Но когда будет нужно точно воспроизвести замысел дизайнера, я предпочту функцию«скопировать ЦСС» прямо в Фотошопе.
Такая возможность уже появляется в некоторых приложениях, однако ничего из того, что я пробовал, ещё не работает идеально.
Надеюсь, уважаемые советчики поделятся своими способами создания кнопок.
✓
P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.
Я видел много раз, как люди мучаются, пытаясь сделать две вещи: — контролировать ширину кнопки, — выровнять текст вертикально посередине.
Устанавливать фиксированную ширину кнопки бессмысленно — шаблон должен работать при разном объёме текста. Поэтому ширину не указываем, а используем display:inline-block;
Вертикальное выравнивание текста сильно зависит от значения line-height. По-умолчанию оно определяется автоматически, поэтому в разных браузерах текст начинает «гулять». Чтобы это исправить, указываем line-height равным суммарной высоте кнопки.
В Sketch.app есть функция «Copy CSS Attributes», которая достаточно неплохо справляется. Правда, пока не работают градиенты у бордеров и режимы наложения, но это пока :-)
Будучи в целом согласным с мыслью «кнопки в большинстве случаев пора верстать стилями», отмечу ещё одно исключение.
К сожалению, браузеры до сих пор ненадежно и не всегда предсказуемо рендерят несистемные шрифты. По-разному работает антиалиасинг (а бывает, что и не работает вовсе), скачет базовая линия… Особенно это заметно, если кегль мелкий.
И бывает, что какую-тоОчень-Важную-Кнопку надежнее сделать картинкой, где шрифт уже растеризован и даже допилен вручную на пиксельном уровне.
Потенциальные проблемы с мультиязычностью и поддержкой осознаю — но увы, приходится подставлять костыли.
Артём, синтаксис градиентов поменялся (точка отсчёта градусов и синтаксис ключевых слов) и никакой автопрефиксер тебя не спасёт от ошибки, которую ты допустил. Надеюсь, что ПНГ со скриншотом из Сафари, где направление градиента поехало, прикрепится к комментарию, несмотря на предостережение про «гиф или джипег». Чтобы избежать такой ошибки, лучше указывать направление градиента ключевыми словами.
Для создания кнопочек — требую от дизайнера использовать в Фотошопе только те инструменты, аналоги которых есть в ЦСС (например тени внутренние, тени внешние, градиенты, обводки…), и потом по аналогии переношу эти стили на кнопку.
А для быстрого создания зоопарка из префиксных стилей градиента (и самих градиентов соответственно) пользуюсь «Редактором градиентов»:
