вход

Как создать кнопки web 2.0 при помощи CSS3

Как создать кнопки web 2.0 при помощи CSS3

Очень часто при разработке сайтов нужно использовать стильные и современные кнопки. Например кнопки в стиле Web 2.0 особенно популярны. Сделать такую кнопку не сложно, достаточно нарисовать её в Photoshop, и использовать полученные изображения для создания иллюзии кнопки. Однако с появлением CSS, процесс создания стильных кнопок и вовсе упростился. Достаточно описать в CSS правила для скруглённых углов, градиентов и теней, чтобы комбинируя их получить стильную кнопку в стиле Web 2.0. Сегодня я хочу показать вам, как на самом деле это очень просто реализовать. Я посмотрел несколько примеров, и решил выполнить и свой вариант. Стоит отметить также, что если вы все ещё используете Internet Explorer и хотите увидеть все эти эффекты, я должен вас огорчит. IE по-прежнему не поддерживает CSS3. Используйте последние популярные браузеры, которые поддерживают как CSS3 так и HTML5, например Safari, Chrome и Firefox 3+.

Что мы хотим получить?

Основное, что мы хотим создать, это набор стилей. Применяя стили CSS к тегам HTML, мы получим кросс-браузерные кнопки стиле Web 2.0. Что это значит? Это значит что на всех CSS3 совместимых браузерах мы получим одинаково отображаемые кнопки. Ну а уж на браузерах не совместимых с CSS3, добиться хотя бы изящного вида.

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

Как выглядят кнопки в стиле Web 2.0?

Также вы можете посмотреть демонстрацию

Стиль кнопки

Чтобы сделать кнопки масштабируемыми, будем использовать набор классов. То есть создадим три класса:

  • Основной класс описывающий стиль кнопки, он будет применён ко всем кнопкам
  • Отдельный класс для каждого цвета
  • Отдельный класс для каждого цвета

Основной класс будем использовать по умолчанию для каждой кнопки на нашей странице. А дальше мы можем настроить кнопки, добавив цепочки CSS классов, таким образом мы можем установить цвет и размер. Вы увидите ниже, что у нас все таки используется фоновое изображение overlay.png. Это если можно так сказать вынужденная мера, изображение дает нам эффект градиента, если вдруг кто то будет использовать в качестве браузера IE6. Здесь вы также должны будете использовать хак для правильно отображения прозрачности 24 битного PNG изображения.

Здесь кроме того, мы используем новое правило CSS3 это RGBA. Правило RGBA похоже на RGB, но позволит нам использовать альфа-слой для создания прозрачности цвета. Это позволяет легко изменять фон нашей кнопки.

.button, .button:visited {
	background: #222 url(overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}

На рисунке ниже изображены два варианта кнопок, и как вы можете видеть, цвет фона у них разный. Однако тень вокруг края кнопки остается одной той же. Если бы мы использовали значение цвета в HEX формате, то у кнопки на белом фоне тень была бы что-то вроде #dedede, а у кнопки на черном фоне #333333. Но использование RGBA позволяет нам появить гораздо большую гибкость при рендеринге тени.

Размер кнопки

Теперь у нас есть основна структуры нашей кнопки. Это класс .button, и теперь мы можем двигаться дальше и установить нужный нам размер кнопки просто назначив соответствующий класс. Ниже мы определяем классы .small .medium .large и .super. Во всех классах, кроме класса .medium мы просто назначаем размер шрифта и соответствующие отступы.

	.small.button, .small.button:visited 			{ font-size: 11px}
	.button, .button:visited,
	.medium.button, .medium.button:visited 			{ font-size: 13px; 
											  		font-weight: bold; 
													line-height: 1; 
													text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
													}
												  
	.large.button, .large.button:visited 			{ font-size: 14px; 
													  padding: 8px 14px 9px; }
													  
	.super.button, .super.button:visited 			{ font-size: 34px; 
													  padding: 8px 14px 9px; }

Цвет кнопки

Последним шагом по созданию наших стильных кнопок является определение CSS классов, задающие нужные нам цвета\ для кнопок. Вы можете дополнить существующие классы своими стилями для создания практически любых цветовых комбинаций.

	.pink.button, .magenta.button:visited		{ background-color: #e22092; }
	.pink.button:hover							{ background-color: #c81e82; }
	.green.button, .green.button:visited		{ background-color: #91bd09; }
	.green.button:hover						    { background-color: #749a02; }
	.red.button, .red.button:visited			{ background-color: #e62727; }
	.red.button:hover							{ background-color: #cf2525; }
	.orange.button, .orange.button:visited		{ background-color: #ff5c00; }
	.orange.button:hover						{ background-color: #d45500; }
	.blue.button, .blue.button:visited		    { background-color: #2981e4; }
	.blue.button:hover							{ background-color: #2575cf; }
	.yellow.button, .yellow.button:visited		{ background-color: #ffb515; }
	.yellow.button:hover						{ background-color: #fc9200; }

Как видите, реализация кнопок очень проста, а выглядят они великолепно. Кстати если вам понравилось создавать кнопки на CSS3 советую скачать и установить у себя очень стильные кнопки.

Заключение

Последнее, что я бы посоветовал, это создать отдельный документ CSS и поместить в него все описания стилей для создания кнопок в стиле Web 2.0. Это мне кажется более гибким решением, поскольку вы быстро можете изменять как цвета так и размеры кнопок, не редактируя основной документ со стилями. На этом сегодня остановимся. Надеюсь, вам будет полезен материал изложенный в статье. Спасибо за внимание.

 

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
2 комментария

Статья → Как создать кнопки web 2.0 при помощи CSS3

  1. Андрей:

    Еще одно хорошее подтверждение тому, что будущее за CSS3, уже сейчас можно добиться многого, не используя в оформлении ни единого изображения.
    В какой то мере даже начинаешь чувствовать себя причастным к новому виду творчества. Остается наедятся, что и разработчики, пока еще непотопляемого IE, наконец таки зашевелятся в этом направлении, и пожвижки намечаются.

  2. Для “Оперы” нужно добавить
    border-radius: 6px;
    чтобы работало скругление углов в этом (и, наверное, еще в каких-то) браузере.

Оставить комментарий

Статья → Как создать кнопки web 2.0 при помощи CSS3

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.