CSS3 для веб-дизайнеров
Шрифт:
На рис. 6.12 показан полученный результат – так, как его отображает Safari. Теперь у нас есть кнопка со скругленными углами и градиентом. До сих пор не было использовано ни одного изображения и мы добавили лишь несколько строк кода в стилевой файл.
< image l:href="#"/>Рис. 6.12. К кнопке применен CSS-градиент
text-shadow
Теперь добавим почти белую тень под текстом, которая создаст эффект того, что текст вдавлен в кнопку.
Мы воспользуемся RGBA, чтобы высветлить белый цвет до 85%, позволяя серому градиенту немного проходить сквозь него. Мы также задаем положение тени – на один пиксель ниже текста – и размывание тени на один пиксель.
На рис. 6.13 крупным планом показана тень и то, как кнопка выглядит сейчас.
Рис. 6.13. Увеличенное изображение небольшой text-shadow, добавленной, чтобы создать эффект тиснения
Тень на кнопке
Последний фрагмент CSS3, который мы добавим к этой прекрасной кнопке, – небольшая тень (
Вот код, который добавляет свойство
На рис. 6.14 показан результат, отображаемый в Safari, после добавления кнопке
Рис. 6.14. Увеличенное изображение небольшой тени, добавленной к кнопке: благодаря ей кнопка чуть-чуть приподнимается над фоном
На этом мы заканчиваем работу не только с нашей кнопкой, но и со всей формой целиком. Некоторым количеством кода на CSS3 мы преобразили кнопку в том виде, в котором она отображается по умолчанию, в хорошо оформленный элемент, который должным образом сочетается с дизайном всей страницы. Мы предпочли использовать CSS3 вместо изображений, что нормально и безвредно для тех браузеров, которые не поддерживают эти новые свойства. Давайте убедимся в этом самостоятельно.
А как насчет других браузеров?
Открывая форму в Internet Explorer 7 – браузере с нулевой поддержкой CSS3, – мы видим вполне приемлемую рабочую форму (рис. 6.15). Это замечательно! Все улучшения, добавленные свойствами CSS3, были проигнорированы; остался скелет формы, работающий так, как нужно. Цель достигнута.
Рис. 6.15. В IE7 форма выглядит и работает как обычная. Это хорошо