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

Цель — создание кнопки, как на изображении, не единой картинкой, а с помощью CSS3



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

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

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

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

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

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

* This source code was highlighted with Source Code Highlighter.

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

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. Нижняя граница светлее, так как основная граница также не двигаются
   
5. Боковые края чуть светлее (но не намного), так как они двигаются с поверхностью
   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);
}
   

Ниже представлена большая часть css, а здесь, использваный спрайт.
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;
}

Демо в оригинале статьи