Верстка кнопок с помощью Sprite техники

Posted Опубликовал cross в Дизайн и юзабилити, Общее, Разработка сайтов     Comments 2 comments
Июнь
3

Думаю не одного меня часто раздражают элементы дизайна(меню, кнопки, ховер-элементы), которые долго подгружаются после наведения мышки и только потом показываются. Не меньше раздражает, когда дизайнер рисует красивый дизайн для всех элементов, а неопытный верстальщик(верстальщик-программер) берет и заменяется все ужасными стандартными шрифта без утопленностей, обводок, теней и тп.

Есть замечательная техника верстки подобных задач, которая уже не раз описана в основном на многих иностранных блогах и сайтах. Вот мой перевод подобной статьи: How to Build a Simple Button with CSS Image Sprites.

Кнопка - это один из самых обычных элементов в вебе. В современном дизайне кнопки используются не только на формах, но и для визуальной помощи в привличении внимания к важным элементам на странице. Давайте посмотрим на построение простой кнопки использую технику CSS sprites, начиная с работы в Photoshop и заканчивая законченным кодом. Это хороший пример, для всех кто только начал изучать CSS!

CSS Sprites

Кнопка будет создана в традиционном стиле используя утонченные градиенты и обводку чтобы придать впечатление округленности, трехмерости объекта ожидающего клика пальца. У кнопки будет три положения: нажата, поднята и наведение придающее визуализацию полунажатия на элемента для реалистичности.

CSS Sprites

Начало работы в Photoshop, возьмите Rounded Rectange Tool, сделайте большой радиус и нарисуйте на канвасе объект.

CSS Sprites

Двойной клик на слое, чтобы открыть окно Layer Styles. Добавляем Gradient Overlay, настраиваем цвета по вертикали через всю кнопку от #a8a8a8 до #ffffff.

CSS Sprites

Далее, добавляем обводку кнопке, используя 5px ширину и цвет #cbcbcb.

CSS Sprites

Для внутренней обводки, делаем Inner Glow, меняя настройки на Normal / #c2c2c2 / 100% Choke / 3px.

CSS Sprites

Вводим текст команды кнопки и устанавливаем соответствующий шрифт. Располагаем тект по центру.

CSS Sprites

Для текст открывает Layer Styles окошко и добавляем Gradient Overlay от #9a9a9a до #7c7c7c.

CSS Sprites

Чтобы придать видимость гравировки, добавляем Inner Shadow с найтройками 21% Opacity / 2px Distance / 3px.

CSS Sprites

Теперь добавляем небольшой световой эффект используя Drop Shadow. Меняем настройки на Normal / #ffffff / 33% Opacity / 2px Distance / 1px.

CSS Sprites

Выбираем слои кнопки и текста и тянем вертикально внизу удерживая Alt и Shift чтобы создать дубликат. Размещаем новые слои точно по нижней границе оригинала. Добавляем обводке нового слоя чуть более темный тон.

CSS Sprites

Создаем 3ий дубликат, и на этот раз меняем Gradient Overlay - реверс направлению градиента делает иллюзию что кнопка была нажата.

CSS Sprites

Три состояния кнопки готовы для экспорта. Каждое изображение имеет различия, которые будут видны  по средствам кодинга в CSS.

CSS Sprites

Нарисуйте выделение вокруг кнопок, спрячьте бекграунд и сделайте Save for Web. Выбирете PNG24 чтобы сработала прозрачность.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Button</title>
<style type="text/css">
* { margin: 0; padding: 0; /* Quick and Dirty Reset */ }
body {
	background: url(bg-repeat.png);
}
#demo {
	width: 433px; margin: 100px auto;
}
</style>
</head>
<body>
<div id="demo">
</div>
</body>
</html>

Открывайте Ваш любимый редактор и создавайте небольшой XHTML документ.

<p><a href="#" class="press-it-btn">Press it</a></p>

Напишите код HTML для кнопки. Мы будем использовать обычную ссылку с текстом Press it, так как мы использовали ее в дизайне. Так как a это инлайн тег мы вложим его в тег p, и дадим ему класс, чтобы легче было работать в CSS.

#demo p a.press-it-btn {
	display: block;
	width: 433px; height: 174px;
	background-image: url(button-sprite.png);
	background-position: top;
	text-indent: -9999px;
}

Далее пишем CSS код для кнопки. Первым делом меняем анкор с дефолтного инлайнового на блочный элемент. Это позволит нам задать ширину и высоту. Учтите, что высоту задаем для одной кнопки, а не всего спрайта в целом. Теперь можем подключить бекграунд к ссылке и позиционироавть ее по верху. Чтобы закончить кнопку используем отступ текста чтобы убрать текст с экрана.

#demo p a.press-it-btn:hover {
	background-position: center;
}
#demo p a.press-it-btn:active {
	background-position: bottom;
}

Задаем псевдо-классы для ссылки. Меняем позицию на центр при наведении и на низ для активного состояния кнопки. Это изменит вид кнопки при наведении мышки и клике. Попробуйте это в браузере.

CSS Sprites

a { outline: none; }

Все?! Страшная линия точками вокруг мышки на клике? Иногда браузеры добавляют свои собственные фичи, но они портят дизайн. Это легко может быть исправлено убирая outline. Но оставлять так нельзя, поскольку это оплошность в доступности элемента(через клавиатуру), потому не забываем следущий шаг.

#demo p a.press-it-btn:hover, #demo p a.press-it-btn:focus

Так как мы убрали outline, навигация по клавиатуре не будет видна. Мы можем добавть собственную подстветку добавляя псевдо-классы CSS, например добавив точно такой же эффект как и при наведении.

Вот и все, надеюсь данный урок будет полезен для Вас. Я для себя нашел новым работу с outline.

Похожие посты:

  1. Продвижение с помощью клоакинга
  2. Заработок с помощью блога
  3. Продвижение с помощью социальных сервисов
  4. Кроссбраузерная div верстка
  5. Div верстка, примеры layouts

2 Комментов к “Верстка кнопок с помощью Sprite техники”

  • 8 Июнь 2010 в 15:02
    Wild :

    Прикольно)

  • 30 Июль 2010 в 11:52
    aviabilety.org.ua :

    давно убедился что спрайты наше все! можно даже сделать все изображения по отдельности а потом подключить php скриптик чтобы все склеить в один файл!

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

Donation Bar

Order Links

Топ комментаторов