Кнопки як в Gmail і Google Reader
Вітання! Сьогодні ми подивимося як робляться ось ці симпатичні кнопки з деяких веб-продуктів Гугла.
Чого в них хорошого? Вони вимагають мало коду, всюди показуються однаково, ви легко можете поміняти оформлення кнопок і при бажанні можете зробити їх без картинок.
Сама реалізація таких кнопок належить Дугласу Боуману. На момент написання статті Дуглас зробив вже 3 версії таких кнопок, одна з яких взагалі без використання картинок, тільки HTML і CSS.
Сьогодні ми розглянемо тільки 2 останні реалізації і почнемо з «картіночной» версії.
Версія з картинками
Ну, картинка, по правді сказати, всього одна - це градієнт кнопки. Якщо градієнт не є принциповим, можете робити і без картинки. Хочете з градієнтом і без картинки - перегортайте нижче ;-)
Взагалі кажучи, в нас буде 4 види кнопок - ліва, права, центральна і поодинока.
У нас буде 2 версії кнопок - одна з використанням
В обох випадках ми будемо використовувати вкладені :
Версія без картинок
Розповім лише принцип, реалізацію ви і самі зможете подивитися в исходниках прикладу.
Сенс в тому, що крім двох ми додаємо всередину ще і . За допомогою них ми емулюючи градієнт. Але така реалізація поки що добре працює тільки в Firefox і Safari, але не працює в IE. Тепер йдемо дивитися приклад.
Співзасновник Временно.нет. Цікавиться онлайн бізнесом, дизайном, юзабіліті і клієнтським програмуванням. Бере участь в розробці декількох інтернет-проектів.
Іноді пише в Твіттер. але частіше на Временно.нет.