Кнопки 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, какие элементы я мог бы использовать? Мои первые мысли:
стандарт
<input type="button">с css для улучшения внешнего вида (в статье о дизайне говорилось в основном о css / imges.)Jquery Javascript, чтобы вызвать пользовательский диалог, привязанный к кнопке на событии "onclick", которое будет иметь
<a>теги в них и панель поиска для фильтрации? Будет ли макет таблицы для этого всплывающего окна вменяемым?
Я ужасно разбираюсь с реверс-инжинирингом в Интернете, какие инструменты я могу использовать, чтобы помочь реверс-инжинирингу этих кнопок? Используя панель инструментов веб-разработчика Firefox, я не могу увидеть CSS или JavaScript (даже если он минимизирован), который используется во всплывающих диалогах кнопок. Какой браузерный инструмент или другой метод я мог бы использовать, чтобы взглянуть на них и получить некоторые идеи?
Я не собираюсь воровать какие-либо IP-адреса Google, просто получить представление о том, как я могу создать аналогичные функциональные возможности кнопок.
11 ответов
- РЕДАКТИРОВАТЬ - Я не видел ссылку в оригинальном сообщении. Сожалею! Постараюсь переписать, чтобы отразить актуальный вопрос
StopDesign имеет отличный пост по этому вопросу здесь. [edit 20091107] Они были выпущены как часть библиотеки закрытия: см. демонстрацию кнопки.
В основном пользовательские кнопки, которые он показывает, создаются с использованием простого CSS.
Первоначально он использовал 9 таблиц, чтобы получить эффект: 
Но позже он использовал простое левое и правое поле в 1px на верхней и нижней границах для достижения того же эффекта.
Градиент подделывается с использованием трех слоев: 
Весь код можно найти на странице 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> </b><u>button</u></span></span></a>
или же
<button type="button" class="btn"><span><span><b> </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 станет такой тяжелой, я думаю, что я бы предпочел ИСПОЛЬЗОВАТЬ ИЗОБРАЖЕНИЕ (или пару изображений в качестве фона. Еще лучше, Спрайты). Кроме того, изображение для этой кнопки будет меньше, чем один К.
Как бы я ни любил Google, это кажется немного излишним.
Обновление: Google - уникальный случай. Если вы массовый сайт и хотите интернационализировать свой контент, то эта техника без изображений действительно крутая. Это позволяет вам применять практически любой письменный язык к вашему пользовательскому интерфейсу, не создавая новых изображений и не боясь сломать кнопки.
См. Вопрос: Каковы преимущества использования кнопки без изображения?
Вы можете использовать этот плагин jquery, который я разработал. Кнопки работают практически везде, и, поскольку это плагин, их легко установить и настроить.
Однако, если вы решите это сделать, убедитесь, что вы сначала отображаете страницу по умолчанию:
<input type="submit" value="submit" />
... А затем используйте jQuery, чтобы поменять элемент ввода с вашей пользовательской кнопкой, которая имеет событие onClick. Это гарантирует, что люди, у которых JavaScript не включен, смогут пользоваться вашим сайтом.
Юзабилити должна быть на первом месте!
Обновление этого поста за 2011 год:
Google запустил новый дизайн для своих сервисов в июле 2011 года. Новые кнопки Google были воссозданы здесь: http://pixify.com/blog/use-google-plus-to-improve-your-ui/
Новые кнопки выглядят так:
Вы можете попробовать использовать плагин Firebug для Firefox, чтобы просмотреть CSS на кнопке.
Самая большая проблема, с которой вы столкнетесь, - заставить его работать в разных браузерах.
Я думаю, вам следует серьезно подумать, действительно ли вам это нужно... Google получает большую выгоду, делая что-то подобное из-за огромного количества кнопок и языков, в которых они нуждаются; Я подозреваю, что большинство сайтов и приложений будут так же хорошо использовать изображение.
Тем не менее, компонент с открытым исходным кодом - хорошая идея: широко распространять богатство и усилия.
Большая часть работы здесь, вероятно, не будет дизайном - эти посты уже являются отличным How-To по эффектам градиента.
Проблема состоит в том, чтобы заставить это работать во всех браузерах, или, более конкретно, изворотливых кучах мусора, которые являются IE6 и IE7.
Я думаю, что вы на правильном пути со стандартной кнопкой, которая переписывается с помощью jQuery - таким образом, вы все равно будете доступны для программ чтения с экрана и сможете значительно ухудшиться в действительно старых браузерах.
Что касается HTML, я думаю, что вам лучше всего посетить Gmail с каждым браузером и посмотреть, что генерируется HTML - я ожидаю, что он будет совершенно другим для IE6, IE7 (также в зависимости от того, нужен ли им режим quirks-mode) и для всего остального,
Они были выпущены как часть библиотеки закрытия: см. Демонстрацию кнопки
Панель инструментов веб-разработчика содержит информацию о стиле просмотра в меню css, которая расскажет вам, что css применяется к элементу. В этом меню также есть функция "Редактировать CSS", которая позволит вам на лету изменить CSS, чтобы увидеть, как он влияет на страницу.
Пост со ссылкой на библиотеку закрытия не применяется. То, что было выпущено как часть библиотеки закрытия, использует кнопки с градиентами.
Другие перечисленные решения бесполезны. Вы не можете перейти оттуда и заставить эти кнопки работать в любом браузере, в Gmail они работают. То, что Боуман показывает на своем сайте, не рабочий код.