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