Кнопки Google Imageless

Нещодавно було кілька статей про нові кнопки 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 / IMG.)

2. Jquery javascript, щоб відкрити власне діалогове вікно, корінене до кнопки на події "onclick", яке містило б <a>теги та рядок пошуку для фільтрації? Чи макет таблиці для цього спливаючого вікна був би здоровим?

Я страшенно працюю над зворотним інжинірингом в Інтернеті, які деякі інструменти я міг би використати, щоб допомогти здійснити зворотне проектування цих кнопок? За допомогою панелі інструментів веб-розробника Firefox я дійсно не бачу CSS або JavaScript (навіть якщо вони зменшені), які використовуються у діалогових вікнах, що спливають. Який інструмент браузера чи інший метод я міг би використати, щоб зазирнути до них та отримати деякі ідеї?

Я не хочу викрасти будь-яку IP-адресу Google, просто складіть уявлення про те, як я можу створити подібну функціональність кнопок.

- РЕДАКТУВАТИ - Я не бачив посилання в оригінальному дописі. Вибачте! Спробує переписати, щоб відобразити актуальне питання

StopDesign має чудовий пост про це тут . [редагувати 20091107] Вони були випущені як частина бібліотеки закриття : див. демонстрацію кнопки .

В основному власні кнопки, які він показує , створюються за допомогою простого біта CSS.

Спочатку він використовував 9 таблиць для отримання ефекту:

Але пізніше він використав простий лівий і правий край 1px на верхній і нижній межі для досягнення того ж ефекту.

Градієнт підробляється за допомогою трьох шарів:

Весь код можна знайти на сторінці Користувацькі кнопки 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 (також залежно від того, чи потрібен їм примхливий режим) та всього іншого .

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

На панелі інструментів веб-розробника є інформація про стиль перегляду в меню css, яка повідомляє, який css застосовується до елемента. У цьому меню також є функція Редагувати CSS, яка дозволяє вам змінювати CSS на льоту, щоб побачити, як це впливає на сторінку.

Публікація з посиланням на бібліотеку закриття не застосовується. Те, що було випущено як частина бібліотеки закриття, використовує кнопки з градієнтами .

Інші перелічені рішення марні. Ви не можете перейти звідти і запустити ці кнопки у кожному браузері, щоб Gmail працював. Те, що Боумен показує на своєму сайті, - це не робочий код.