Создание реалистичной кнопки средствами CSS3

2010-04-19 09:28:26 Рубрика : CSS

Я уже создал "пост" Кадмус про кнопку в Photoshop, и она использовала три различных изображения для своих состояний. Теперь, посредством CSS3 и всего лишь одного изображения, мы реализуют её аналог.

Я хочу последовательно рассказать о процессе создания кнопки и эффектах.

Вся соль — в деталях

Смысл в том, чтобы использовать комбинацию эффектов для создания трехмерного объекта. Майк Рандл рассказывает о тонкости в интерфейсах, я же надеюсь рассказать немного больше об этом. Идея состоит в следующем:

• Кнопка лежит на поверхности
• Кнопка немного приподнята и её текстура отличается от поверхности
• Текст «вдавлен» в кнопку

HTML, используемый для кнопки немного чрезмерен, но смысл будет понятен, когда мы углубимся в детали:

<a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a>

А сейчас разберемся со стилем:

1. Простой градиент, более светлый наверху, показывает, что источник света сверху и поверхность кнопки немного приподнята. Используем фоновое изображение шириной в 1 пиксель.

a.button b.m {
	background: transparent url(button.png) repeat-x 0 0;

}

2. Светлая граница по краям — отражения света. Мы используем свойство CSS3 rgba для этого. Используем альфа-смешивание, т.к. отражаемый свет гораздо лучше виден внизу.
3. Жесткая 1px верхняя граница, чтобы показать, что свет от верхнего края свет отражается сильнее.

a.button b.m {
	border-width: 1px;

	border-style: solid;
	border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);

}

4. Более светлая 1px нижняя граница, чтобы создать эффект, что кнопка находится прямо в поверхности.

a.button {
	border-width: 1px;

	border-style: solid;
	border-color: transparent transparent rgba(255, 255, 255, 0.63);

}

5. 1px граница вокруг кнопки, чтобы показать тень кнопки на поверхности. Снова используем rgba

a.button b.o {
	border: 1px solid rgba(0, 0, 0, 0.56);

}

6. И наконец, тень для текста, чтобы создать эффект «вдавленности».

a.button b.m b {
	text-shadow: 0 1px 0 #DDD;

	color: #262626;
}

Разные состояния кнопок

Мне нравится, когда у кнопок есть несколько состояний. Самый простой способ показать состояние «по наведении» — высветлить фон кнопки. Для состояния нажатия нужно показать, что приподнятая кнопка вдавлена в поверхность. Следовательно, освещение кнопки должно показать это. Вот несколько примеров:

Мне нравится, когда кнопка «нажата», но при этом никуда не сдвигается. Изменим форму кнопки от выпуклой к вогнутой

Рассмотрим это более подробно:

1. Вертикально отразите градиент. Темная часть градиента темнее по сравнению с предыдущем состоянием, т.к. свет, падающий на на нижнюю часть выпуклой формы отражается сильнее, чем свет, падающий верхнюю часть вогнутой.

a.button:active b.m {
	background-position: 0 -160px;

}

2. Светлая верхняя граница кнопки подчеркивает, что её края не двигаются.
3. Нижняя граница светлее, так как основная граница также не двигается.
4. Боковые края чуть светлее (но не намного), так как они двигаются с поверхностью.

a.button:active b.m {

	border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);

}

Образец и Демо

Демо ниже, было проверено на Firefox 3.6, Safari 4 и Chrome. В IE8 скругленные углы в активном состоянии отсутствует, пока не тестировалось в Опере.

Ниже представлен код CSS и спрайт изображения. Я использую скрипт сброса YUI, таким образом код может выглядеть несколько иначе.

a.button {
	text-decoration: none;
	border-color: transparent transparent #ECECEC; /** rgba fallback **/

	border-color: transparent transparent rgba(255, 255, 255, 0.63);

	cursor: pointer;
	outline: none;
}
a.button:hover {

	text-decoration: none;
}
a.button,
a.button b.o,

a.button b.m {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	border-radius: 4px;
	border-width: 1px;
	border-style: solid;

	display: block;
}
a.button b.o {

	border-color: #5A5A5A; /** rgba fallback **/
	border-color: rgba(0, 0, 0, 0.56);

}
a.button b.m {
	background: transparent url(button.png) repeat-x 0 0;

	border-color: #FFF transparent #C7C7C7; /** rgba fallback **/
	border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);

}
a.button:hover b.m {
	background-position: 0 -80px;

}
a.button:active b.m {
	background-position: 0 -160px;

	border-color: #B7B7B7 transparent #D4D4D4; /** rgba fallback **/
	border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);

}
a.button b.m b {
	display: block;

	font-weight: bold;
	padding: 4px 8px;
	text-shadow: 0 1px 0 #DDD;

	color: #262626;
	/** Make the text unselectable **/
	-moz-user-select: none;

	-webkit-user-select: none;
}

I use the innermost b tag in some other buttons to add an icon to the background. The b.m tag is required because the alpha blending for the b.o border needs to have its own “layer”. Otherwise the b.o border would be on top of the background image and the shading would change according to it.

I am hoping that by going into the detail you can use these techniques in your designs and as Mike mentions in his post; think about your designs in 3D. It is less about using the specific border effects and more about using them together to achieve an overall look.

Notes

I would love to hear your feedback and comments; just catch me on Twitter.

Also, check out zurb’s super awesome CSS3 buttons. They have a take on CSS3 buttons and the buttons are super awesome!

Share

Please do share this on Twitter.

Thanks to @mliao for reading over this post.

оригинал статьи

tags: CSS  CSS3  спрайт  кнопка