CSS3 для веб-дизайнеров

Сидерхолм Дэн

– webkit-border-radius: 23px;

– moz-border-radius: 23px;

– o-border-radius: 23px;

border-radius: 23px;

}

На рис. 6.12 показан полученный результат – так, как его отображает Safari. Теперь у нас есть кнопка со скругленными углами и градиентом. До сих пор не было использовано ни одного изображения и мы добавили лишь несколько строк кода в стилевой файл.

< image l:href="#"/>

^{Рис. 6.12. К}

кнопке применен CSS-градиент

text-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, #fff, #bbb);

background-color: #fff;

– webkit-border-radius: 23px;

– moz-border-radius: 23px;

– o-border-radius: 23px;

border-radius: 23px;

}

Мы воспользуемся RGBA, чтобы высветлить белый цвет до 85%, позволяя серому градиенту немного проходить сквозь него. Мы также задаем положение тени – на один пиксель ниже текста – и размывание тени на один пиксель.

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

^{Рис. 6.13. Увеличенное изображение небольшой text-shadow, добавленной, чтобы создать эффект тиснения}

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

Последний фрагмент CSS3, который мы добавим к этой прекрасной кнопке, – небольшая тень (

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. Увеличенное изображение небольшой тени, добавленной к кнопке: благодаря ей кнопка чуть-чуть приподнимается над фоном}

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

А как насчет других браузеров?

Открывая форму в Internet Explorer 7 – браузере с нулевой поддержкой CSS3, – мы видим вполне приемлемую рабочую форму (рис. 6.15). Это замечательно! Все улучшения, добавленные свойствами CSS3, были проигнорированы; остался скелет формы, работающий так, как нужно. Цель достигнута.

^{Рис. 6.15. В IE7 форма выглядит и работает как обычная. Это хорошо}