CSS ග්‍රේඩියන්ට් උත්පාදකය

වර්ණ සහ කෝණය තෝරන්න පමණක්, CSS ග්‍රේඩියන්ට් කේතය පෙරදසුන සමඟ උත්පාදනය කරයි

යාවත්කාලීන තොරතුරුCSS ග්‍රේඩියන්ට් උත්පාදකය එක් කරන ලදී, වර්ණ සහ කෝණය තෝරා කේතය උත්පාදනය කරයියාවත්කාලීන තොරතුරු බලන්න

විශේෂාංග

පෙරදසුන සහ කේතය එකවර යාවත්කාලීන වේ

වර්ණය හෝ කෝණය වෙනස් කරන සෑම විටම පෙනුම සහ CSS එකවර වෙනස් වේ

රේඛීය, වෘත්තාකාර සහ විදුරුම් වර්ග සඳහා සහාය

කෝණය, හැඩය, කේන්ද්‍ර ස්ථානය දක්වා වර්ගය අනුව විස්තරාත්මකව නියම කරන්න

වර්ණ 10ක් දක්වා ඇදගෙන සැකසීම

වර්ණයේ ස්ථානය තීරුව මත ඇදීමෙන්ද, විනිවිදභාවය ස්ලයිඩරයෙන්ද සකසන්න

සාම්පල 8ක් සහ අහඹු උත්පාදනය

ජනප්‍රිය වර්ණ සංයෝජන හෝ අහඹු වර්ණ සංයෝජන ආරම්භක ලක්ෂ්‍යයක් ලෙස භාවිතා කර සියුම් ලෙස සකසන්න

භාවිත ක්‍රමය

වර්ගය තෝරන්න

රේඛීය, වෘත්තාකාර, විදුරුම් වලින් ග්‍රේඩියන්ට් වර්ගය තෝරන්න

වර්ණ තීරණය කරන්න

වර්ණ කේතයෙන් හෝ සාම්පලයෙන් වර්ණය තෝරා, "වර්ණයක් එක් කරන්න" මගින් වර්ණ වැඩි කර ස්ථානය සහ විනිවිදභාවය සකසන්න

දිශාව සකසන්න

රේඛීය සඳහා කෝණය හෝ දිශා බොත්තම්, වෘත්තාකාර සහ විදුරුම් සඳහා කේන්ද්‍ර ස්ථානය නියම කරන්න

කේතය පිටපත් කරන්න

"පිටපත් කරන්න" බොත්තමෙන් තනි පේළියක CSS ඔබේ විලාසයට අලවන්න

භාවිත අවස්ථා

හීරෝ රූපයක පසුබිම සෑදීම

වෙබ් අඩවියේ ඉහළ කොටසෙහි හෝ බොත්තමක පසුබිම් වර්ණය කේතයක් නොලියා තීරණය කරන්න

බ්ලොග් ශීර්ෂයේ වර්ණ තේරීම

සාම්පලයෙන් සමීප වර්ණ සංයෝජනයක් තෝරා ලිපියේ ශීර්ෂ පසුබිම සකසන්න

ඡායාරූපයක් මත එක් කරන ස්ථරය

විනිවිදභාවය අඩු කළ වර්ණයකින් ඡායාරූපය මත අර්ධ විනිවිද පෙනෙන ස්ථරයක් සාදන්න

බහු-වර්ණ ග්‍රේඩියන්ට් සකස් කිරීම

වර්ණ 3ක් හෝ වැඩි ප්‍රමාණයක මායිම් ස්ථාන ටිකෙන් ටික ඇදගෙන සමීප කරන්න

මූලික දැනුම

linear, radial, conic අතර වෙනස

CSS ග්‍රේඩියන්ට්වල වර්ණ වෙනස් වන ආකාරය වෙනස් වන ශ්‍රිත තුනක් ඇති අතර, ඒ සියල්ල background ගුණයේ ලියා භාවිතා කරයි.

linear-gradient：linear-gradient යනු, නියම කරන ලද කෝණයේ සරල රේඛාවක් ඔස්සේ වර්ණ වෙනස් වන රේඛීය ග්‍රේඩියන්ට් එකකි.
radial-gradient：radial-gradient යනු, කේන්ද්‍ර ස්ථානයේ සිට පිටතට වෘත්තයක හෝ ඉලිප්සයක හැඩයෙන් වර්ණ පැතිරෙන වෘත්තාකාර ග්‍රේඩියන්ට් එකකි.
conic-gradient：conic-gradient යනු, කේන්ද්‍ර ස්ථානය වටා ඔරලෝසු දිශාවට එක් වටයක් කරමින් වර්ණ වෙනස් වන විදුරුම් හැඩැති ග්‍රේඩියන්ට් එකකි.

කෝණ සහ දිශා මූල පද අතර සම්බන්ධය

linear-gradient හි කෝණය, 0deg යනු පහළ සිට ඉහළට යන දිශාව වන අතර, අගය වැඩි වන තරමට ඔරලෝසු දිශාවට භ්‍රමණය වේ. කෝණය "to right" වැනි දිශා මූල පදවලින්ද ලිවිය හැකි අතර, 90deg "to right" ට සමානද, 180deg "to bottom" ට සමානද වේ.

වර්ණ නැවතුම් ලක්ෂ්‍ය සහ විනිවිදභාවය ලියන ආකාරය

වර්ණ නැවතුම් ලක්ෂ්‍යය (color stop) යනු, ග්‍රේඩියන්ට් එකේ එම වර්ණය වන ස්ථානය වන අතර, 0% ආරම්භක ලක්ෂ්‍යයද, 100% අවසන් ලක්ෂ්‍යයද නියෝජනය කරයි. උදාහරණයක් ලෙස "#3B82F6 0%, #8B5CF6 100%" යනු, ආරම්භක නිල් වර්ණයේ සිට අවසන් දම් වර්ණයට වෙනස් වන නියමයකි.

#RRGGBB ආකෘතිය：#RRGGBB ආකෘතිය යනු, රතු, කොළ, නිල් ප්‍රබලතාවය ඉලක්කම් 2 බැගින් 16 පාදයේ ලිවීමේ වර්ණ ආකාරයකි, #FF0000 අපාරදෘශ්‍ය රතු වර්ණය නියෝජනය කරයි.
rgba ආකෘතිය：rgba ආකෘතිය යනු, රතු, කොළ, නිල් අගයන්ට (0 සිට 255) විනිවිදභාවය (0 සිට 1) එකතු කළ වර්ණ ආකාරයකි, විනිවිදභාවය 0.5 යනු අර්ධ විනිවිද පෙනෙන වර්ණයකි.