ფუნქცია linear-gradient
ფუნქცია linear-gradient აკონფიგურირებს ხაზოვან
გრადიენტს. გამოიყენება იმ თვისებებზე, რომლებიც
აკონფიგურირებს ფონის სურათს: background,
background-image
ან საზღვრის სურათს: border-image,
background-image-source.
სინტაქსი
სელექტორი {
background: linear-gradient([კუთხე ან მიმართულება], ფერი1 ზომა1, ფერი2 ზომა2...);
}
მნიშვნელობები
| მნიშვნელობა | აღწერა |
|---|---|
| მიმართულება |
აკონფიგურირებს გრადიენტის კონკრეტულ მიმართულებას ნებისმიერ კუთხის ერთეულში
ან საკვანძო სიტყვებით top, left, right, bottom
ან მათი კომბინაციით: top left, top right და ასე შემდეგ.
სიტყვების თანმიმდევრობა არ აქვს მნიშვნელობა: შეგიძლიათ დაწეროთ top left და left top,
სხვაობა არ არის. პარამეტრი არასავალდებულოა: თუ ის არ იწერება, გრადიენტი იქნება
ზემოდან ქვემოთ (როგორც to top-ის შემთხვევაში). მიმართულებამდე იდება სიტყვა to.
|
| კუთხე | კუთხე ნებისმიერ კუთხის ერთეულში. შეიძლება იყოს დადებითი ან უარყოფითი. პარამეტრი არასავალდებულოა. ერთდროულად შეიძლება იყოს მითითებული ან კუთხე, ან მიმართულება (ან საერთოდ არაფერი). |
| ფერი1 | გრადიენტის საწყისი ფერი ნებისმიერ ფერის ერთეულში. |
| ფერი2 | გრადიენტის საბოლოო ფერი ნებისმიერ ფერის ერთეულში. |
| ზომა | აკონფიგურირებს გრადიენტის კონკრეტული ფერის გავრცელებას ნებისმიერ ზომის ერთეულში. |
მაგალითი . ყველაზე მარტივი ვარიანტი
სინტაქსი:
სელექტორი {
background: linear-gradient(საწყისი ფერი, საბოლოო ფერი);
}
შევხედოთ მაგალითს:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
მაგალითი . ვამატებთ კუთხეს
სინტაქსი:
სელექტორი {
background: linear-gradient(კუთხე, საწყისი ფერი, საბოლოო ფერი);
}
შევხედოთ მაგალითს:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
მაგალითი . ვამატებთ მიმართულებას
კუთხის ნაცვლად შეგიძლიათ დაამატოთ მიმართულება
top, left, right, bottom
ან მათი კომბინაცია: top left, top right
მიმართულებამდე იდება სიტყვა to.
სინტაქსი:
სელექტორი {
background: linear-gradient(მიმართულება, საწყისი ფერი, საბოლოო ფერი);
}
შევხედოთ მაგალითს:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
მაგალითი . ვამატებთ მიმართულებას
მივუთითოთ სხვა მიმართულება:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
მაგალითი . ვამატებთ ზომას
სინტაქსი:
სელექტორი {
background: linear-gradient(ფერი1 ზომა1, ფერი2 ზომა2);
}
შემდეგ მაგალითში ქცევა იქნება შემდეგი:
სუფთა წითელი ფერი იქნება 0px-დან
30px-მდე, 30px-დან 50px-მდე
იქნება გრადიენტი წითელიდან ლურჯამდე, ხოლო
50px-დან და ბოლომდე - სუფთა ლურჯი:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
მაგალითი . ვამატებთ ორზე მეტ 2 ფერს
სინტაქსი:
სელექტორი {
background: linear-gradient(ფერი1 ზომა1, ფერი2 ზომა2, ფერი3 ზომა3...);
}
შემდეგ მაგალითში ქცევა იქნება შემდეგი:
სუფთა წითელი ფერი იქნება 0px-დან
30px-მდე, 30px-დან 50px-მდე
იქნება გრადიენტი წითელიდან ლურჯამდე, ხოლო
50px-დან 70px-მდე - გრადიენტი ლურჯიდან
მწვანემდე, ხოლო 70px-ის შემდეგ - სუფთა მწვანე:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
მაგალითი . მკვეთრი გადასვლები
შემდეგ მაგალითში ქცევა იქნება შემდეგი:
სუფთა წითელი ფერი იქნება 0px-დან
30px-მდე, სუფთა ლურჯი - 30px-დან
60px-მდე, სუფთა მწვანე - 60px-ის შემდეგ
(red 0px-ის დაწერა არ არის აუცილებელი):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
მაგალითი . ზომების მითითება პროცენტებშიც შეიძლება
შემდეგ მაგალითში ქცევა იქნება შემდეგი:
სუფთა წითელი ფერი იქნება 0%-დან
30%-მდე, სუფთა ლურჯი - 30%-დან
60%-მდე, სუფთა მწვანე - 60%-ის შემდეგ
(red 0%-ის დაწერა არ არის აუცილებელი):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
მაგალითი . კომბინაცია background-size-თან
შემდეგ მაგალითში ქცევა იქნება შემდეგი:
სუფთა წითელი ფერი იქნება 0px-დან
30px-მდე, სუფთა ლურჯი - 30px-დან
60px-მდე, ამასობაში ეს ყველაფერი განმეორდება
ნაწილებად ყოველ 60px-ზე (background-size:
60px;-ის გამო):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
ასევე იხილეთ
-
ფუნქცია
radial-gradient,
რომელიც ქმნის რადიალურ გრადიენტს -
ფუნქცია
repeating-linear-gradient,
რომელიც ქმნის მეორდებად ხაზოვან გრადიენტს -
ფუნქცია
repeating-radial-gradient,
რომელიც ქმნის მეორდებად რადიალურ გრადიენტს
