Взгляд на CSS3 градиент (линейный и радиальный градиенты)

Здравствуйте, уважаемые читатели XoZblog a! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым &%23171;облегчить&%23187; сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

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

Как говориться в классификации, градиенты в CSS3 являются изображениями. Для них нет специальных свойств. А для объявления используется свойство фонового изображения.

В общем случае синтаксис градиента (линейного) выглядит так:

div &%23123;
background-image. -webkit-linear-gradient &%2340; top. %23FF5A00 0%. %23FFAE00 100% &%2341; ;
background-image. -moz-linear-gradient &%2340; top. %23FF5A00 0%. %23FFAE00 100% &%2341; ;
background-image. -ms-linear-gradient &%2340; top. %23FF5A00 0%. %23FFAE00 100% &%2341; ;
background-image. -o-linear-gradient &%2340; top. %23FF5A00 0%. %23FFAE00 100% &%2341; ;
background-image. linear-gradient &%2340; top. %23FF5A00 0%. %23FFAE00 100% &%2341; ;
&%23125;

Итак, давайте обо всем по порядку.

Прежде всего, линейный градиент объявлен функцией linear-gradient(). Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom. left и right ;

div &%23123;
background-image. linear-gradient &%2340; top. %23FF5A00. %23FFAE00 &%2341; ;
&%23125;

Чтобы добиться перехода цвета из одного угла в другой мы можем использовать градус угла, вот пример:

div &%23123;
background-image. linear-gradient &%2340; 45deg. %23FF5A00. %23FFAE00 &%2341; ;
&%23125;

Если угол будет отрицательным то позиция смениться с нижнего левого угла на верхний левый.

Второе значение функции это начальный цвет и его стоп позиция, которая указана в процентах. Объявление данной позиции не обязательно, браузер по умолчанию присвоит первому цвету значение 0% .

Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100%. Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50%. то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:

div &%23123;
background-image. linear-gradient &%2340; top. %23FF5A00 0%. %23FFAE00 100% &%2341; ;
&%23125;

Теперь давайте изменим значение стоп позиций, и на этот раз мы установим 50% для первого и второго цвета:

div &%23123;
background-image. linear-gradient &%2340; top. %23FF5A00 50%. %23FFAE00 50% &%2341; ;
&%23125;

Получаем одинаковые по высоте полоски. C четкой границей, перехода цвета не будет. Чтобы лучше понять как это работает поэкспериментируйте со значениями.

Радиальный градиент

Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient(). Также есть и основные значения: это форма радиального градиента ( circle &%238212; круг или ellipse &%238212; эллипс), начальный и конечный цвет. Синтаксис следующий:

div &%23123;
background. radial-gradient &%2340; circle. %23F9E497. %23FFAE00 &%2341; ;
&%23125;

Если не указывать форму, то по-умолчанию будет установлен эллипс.

Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами ( top. bottom. left. right и center ), а также их комбинациями, либо указать в процентах или пикселях.

• По центру вверху &%238212; top &%238212; 50% 0%;
• В левом верхнем углу &%238212; left top &%238212; 0% 0%;
• В правом верхнем углу &%238212; right top &%238212; 100% 0%;
• По центру &%238212; center &%238212; 50% 50%;
• Слева по центру &%238212; left center &%238212; 0% 50%;
• Справа по центру &%238212; right center &%238212; 100% 50%;
• По центру снизу &%238212; bottom &%238212; 50% 100%;
• В левом нижнем углу &%238212; left bottom &%238212; 0% 100%;
• В правом нижнем углу &%238212; right bottom &%238212; 100% 100%.

Вот пример с процентами:

div &%23123;
background-image. radial-gradient &%2340; 70% 20%. circle. %23F9E497. %23FFAE00 &%2341; ;
&%23125;

Первое значение по оси Х второе по У .

Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

Размер градиента рассчитывается из расстояния до любой ближней стороны блока (для circle ) или до ближних сторон по X и по У (для ellipse ). Примеры чуть ниже.

Размер также рассчитывается из расстояния, но уже до дальних сторон.