Тень на кнопке.

Последний фрагмент CSS, который мы добавим к этой прекрасной кнопке, – небольшая тень ( box-shadow), которая даст еще немного объема. С такой тенью кнопка будет выглядеть лучше на сером фоне.

Вот код, который добавляет свойство box-shadow, работающее в браузерах, в которых оно сейчас поддерживается, как и в будущих браузерах:

#thing-alerts input[type="submit"] {

Padding: 8px 15px;

Font-family: Helvetica, Arial, sans-serif;

Font-weight: bold;

Line-height: 1;

Color: #444;

Border: none;

Text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);

Background-image: – webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));

Background-image: – moz-linear-gradient(0% 100% 90deg, #bbb, #fff);

Background-color: #fff;

-webkit-border-radius: 23px;

-moz-border-radius: 23px;

-o-border-radius: 23px;

Border-radius: 23px;

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

Box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

}

На рис. 6.14 показан результат, отображаемый в Safari, после добавления кнопке box-shadow, которая расположена на 1px относительно верха, и с размытием в 2px. Мы используем полупрозрачный черный цвет с помощью RGBA, так что фон просвечивает сквозь полупрозрачную тень.

^{Рис. 6.14. Увеличенное изображение небольшой тени, добавленной к кнопке: благодаря ей кнопка чуть-чуть приподнимается над фоном.}

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