27 Стилни примери за градиент на фона на CSS

Оставането в течение на най -добрите тенденции и стандарти в уеб дизайна е много важно за дизайнер или разработчик. Понастоящем фоновите градиенти се използват широко в съвременните уебсайтове.

В тази статия ще ви преведем през различни примери за градиенти на фона, използвайки CSS.

Фонови градиенти, използващи CSS

CSS градиентът показва плавен преход, използващ два или повече определени цвята. CSS градиентът осигурява по -добър контрол и производителност при използване на действително изображение (на градиент) файл. The фоново изображение CSS свойството се използва за деклариране на градиенти като фон.

xbox one контролерът няма да остане свързан

Има три вида наклони: линейна (създаден с линеен градиент () функция), радиален (създадено с радиален градиент () функция) и конус (създаден с коничен градиент () функция). Също така можете да създавате повтарящи се градиенти с повтарящ се линеен градиент () , повтарящ се радиален градиент () , и повтарящ се коничен градиент () функции.

MDN Docs определя тези функции като:

линеен градиент () : Функцията CSS с линеен градиент () създава изображение, състоящо се от прогресивен преход между два или повече цвята по права линия. Неговият резултат е обект на тип данни, който е специален вид .

радиален градиент () : радиален градиент () CSS функцията създава изображение, състоящо се от прогресивен преход между два или повече цвята, които излъчват от начало. Формата му може да бъде кръг или елипса. Резултатът от функцията е обект на тип данни, който е специален вид .

коничен градиент () : коничен градиент () CSS функцията създава изображение, състоящо се от градиент с цветни преходи, завъртени около централна точка (вместо да излъчва от центъра). Примерните конични градиенти включват кръгови диаграми и цветни колела. Резултатът от коничен градиент () функцията е обект на тип данни, който е специален вид .

повтарящ се линеен градиент () : повтарящ се линеен градиент () CSS функцията създава изображение, състоящо се от повтарящи се линейни градиенти. Той е подобен на gradient/linear-gradient () и приема същите аргументи, но повтаря цвета спира безкрайно във всички посоки, така че да покрие целия му контейнер. Резултатът от функцията е обект на тип данни, който е специален вид .

повтарящ се радиален градиент () : повтарящ се радиален градиент () CSS функцията създава изображение, състоящо се от повтарящи се градиенти, които излъчват от начало. Той е подобен на gradient/radial-gradient () и приема същите аргументи, но повтаря цвета спира безкрайно във всички посоки, така че да покрива целия му контейнер, подобно на gradient/repeating-linear-gradient (). Резултатът от функцията е обект на тип данни, който е специален вид .

повтарящ се коничен градиент () : повтарящ се коничен градиент () CSS функцията създава изображение, състоящо се от повтарящ се градиент (а не от един градиент) с цветови преходи, завъртени около централна точка (вместо излъчване от центъра).

Ето официалния синтаксис на всеки тип градиент.

Официален синтаксис на линейни градиенти

linear-gradient(  
 [ | to ]? ,  
  
)  
 = [to left | to right] || [to top | to bottom]

Официален синтаксис на радиални градиенти

radial-gradient(  
 [ || ]? [ at ]? ,  
  
);

Официален синтаксис на конични градиенти

conic-gradient(  
 [ from ]? [ at ]?,  
  
)

Ето някои страхотни примери за градиент на фона, които могат да подобрят потребителския интерфейс на вашия уебсайт до следващото ниво.