Кнопки Google без изображения
10 ответов
- РЕДАКТИРОВАНИЕ - я не видел ссылку в исходном сообщении.Прошу прощения! Попытается переписать для отражения фактического вопроса
, StopDesign имеет превосходное сообщение на этом здесь . [редактируют 20091107], Они были выпущены как часть библиотека закрытия : посмотрите демонстрация кнопки .
В основном пользовательские кнопки он шоу создаются с помощью простого бита CSS.
Он первоначально использовал 9 таблиц для получения эффекта: 
, Но позже он использовал простое левое и правое поле на 1 пкс на вершине и нижних границах для достижения того же эффекта.
градиент фальсифицируется при помощи трех слоев: 
Весь код может быть найден в эти Пользовательские кнопки 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 становится этим тяжелым, я думаю, что быть очень бы ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЕ AN (или пара изображений как фоны. Еще лучше, Спрайты). Кроме того, изображение для этой кнопки было бы меньше, чем единственный K.
так, как я люблю Google, это кажется небольшим излишеством.
<час>Обновление: Google является уникальным случаем. Если Вы - крупный сайт, и Вы хотите интернационализировать свое содержание, то этот метод изображения меньше на самом деле действительно прохладен. Это позволяет Вам применять примерно любой письменный язык к своему UI, не будучи должен генерировать новые изображения или страх перед повреждением Ваших кнопок.
Посмотрите Вопрос: , Что преимуществами использования является кнопка без изображения?
Однако Вы решаете сделать это, удостоверьтесь, что Вы сначала представляете страницу со значением по умолчанию:
<input type="submit" value="submit" />
... И затем используйте jQuery для свопинга входного элемента с пользовательской кнопкой, которая имеет onClick событие. Это гарантирует, что люди без JavaScript включили, все еще сможет использовать Ваш сайт.
Удобство использования должно быть на первом месте!
Вы могли использовать этот плагин jQuery, который я разработал. Кнопки работают практически где угодно и так как это - плагин, который они легки настроить и настроить.
Вы могли попытаться использовать плагин Firebug для Firefox для просмотра CSS на кнопке.
Самая большая проблема, которую Вы собираетесь иметь, будет заставлять его работать через браузеры.
я думаю, что необходимо сильно рассмотреть, нужен ли Вам действительно он... Google получает много удара для маркера путем создания чего-то вроде этого из-за огромного количества кнопок и языков, в которых они нуждаются; я подозреваю, что большинство сайтов и приложений были бы так же, как богатый, использующий изображение.
компонент с открытым исходным кодом является хорошей идеей, хотя: распространите богатство и усилие широко.
Большинство работы здесь, вероятно, не будет дизайном - те сообщения уже являются превосходным практическим руководством на эффектах градиента.
проблема получает эту работу во всех браузерах или более конкретно изворотливые груды мусора, которые являются IE6 и IE7.
я думаю, что Вы на правильном пути со стандартной кнопкой, которая переписывается с jQuery - тот способ, которым Вы все еще будете доступны для программ для чтения с экрана и можете ухудшиться приятно в действительно старых браузерах.
Для HTML я думаю, что Ваш лучший выбор состоит в том, чтобы посетить Gmail с каждым браузером и видеть то, что производится HTML - я ожидал бы, что это будет полностью отличаться для IE6, IE7, (также в зависимости от того, нужен ли им режим причуд), и все остальное.
Панель инструментов Веб-разработчика имеет информацию о стилях представления в соответствии с меню CSS, которое скажет Вам, какая CSS применяется к объекту. Существует также функция Edit CSS в том меню, которое позволит Вам изменить CSS на лету, чтобы видеть, как это влияет на страницу.
Пост со ссылкой на библиотеку закрытия не применяется. То, что было выпущено как часть библиотеки закрытия, использует кнопки с градиентами .
Остальные перечисленные решения бесполезны. Оттуда нельзя перейти и заставить эти кнопки работать в каждом браузере Gmail. То, что Bowman показывает на своем сайте, не является рабочим кодом.
.