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

^{Рис. 6.07. Увеличенный вид небольшого градиента, расположенного над полем ввода. Поле выглядит так, как будто оно вставлено внутрь страницы}

Мы применили линейный градиент, но в CSS также доступны круговые градиенты.

Пример выше показывает, как различается синтаксис между вариантами -webkit и -moz. Мы добавили небольшой линейный градиент, который переходит от светло-серого (#999) к белому (#fff) и занимает 12% от высоты текстового поля. Мы используем браузерные префиксы на свойстве background-image, чтобы градиент отображался в Safari и Firefox.

На рис. 6.08 показан результат: можно видеть поля ввода со скругленными углами и небольшой внутренней тенью. Изображения не используются.

^{Рис. 6.08. Поля ввода под воздействием CSS-градиентов}

Браузеры, которые пока что не поддерживают CSS-градиенты, проигнорируют эти свойства background-image; поля ввода будут белыми и плоскими. Это нормально. Но гибкость и управляемость, которые приходят вместе с CSS-градиентами, очень привлекательны.

Мы будем использовать градиенты еще немного в следующем разделе – для кнопки «подписаться».

Настоящая кнопка на CSS3

На примере кнопки очень легко показать, как сильно можно преображать вид элементов с помощью CSS3. Сочетая различные приемы, которые мы обсуждали на протяжении этой книги, превратим обычную кнопку в что-то намного более интересное – используя исключительно CSS (рис. 6.09).

Вся прелесть применения CSS3 для оформления кнопки заключается в том, что без использования изображений получается куда более гибкое решение. Если браузер не поддерживает те свойства, которыми мы воспользуемся для оформления кнопки, это нормально. Кнопка будет выглядеть так, как она выглядит по умолчанию в том браузере, который использует посетитель сайта.

Давайте пройдем через все шаги, которые нужно проделать, чтобы обычная кнопка превратилась в прекрасную сияющую кнопку, которая показана справа на рис. 6.09.

^{Рис. 6.09. Слева – вид кнопки по умолчанию (в Safari); справа – кнопка, оформленная средствами CSS3. Никаких изображений!}

Основные стили для кнопки

Сначала добавим поля, сменим шрифт на Helvetica, чтобы кнопка сочеталась с остальными элементами дизайна, уберем обводку и выставим белый цвет фона.

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

padding: 8px 15px;

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

font-weight: bold;

line-height: 1;

color: #444;

border: none;

background-color: #fff;

}

То, что получилось после применения этих простых стилей, показано на рис. 6.10. Уже есть что-то сильно отличающееся от кнопки по умолчанию.

^{Рис. 6.10. Кнопка, с которой убраны обводка и фон по умолчанию}

^{Скругление углов}

Теперь добавим свойство border-radius, чтобы скруглить углы кнопки (рис. 6.11).

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

padding: 8px 15px;

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

font-weight: bold;

line-height: 1;

color: #444;

border: none;

background-color: #fff;

-webkit-border-radius: 23px;

-moz-border-radius: 23px;

-o-border-radius: 23px;

border-radius: 23px;

}

^{Рис. 6.11. Скругление углов кнопки свойством border-radius}

Поэкспериментировав с разными значениями, мы остановились на радиусе в 23px

.

Линейный градиент

Теперь применим линейный градиент с переходом цвета от светло-серого (#bbb) к белому (#fff), снизу вверх. Мы вновь воспользуемся инструментом Оллсоппа, чтобы получить верный код для Safari, Chrome и Firefox.

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

padding: 8px 15px;

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

font-weight: bold;

line-height: 1;

color: #444;

border: none;

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

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