ფუნქცია radial-gradient
ფუნქცია radial-gradient ადგენს რადიალურ
გრადიენტს. ეს ფუნქცია გამოიყენება იმ თვისებებზე, რომლებიც
ადგენს ფონის სურათს: background,
background-image
ან საზღვრის სურათს: border-image,
background-image-source.
სინტაქსი
სელექტორი {
background: radial-gradient([ფორმა ტიპი პოზიცია], ფერი1 ზომა1, ფერი2 ზომა2...);
}
მნიშვნელობები
| მნიშვნელობა | აღწერა |
|---|---|
| ფორმა |
მიღებული მნიშვნელობები:
ellipse ელიფსური გრადიენტი (ნაგულისხმევად),
circle წრიული გრადიენტი.
|
| ტიპი |
ადგენს გრადიენტის გაწელვას.
მიღებული მნიშვნელობები:
closest-side, closest-corner,
farthest-side, farthest-corner.
|
| პოზიცია |
at საკვანძო სიტყვის შემდეგ
მითითებულია პოზიცია ნებისმიერ ზომის ერთეულში
ან საკვანძო სიტყვების top, bottom,
left, right, center
გამოყენებით სხვადასხვა კომბინაციით.
|
| ფერი1 | გრადიენტის საწყისი ფერი ნებისმიერ ფერის ერთეულში. |
| ფერი2 | გრადიენტის საბოლოო ფერი ნებისმიერ ფერის ერთეულში. |
| ზომა | ადგენს გრადიენტის კონკრეტული ფერის გავრცელებას ნებისმიერ ზომის ერთეულში. |
მნიშვნელობები ტიპისთვის
| მნიშვნელობა | აღწერა |
|---|---|
closest-side |
გრადიენტის ფორმა ემთხვევა მასთან ყველაზე ახლოს მდებარე ბლოკის მხარეს. |
closest-corner |
გრადიენტის ფორმა გამოითვლება უახლოეს კუთხემდე მანძილის ინფორმაციის საფუძველზე. |
farthest-side |
გრადიენტი ვრცელდება ბლოკის შორეულ მხარემდე. |
farthest-corner |
გრადიენტის ფორმა გამოითვლება შორეულ კუთხემდე მანძილის ინფორმაციის საფუძველზე. |
შენიშვნა
ტიპი და ფორმა შეიძლება ერთმანეთთან შეიცვალოს ადგილები, მაგრამ პოზიცია უნდა მოდიოდეს პირველი პარამეტრის ბოლოს. გრადიენტის ტიპი და მისი ზომა არ მუშაობენ ერთად (ლოგიკურია, რადგან ისინი კონფლიქტში არიან). ზომა იმარჯვებს.
მაგალითი . ყველაზე მარტივი ვარიანტი
უბრალოდ დავაყენოთ საწყისი და საბოლოო ფერი:
<div id="elem"></div>
#elem {
background: radial-gradient(red, blue);
width: 200px;
height: 200px;
}
:
მაგალითი . დავამატოთ პოზიცია
დავაყენოთ ცენტრის მდებარეობა:
30px - გადაწევა მარცხნიდან, 100px - გადაწევა ზემოდან:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 100px, red, blue);
width: 200px;
height: 200px;
}
:
მაგალითი . პოზიცია პროცენტებში
დავაყენოთ ცენტრის მდებარეობა პროცენტებში:
30% - გადაწევა მარცხნიდან, 50% - გადაწევა ზემოდან:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30% 50%, red, blue);
width: 200px;
height: 200px;
}
:
მაგალითი . პოზიცია საკვანძო სიტყვით
შესაძლებელია საკვანძო სიტყვების გამოყენება
top, bottom, left,
right, center სხვადასხვა
კომბინაციით. მაგალითად, დავსტაბილოთ გრადიენტი
მარჯვნივ ცენტრში:
<div id="elem"></div>
#elem {
background: radial-gradient(at right center, red, blue);
width: 200px;
height: 200px;
}
:
მაგალითი . გრადიენტის ზომა
ამ შემთხვევაში გრადიენტი იმუშავებს ასე:
0px-დან 20px-მდე იქნება სუფთა
წითელი ფერი, 20px-დან 60px-მდე - გრადიენტი
წითელიდან ცისფერზე, 60px-ის შემდეგ - სუფთა
ცისფერი:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
მაგალითი . რამდენიმე ფერი ზედიზედ
ამ შემთხვევაში გრადიენტი იმუშავებს ასე:
0px-დან 20px-მდე იქნება სუფთა
წითელი ფერი, 20px-დან 40px-მდე
იქნება სუფთა ცისფერი ფერი, 40px-დან
60px-მდე - გრადიენტი ცისფერიდან მწვანეზე,
60px-ის შემდეგ - სუფთა მწვანე:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
width: 200px;
height: 200px;
}
:
მაგალითი . ზომა + პოზიცია
ერთდროულად დავაყენოთ ზომები სხვადასხვა ფერისთვის და გრადიენტის ცენტრის პოზიცია:
<div id="elem"></div>
#elem {
background: radial-gradient(at 30px 60px, red 20px, blue 60px);
width: 200px;
height: 200px;
}
:
მაგალითი . გრადიენტის ფორმა
გრადიენტის ფორმა დგინდება პირველი პარამეტრით
და შეუძლია მიიღოს 2 მნიშვნელობა: circle
(წრიული გრადიენტი) ან ellipse (ელიფსური
გრადიენტი, ნაგულისხმევად). რატომ არ ვნახეთ აქამდე
ელიფსური გრადიენტები, თუმცა
ის ნაგულისხმევად არის დაყენებული? იმიტომ, რომ აქამდე
ბლოკების ფორმა კვადრატული იყო. თუ ჩვენ შევცვლით
ფორმას მართკუთხედზე, დავინახავთ ელიფსურ
გრადიენტს:
<div id="elem"></div>
#elem {
background: radial-gradient(red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
მაგალითი . მრგვალი გრადიენტი
მართკუთხა ბლოკში გავაკეთოთ მრგვალი გრადიენტი.
ამისთვის პირველ პარამეტრად დავაყენოთ
გრადიენტის ფორმა საკვანძო სიტყვის
circle გამოყენებით:
<div id="elem"></div>
#elem {
background: radial-gradient(circle, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
მაგალითი . დავამატოთ პოზიცია
წინა კოდს დავუმატოთ გრადიენტის პოზიციაც:
<div id="elem"></div>
#elem {
background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
width: 300px;
height: 200px;
}
:
მაგალითი . ტიპი farthest-corner + circle
გრადიენტის ფორმა გამოითვლება ბლოკის შორეულ კუთხემდე მანძილის ინფორმაციის საფუძველზე:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
მაგალითი . ტიპი farthest-corner + ellipse
გრადიენტის ფორმა გამოითვლება ბლოკის შორეულ კუთხემდე მანძილის ინფორმაციის საფუძველზე:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
მაგალითი . ტიპი farthest-side + circle
გრადიენტი ვრცელდება ბლოკის შორეულ მხარემდე:
<div id="elem"></div>
#elem {
background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
მაგალითი . ტიპი farthest-side + ellipse
გრადიენტი ვრცელდება ბლოკის შორეულ მხარემდე:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
მაგალითი . ტიპი closest-corner + circle
გრადიენტის ფორმა გამოითვლება ბლოკის უახლოეს კუთხემდე მანძილის ინფორმაციის საფუძველზე:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
მაგალითი . ტიპი closest-corner + ellipse
გრადიენტის ფორმა გამოითვლება ბლოკის უახლოეს კუთხემდე მანძილის ინფორმაციის საფუძველზე:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
მაგალითი . ტიპი closest-side + circle
გრადიენტის ფორმა ემთხვევა მასთან ყველაზე ახლოს მდებარე ბლოკის მხარეს:
<div id="elem"></div>
#elem {
background: radial-gradient(circle closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
მაგალითი . ტიპი closest-side + ellipse
გრადიენტის ფორმა ემთხვევა მასთან ყველაზე ახლოს მდებარე ბლოკის მხარეს:
<div id="elem"></div>
#elem {
background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
width: 300px;
height: 200px;
}
:
იხილეთ აგრეთვე
-
ფუნქცია
linear-gradient,
რომელიც ქმნის წრფივ გრადიენტს -
ფუნქცია
repeating-linear-gradient,
რომელიც ქმნის მზარდ წრფივ გრადიენტს -
ფუნქცია
repeating-radial-gradient,
რომელიც ქმნის მზარდ რადიალურ გრადიენტს
