Кнопки без изображений Google

Недавно появилось несколько статей о новых кнопках без изображений Google:

• http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
• http://stopdesign.com/eg/buttons/3.0/code.html
• http://stopdesign.com/eg/buttons/3.1/code.html
• http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html

Мне очень нравится, как эти новые кнопки работают в Gmail. Как я могу использовать эти или похожие кнопки на моем сайте? Существуют ли какие-либо проекты с открытым исходным кодом с похожим внешним видом?

Если бы я хотел свернуть свой собственный пакет кнопок, как этот, с помощью JQuery / XHTML / CSS, какие элементы я мог бы использовать? Мои первоначальные мысли:

1. Стандарт <input type="button">с css для улучшения внешнего вида (статья о дизайне в основном говорила о css / imges).

2. Jquery javascript для вызова настраиваемого диалогового окна, привязанного к кнопке в событии «onclick», в котором будут <a>теги и панель поиска для фильтрации? Будет ли разумным макет таблицы для этого всплывающего окна?

Я плохо разбираюсь в реверс-инжиниринге вещей в Интернете, какие инструменты я мог бы использовать, чтобы помочь реконструировать эти кнопки? Используя панель инструментов веб-разработчика Firefox, я действительно не вижу CSS или javascript (даже если он минимизирован), который используется во всплывающих диалоговых окнах кнопок. Какой инструмент браузера или другой метод я мог бы использовать, чтобы взглянуть на них и получить некоторые идеи?

Я не собираюсь украсть какой-либо IP-адрес Google, просто представьте, как я могу создать аналогичную функциональность кнопок.

- РЕДАКТИРОВАТЬ - я не видел ссылки в исходном сообщении. Сожалею! Постараюсь переписать, чтобы отразить актуальный вопрос

StopDesign имеет отличный пост на этом здесь . [править 20091107] Они были выпущены как часть библиотеки закрытия : см. демонстрацию кнопок .

В основном настраиваемые кнопки, которые он показывает , создаются с использованием простого CSS.

Изначально он использовал 9 таблиц для получения эффекта:

Но позже он использовал простое поле в 1 пиксель слева и справа на верхней и нижней границах, чтобы добиться того же эффекта.

Градиент имитируется с помощью трех слоев:

Весь код можно найти на странице Custom Buttons 3.1 . (хотя градиент без изображения работает только в Firefox и Safari)

Пошаговая инструкция

1 - Вставьте следующий CSS:

/* Start custom button CSS here
---------------------------------------- */
.btn {
  display:inline-block;
  background:none;
  margin:0;
  padding:3px 0;
  border-width:0;
  overflow:visible;
  font:100%/1.2 Arial,Sans-serif;
  text-decoration:none;
  color:#333;
  }
* html button.btn {
  padding-bottom:1px;
  }
/* Immediately below is a temporary hack to serve the 
   following margin values only to Gecko browsers
   Gecko browsers add an extra 3px of left/right 
   padding to button elements which can't be overriden.
   Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn {
  margin:0 -3px;
  }
.btn span {
  background:#f9f9f9;
  z-index:1;
  margin:0;
  padding:3px 0;
  border-left:1px solid #ccc;
  border-right:1px solid #bbb;
  }
* html .btn span {
  padding-top:0;
  }
.btn span span {
  background:none;
  position:relative;
  padding:3px .4em;
  border-width:0;
  border-top:1px solid #ccc;
  border-bottom:1px solid #bbb;
  }
.btn b {
  background:#e3e3e3;
  position:absolute;
  z-index:2;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  height:40%;
  border-top:3px solid #eee;
  }
* html .btn b {
  top:1px;
  }
.btn u {
  text-decoration:none;
  position:relative;
  z-index:3;
  }

/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span {
  border-right-width:0;
  }
button.pill-l span span {
  border-right:1px solid #ccc;
  }
button.pill-c span {
  border-right-style:none;
  border-left-color:#fff;
  }
button.pill-c span span {
  border-right:1px solid #ccc;
  }
button.pill-r span {
  border-left-color:#fff;
  }

/* only needed if implementing separate hover state for buttons */
.btn:hover span, .btn:hover span span {
  cursor:pointer;
  border-color:#9cf !important;
  color:#000;
  }

