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යනු,
යනු පුනරාවර්තන අරය අනුක්රමණයක් සාදයි
