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

Радиальный градиент по принцыпу построению очень похож на линейный градиент, но есть некоторые отличия.

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

background: radial-gradient(#e66465, #9198e5);

Получим:

Радиальный градиент имеет 4 параметра:
1. ТИП: имеет 2 значения - circle  и   ellipse

2. РАЗМЕР:

Значение	Код	Описание	Вид
closest-side	background: radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: radial-gradient(ellipse closest-side at 30px 20px, #fff, #000);	Форма градиента совпадает с ближайшей к нему стороной блока.
closest-corner	background: radial-gradient(circle closest-corner at 30px 20px, #fff, #000); background: radial-gradient(ellipse closest-corner at 30px 20px, #fff, #000);	Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока.
farthest-side	background: radial-gradient(circle farthest-side at 30px 20px, #fff, #000); background: radial-gradient(ellipse farthest-side at 30px 20px, #fff, #000);	Градиент распространяется до дальней стороны блока.
farthest-corner	background: radial-gradient(circle farthest-corner at 30px 20px, #fff, #000); background: radial-gradient(ellipse farthest-corner at 30px 20px, #fff, #000);	Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока,

3. ПОЗИЦИЯ. По умолчанию в центре. Можно указывать:

• at top left 
• at 0% 0%
• at 0px 0px

4. ЦВЕТ.

Примеры радиального градиента:

Пример1:

.radrad1 {
  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}

Пример2:

.radgrad2 {
  background-image: radial-gradient(farthest-corner at 40px 40px,
      #f35 0%, #43e 100%);
}

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

===

Читать о повторе градиента - repeating-linear-gradient

Примеры линейных градиентов как фона - смотреть
Онлайн генератор градиента - http://www.colorzilla.com/gradient-editor/

Залишити свій коментар:

• Який браузер в компанії Google?
• Надіслати коментар