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

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

CSS функция radial-gradient создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа <gradient>, который является расширением типа <image>.

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


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

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/

 
 Chrome  Edge  Firefox  Internet  Opera  Safari
26 12 16 10 12.1 6.1
 
 Android  Chrome  Edge  Firefox  Opera  Safari  Samsung
Yes 26 Yes 16 12.1 Yes Yes

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019