ფუნქცია repeating-linear-gradient

ფუნქცია repeating-linear-gradient აკონფიგურირებს მეორდება ხაზოვან გრადიენტს. ეს ნიშნავს, რომ ჩვენ განვსაზღვრავთ გრადიენტის გარკვეულ ნიმუშს, მაგალითად, 0px-დან 10px-მდე - გრადიენტი წითელიდან ცისფერამდე და ეს გრადიენტი განმეორდება მთელ ბლოკზე: 0px-დან 10px-მდე, 10px-დან 20px-მდე, 20px-დან 30px-მდე და ასე შემდეგ.

ეს ფუნქცია გამოიყენება იმ თვისებებზე, რომლებიც აკონფიგურირებენ ფონის სურათს: background, background-image ან საზღვრის სურათს: border-image, background-image-source.

სინტაქსი

სელექტორი {
	background: repeating-linear-gradient([მიმართულება], ფერი1 ზომა1, ფერი2 ზომა2...);
}

მნიშვნელობები

მნიშვნელობა	აღწერა
მიმართულება	აკონფიგურირებს გრადიენტის გარკვეულ მიმართულებას ნებისმიერ კუთხის ერთეულში ან საკვანძო სიტყვებით `top`, `left`, `right`, `bottom` ან მათი კომბინაციით. სიტყვების თანმიმდევრობა არ აქვს მნიშვნელობა. პარამეტრი არასავალდებულოა: თუ ის არ იქნება დაწერილი, გრადიენტი გაერთიანდება ზემოდან ქვემოთ. მიმართულებამდე დგება სიტყვა `to`.
კუთხე	კუთხე ნებისმიერ კუთხის ერთეულში. შეიძლება იყოს დადებითი ან უარყოფითი. პარამეტრი არასავალდებულოა. ერთდროულად შეიძლება იყოს მითითებული ან კუთხე, ან მიმართულება (ან საერთოდ არაფერი).
ფერი1	გრადიენტის საწყისი ფერი ნებისმიერ ფერის ერთეულში.
ფერი2	გრადიენტის საბოლოო ფერი ნებისმიერ ფერის ერთეულში.
ზომა	აკონფიგურირებს გრადიენტის გარკვეული ფერის გაშლილობას ნებისმიერ ზომის ერთეულში.

მაგალითი . ყველაზე მარტივი ვარიანტი

გრადიენტი ასე გამოიყურება: 0px-დან 20px-მდე სუფთა წითელი ფერი, 20px-დან 40px-მდე - გრადიენტი წითელიდან ცისფერამდე. და ასე განმეორდება ზემოდან ქვემოთ (ამისთვის ის არის მეორდება გრადიენტი):

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

მაგალითი . ნათელი ფერები

გრადიენტი ასე გამოიყურება: 0px-დან 20px-მდე სუფთა წითელი ფერი, 20px-დან 40px-მდე - სუფთა ცისფერი (ფინშანი იმაშია, რომ მეორე ფერი იწყება იქ, სადაც მთავრდება პირველი). და ასე განმეორდება ზემოდან ქვემოთ:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

მაგალითი . შევცვალოთ მიმართულება

ახლა გრადიენტის მიმართულება იქნება მარჯვნიდან მარცხნივ:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

მაგალითი . მიმართულება გრადუსებში

მიმართულებად მივუთითოთ კუთხე გრადუსებში:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

მაგალითი . უარყოფითი მნიშვნელობა

გავაკეთოთ მიმართულება უარყოფითი მნიშვნელობით:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

იხილეთ აგრეთვე

ფუნქცია repeating-radial-gradient,
რომელიც ქმნის მეორდება რადიალურ გრადიენტს
ფუნქცია linear-gradient,
რომელიც ქმნის ხაზოვან გრადიენტს
ფუნქცია radial-gradient,
რომელიც ქმნის რადიალურ გრადიენტს