Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Синтаксис W3C

.

Синтаксис W3C

Создадим для примера простой радиальный градиент:

Синтаксис W3C

Все три стиля работают совершенно одинаково и создают фигуру показанную на рис. 7.8. В предельном случае нужны лишь два аргумента: начальный и конечный цвета. Полная запись предусматривает указание начальной позиции градиента, его формы и размера.

Синтаксис W3C

Рис. 7.8. Простой радиальный градиент

Давайте изменим начальную позицию:

Синтаксис W3C

В этом случае центр градиента будет находиться в 30 пикселах от верхней границы элемента и в 30 пикселах от его левого края (рис. 7.9).

Как и в случае со свойством background-position, вы можете указывать значение в абсолютных числах, процентах или в ключевых словах для установления исходной точки.

Синтаксис W3C

Рис. 7.9. Градиент, смещенный относительно центра

Несколько слов о параметрах «форма» и «размер». Первый может иметь два значения: circle (круг) и ellipse (эллипс), причем последнее считается значением по умолчанию.

Для второго параметра возможны следующие значения: closest-side

Форма градиента совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса).

сlosest-corner

Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.

farthest-side

Похож по своему действию на closest-side, но градиент распространяется до дальней стороны блока.

farthest-corner

Похож по своему действию на closest-corner, но градиент распространяется до дальнего угла блока.

contain

Синоним closest-side.

cover

Синоним farthest-corner.

В com век типи со спецификацией ВЫ можете доба шит. втором набор параметров, чтобы точно определить горизонтальный и вертикальный размер радиального градиента. В настоящее время он поддерживается только движком WebKit, хотя в будущем должна быть добавлена поддержка со стороны Firefox. На сегодняшний день вам стоит придерживаться синтаксиса, описанного выше, если хотите, чтобы ваш градиент выглядел одинаково в большинстве поддерживаемых браузеров.

Синтаксис ключевых точек точно такой же, как и для линейного градиента: цвет и положение относительно вектора, исходящего из центра градиента:

Синтаксис W3C

Это создает градиент, показанный на рисунке 7.10.

Синтаксис W3C

Рис. 7.10. Радиальный градиент, в котором модифицированы размер и форма и добавлены ключевые точки

.

Читайте так же:
Not found