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


90

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

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

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

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

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

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

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

Ответы:


55

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

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

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

Изначально он использовал 9 таблиц для получения эффекта: 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>

32

Согласно 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 - уникальный случай. Если у вас большой сайт и вы хотите интернационализировать свой контент, то эта техника без изображений действительно крутая. Он позволяет вам применять практически любой письменный язык к вашему пользовательскому интерфейсу без необходимости создавать новые изображения или бояться сломать свои кнопки.

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


13

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

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

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

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


5
Зачем? <button type="submit">Вместо этого используйте a , поскольку он может иметь дочерние элементы и иметь любой стиль, который вам нравится.
век

13

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

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


12

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

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

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


+1. Вместо того, чтобы пытаться имитировать градиенты с помощью изображений или дополнительных элементов, таких как этот текущий ответ, используйте градиенты, где это возможно, и вернитесь к разумному цвету в старых браузерах.
mikemaccana 05


5

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

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

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


2

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

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

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

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


1
Я искренне сомневаюсь, что Google использует браузер для рендеринга кнопок в IE.
век


1

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


Я считаю, что firebug чрезвычайно полезен именно для такого рода вещей - просмотра того, какой CSS применяется и живых изменений.
Thelema,

Я тоже использую firebug, но, поскольку у него есть собственный движок, он может быть немного тяжелым. На мой взгляд, панель инструментов намного легче и проще в использовании.
Mykroft

0

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.