/* use if one button should be the 'primary' button */
.primary {
  font-weight:bold;
  color:#000;
  }

2 - Используйте один из следующих способов вызвать его (больше можно найти по ссылкам выше)

<a href="#" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></a>

или

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>

Согласно Firebug, это их кнопка «Архив».

<div tabindex="0" act="7" class="goog-imageless-button goog-inline-block goog-imageless-button goog-imageless-button-collapse-right goog-imageless-button-primary" id="">
  <div class="goog-inline-block goog-imageless-button-outer-box">
    <div class="goog-inline-block goog-imageless-button-inner-box">
      <div class="goog-imageless-button-pos">
        <div class="goog-imageless-button-top-shadow"> </div>
        <div class="goog-imageless-button-content"><b>Archive</b></div>
      </div>
    </div>
  </div>
</div>

CSS - это больше, чем я хочу организовать / вставить для этого. Возможно, это только у меня, но когда разметка / CSS становится такой тяжелой, я думаю, что лучше буду ИСПОЛЬЗОВАТЬ ИЗОБРАЖЕНИЕ (или пару изображений в качестве фона. А еще лучше, спрайты). Кроме того, изображение для этой кнопки было бы меньше одного K.

Как бы я ни любил Google, это кажется излишним.

Обновить: Google - уникальный случай. Если у вас большой сайт и вы хотите интернационализировать свой контент, то эта техника без изображений действительно крутая. Он позволяет вам применять практически любой письменный язык к вашему пользовательскому интерфейсу без необходимости создавать новые изображения или бояться сломать свои кнопки.

См. Вопрос: каковы преимущества использования кнопки без изображения?

Как бы вы ни решили это сделать, убедитесь, что вы сначала визуализируете страницу со значением по умолчанию:

<input type="submit" value="submit" />

... А затем используйте jQuery, чтобы поменять местами элемент ввода с вашей настраиваемой кнопкой, имеющей событие onClick. Это гарантирует, что люди без включенного JavaScript все равно смогут использовать ваш сайт.

Удобство должно быть на первом месте!

Вы можете использовать этот плагин jquery, который я разработал. Кнопки работают практически где угодно, и, поскольку это плагин, их легко установить и настроить.

http://swizec.com/code/styledButton/

Обновление этого сообщения за 2011 год:

Google запустил новый дизайн для своих сервисов в июле 2011 года. Новые кнопки Google были воссозданы здесь: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

Новые кнопки выглядят так:

Вы можете попробовать использовать плагин Firebug для Firefox, чтобы просмотреть CSS на кнопке.

Самая большая проблема, с которой вы столкнетесь, будет заставить его работать в разных браузерах.

Я думаю, вам следует серьезно подумать, действительно ли вам это нужно ... Google получает много денег, создавая что-то подобное из-за огромного количества кнопок и языков, которые им нужны; Я подозреваю, что для большинства сайтов и приложений также было бы неплохо использовать изображения.

Тем не менее, компонент с открытым исходным кодом - хорошая идея: широко распределять богатство и усилия.

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

Проблема в том, чтобы заставить это работать во всех браузерах, а точнее - в причудливых кучах мусора, таких как IE6 и IE7.

Я думаю, что вы на правильном пути со стандартной кнопкой, которую переписывают с помощью jQuery - таким образом вы по-прежнему будете доступны для программ чтения с экрана и сможете хорошо деградировать в действительно старых браузерах.

Что касается HTML, я думаю, вам лучше всего посетить Gmail с каждым браузером и посмотреть, какой HTML создается - я бы ожидал, что он будет совершенно другим для IE6, IE7 (также в зависимости от того, нужен ли им quirks-mode) и всего остального. .

Они были выпущены как часть библиотеки закрытия : см. Демонстрацию кнопок

На панели инструментов веб-разработчика есть информация о стиле представления в меню css, которая сообщит вам, какой CSS применяется к элементу. В этом меню также есть функция «Редактировать CSS», которая позволяет вам изменять CSS «на лету», чтобы увидеть, как это влияет на страницу.

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

Остальные перечисленные решения бесполезны. Вы не можете пойти дальше и заставить эти кнопки работать в каждом браузере, в котором они работают в Gmail. То, что Боумен показывает на своем сайте, не является рабочим кодом.