Стандартный синтаксис для радиальных градиентов отличается от рассмотренного синтаксиса линейного градиента всего в нескольких аспектах. Необходимо использовать функцию radial-gradient() и новый атрибут, определяющий форму.
Листинг 3.14. Радиальный градиент
Background: radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
Начальное положение — это источник градиента, и его можно задать как значение в пикселах или процентах или как комбинацию ключевых слов center, top, bottom, left и right. Для определения фигуры доступны два ключевых слова — circle и ellipse, а описание промежуточных точек включает в себя значение цвета и позиции, в которой начинается переход.
Замените кодом из листинга 3.14 соответствующий код в листинге 3.11 и проверьте результат в своем браузере (не забудьте добавить префикс — moz — или — webkit — в зависимости от того, какой браузер используете).
RGBA
Пока что мы объявляли только сплошные цвета, используя шестнадцатеричные значения или функцию rgb(), возвращающую полное значение цвета для указанных десятичных компонентов. В CSS3 была добавлена новая функция под названием rgba(), упрощающая определение цветов и прозрачности. Кроме того, она решает упомянутую ранее проблему со свойством opacity.
У функции rgba() четыре атрибута. Первые — такие же, как у rgb(), и они просто описывают комбинацию цветовых компонентов. Последний атрибут позволяет описывать прозрачные цвета. Он может принимать значения от 0 до 1, где 0 означает полностью прозрачный цвет, а 1 — совершенно непрозрачный.
Листинг 3.15. Усовершенствование тени за счет прозрачности #title {
Font: bold 36px MyNewFont, verdana, sans-serif; text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;
}
Листинг 3.15 содержит простой пример, демонстрирующий, насколько привлекательнее становится эффект, если добавить к нему прозрачность. В определении тени заголовка мы заменили функцию rgb() функцией rgba() и задали значение непрозрачности, равное 0,5. Теперь тень заголовка будет постепенно сливаться с фоном поля, создавая более естественный эффект.
В предыдущих версиях CSS приходилось в каждом браузере применять собственную технику, позволяющую сделать элемент прозрачным. Однако у всех них была одна общая проблема: значение непрозрачности, определенное для элемента, наследовалось всеми его потомками. Функция rgba() решила эту проблему: теперь вы можете запросто связать значение непрозрачности с фоном поля, и это никак не затронет его содержимое.
Замените кодом из листинга 3.15 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.
Добавить комментарий