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

Градиенты — одна из самых привлекательных новинок в CSS3. Их почти невозможно было реализовать с помощью техник предыдущего поколения, но в CSS3 это делается легко и просто. Для того чтобы придать документу или веб-странице профессиональный облик, достаточно добавить свойство background с несколькими параметрами (листинг 3.11).

Листинг 3.11. Добавление симпатичного фонового градиента к нашему полю

Body {

Text-align: center;

}

#mainbox {

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

-moz-box-shadow: rgb(150,150,150) 5px 5px 10px; — webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; box-shadow: rgb(150,150,150) 5px 5px 10px;

Background: — webkit-linear-gradient(top, #FFFFFF, #006699); background: — moz-linear-gradient(top, #FFFFFF, #006699);

}

#title {

Font: bold 36px MyNewFont, verdana, sans-serif; text-shadow: rgb(0,0,150) 3px 3px 5px;

}

Font-face {

Font-family: ‘MyNewFont’; src: url(‘font. ttf’);

}

Градиенты определяются как фоны, поэтому для их добавления на страницу можно использовать свойства background и background-image. Синтаксис значений, присваиваемых этим свойствам, таков: linear-gradient (начальная_позиция, начальный_цвет, конечный_цвет). Атрибуты функции linear-gradient() указывают начальную точку и цвета градиента. Первым может идти значение в пикселах или процентах или одно из ключевых слов: top, bottom, left или right (как в нашем примере). В качестве начальной позиции можно также указать угол, для того чтобы задать точное направление градиента (листинг 3.12).

Листинг 3.12. Градиент распространяется под углом 30 градусов background: linear-gradient(30deg, #FFFFFF, #006699);

Существует несколько способов реализации эффекта градиента. В этой главе мы изучили стандартный способ, предложенный комиссией W3C. В таких браузерах, как Firefox и Google Chrome, данный стандарт успешно реализован, однако Internet Explorer и другие все еще пытаются справиться с задачей внедрения. Как всегда, прежде чем продавать свой код, тестируйте его во всех доступных браузерах и проверяйте актуальность реализации.

Помимо этого для каждого цвета можно определить конечную точку (листинг 3.13).

Листинг 3.13. Определение конечных точек background: linear-gradient(top, #FFFFFF 50%, #006699 90%);