04 දින 01
CSS3 සමඟ හරස් බ්රවුසර් ලීනියර් ග්රැමිඩන්ට් සෑදීම
රේඛීය ග්රිනිං
වර්ණ 2 කින් යුත් රේඛීය අනුක්රමයක් ඔබ දකිනු ඇත. මෙයින් අදහස් වන්නේ, මෙම අනුක්රමණය පළමු රේඛාව සිට දෙවන රේඛාව දක්වා දෙවන පැත්තෙන් ක්රමයෙන් වෙනස් වන සරල රේඛාවකට ගමන් කරනු ඇති බවයි. මෙම පිටුවෙහි රූපය # 999 (අඳුරු අළු) සිට #fff (සුදු) දක්වා සරල වමේ සිට දකුණට ගැළපේ.
රේඛීය අනුක්රමයන් නිර්වචනය කිරීමට පහසු වන අතර බ්රවුසරයේ වඩාත් සහාය ලබා ගත හැක. CSS3 රේඛීය ඇමිණුම් ඇන්ඩ්රොයිඩ් 2.3+, Chrome 1+, ෆයර්ෆොක්ස් 3.6+, ඔපෙරා 11.1+, සහ සෆාරි 4+ හි සහාය දක්වයි. ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් ෆිල්ටරය භාවිතා කරමින් භ්රමණ ලෙස එකතු කර නැවත IE 5.5 වෙතට සහාය දක්වයි. මෙය CSS3 නොවේ, නමුත් එය හරස් බ්රවුසර අනුකූලතාව සඳහා විකල්පයකි.
ඔබ යම්කිසි වෙනස්කම් කිහිපයක් අර්ථ දැක්වීමට අවශ්ය නම්,
- එය රේඛීය හෝ රේඩියල් කුමන ආකාරයෙන්ද?
- මෙම කෝණය ආරම්භ කළ යුත්තේ කොතැනින්ද?
- භුමිය නැවැත්විය යුතු ස්ථානය
- ඒවායේ කෝණයන් සහ ඒවා ආරම්භ කිරීම සහ නැවත්විය යුතු ස්ථාන මොනවාද?
CSS3 භාවිතා කරමින් රේඛීය අනුක්රමයන් නිර්වචනය කිරීම සඳහා, ඔබ ලියන්නේ:
රේඛීය-අනුක්රමණය ( කෝණය හෝ පැත්ත හෝ කෝණය , වර්ණ නැවතුම් , වර්ණ නැවතුම් )
- පළමුව ඔබ රේඛීය- අනුග්රාහක නාමයෙන් වර්ගීකරණයේ වර්ගය නිර්ණය කරයි.
- ඉන්පසුව, ඔබ ක්රම දෙකකින් එකක් තුළ ආරම්භක සහ නැවතුම් ස්ථාන අර්ථ දක්වනු ලැබේ: 0 සිට 359 සිට 0 සිට 359 දක්වා අංශක කෝණය ඍජු දර්ශකයක් සහිතව අංශක කෝණයෙහි කෝණය. එසේ නැතහොත් වම් හෝ දකුණු, පහළ සහ ඉහළ වැනි "පැත්ත හෝ කෙළවර" ක්රියාකාරීත්වය සමඟ. ඊළඟ පිටුවෙහි වැඩි විස්තර මෙම කරුණු පැහැදිලි කරනු ඇත. ඔබ මේවායින් පිටතට යනවා නම්, උච්චතමය මූලද්රව්යයේ පහළ සිට පහළට ගමන් කරයි.
- එවිට ඔබ වර්ණය නතර කරයි. වර්ණ කේතය හා විකල්ප ප්රතිශතය සමඟ වර්ණ නතර කරයි. මෙම ප්රතිශතය එම වර්ණය සමඟ ආරම්භ කිරීමට හෝ අවසන් කිරීමට බ්රව්සරයේ බ්රවුසරයට කියනු ලැබේ. ප්රකෘතිය වන්නේ රේඛාව දිගේ ඒකාකාරව වර්ණ තැබීමයි. 3 පිටුවෙහි වර්ණ නැවතුම් පිළිබඳව ඔබ වැඩි විස්තර දැන ගනියි.
ඉතින්, CSS3 සමඟ ඉහත gradient නිර්වචනය කරන්න, ඔබ ලියන්න:
රේඛීය-අනුක්රමණය (වමේ, # 999999 0%, #ffffff 100%);
තවද එය DIV පසුබිමක් ලෙස තැබිය යුතුය:
div {
පසුබිම් රූප: රේඛීය-අනුක්රමණය (වමේ, # 999999 0%, #ffffff 100%;
}}
CSS3 සඳහා රේඛීය ග්රාහකයින් සඳහා බ්රවුසර් දිගුවන්
ඔබගේ බ්රසීලයට හරස් බ්රවුසරයක් ලබා ගැනීමට නම්, බොහෝ බ්රව්සර සහ අන්තර්ජාතික Explorer 9 සහ පහළ (ඇත්ත වශයෙන්ම 2 පෙරහන්) සඳහා බ්රවුසර දිගු භාවිතා කළ යුතුය. මෙම සියල්ලම ඔබගේ gradient නිර්වචනය කිරීමට එකම මූලද්රව්ය ලබා ගත හැකිය (IE පමණක් IE දෙකේ දී වර්ණ ග්රාහකයින් අර්ථ දක්වන්න පුළුවන් බව හැර).
මයික්රොසොෆ්ට් ෆිල්ටර් සහ දිගුව - අන්තර්ජාල බ්රවුසරයේ විවිධ බ්රවුසර සංස්කරණ සඳහා ඔබට විවිධාකාර රේඛා තුනක් අවශ්ය වන නිසා අන්තර්ජාලය භාවිතා කරන්නන්ට වඩාත්ම අභියෝගාත්මක වේ. ඉහත අළු සිට සුදු පැහැයට හරවා ගැනීම සඳහා ඔබ මෙසේ ලියා ඇත:
/ * IE 5.5-7 * /
පෙරහන්: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "ඉදිරියට: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-line-gradient (වමේ, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- දිගුව CSS3 දේපල ලෙස ක්රියා කරයි, පමණක් -moz-දිගුව සමඟ. ෆයර්ෆොක්ස් සඳහා ඉහත gradient ලබා ගැනීමට, ලියා:
-moz-රේඛීය-අනුක්රමණය (වමේ, # 999999 0%, #ffffff 100%);
Opera Extension -The -o- දිගුව ඔපෙරා 11.1+ දක්වා වෙනස් වේ. ඉහත gradient ලබා ගැනීම සඳහා, ලියන්න:
-∞-රේඛීය-අනුක්රමණය (වමේ, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit-දිගුව CSS3 දේපල වැනි බොහෝ දේ ක්රියා කරයි. Safari 5.1+ හෝ Chrome 10+ සඳහා ඉහත gradient නිර්වචනය කරන්න:
-webkit-linear-gradient (වමේ, # 999999 0%, #ffffff 100%);
Chrome 2+ සහ Safari 4+ සමඟ වැඩ කරන වෙබ්කයිට් දිගුවෙහි පැරණි අනුවාදයක්ද තිබේ. එහි දී ඔබ දේපල නමට වඩා වටිනාකමක් ලෙස ප්රේරක වර්ගයක් අර්ථ දක්වයි. මෙම දිගුව සමඟ අළු සිට සුදු පැහැති අනුක්රමයක් ලබා ගැනීම සඳහා, ලියන්න:
-webkit-gradient (රේඛීය, වම් ඉහළ, දකුණු පස, වර්ණ-නැවතුම් (0%, # 999999), වර්ණ-නැවතුම් (100%, # ffffff));
සම්පූර්ණ CSS3 ලීනියර් ශ්රේණිගත CSS කේතය
මුලින්ම අළු පැහැයේ සිට සුදු පැහැති මාරු කිරීම සඳහා පූර්ණ හරස් බ්රවුසර් සහය ලබා දීම සඳහා පළමුවෙන්ම අනුමත නොකරන බ්රව්සර් සඳහා අනපේක්ෂිත ඝන වර්ණයක් ඇතුළත් කළ යුතු අතර අවසාන අයිතමය සම්පූර්ණයෙන්ම අනුකූල වන බ්රවුසර සඳහා CSS3 ශෛලිය විය යුතුය. ඉතින් ඔබ ලියන්නේ:
පසුබිම: # 999999;
පසුබිම: -moz-රේඛීය-අනුක්රමණය (වමේ, # 999999 0%, #ffffff 100%);
පසුබිම: -webkit-gradient (රේඛීය, වම් ඉහළට, දකුණු පස, වර්න-නැවතුම් (0%, # 999999), වර්ණ-නැවතුම් (100%, # ffffff));
පසුබිම: -webkit-linear-gradient (වමේ, # 999999 0%, #ffffff 100%);
පසුබිම: - linear-gradient (වමේ, # 999999 0%, #ffffff 100%);
පසුබිම: -ms-රේඛීය-gradient (වමේ, # 999999 0%, #ffffff 100%);
පෙරහන්: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: අනුක්රමයෙන්: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
පසුබිම: linear-gradient (වමේ, # 999999 0%, #ffffff 100%);
මෙම නිබන්ධනයෙහි ඊළඟ පිටු වඩාත් විස්තරාත්මකව දැක්වෙන අතර, අවසාන පිටුවේ ස්වයංක්රීයව CSS3 භ්රමණ තනතුරු නිර්මාණය කිරීම සඳහා අළුත්ම උපකරණයකි.
CSS භාවිතා කරමින් මෙම ක්රියාවලියේදී මෙම රේඛීය අනුක්රමණය බලන්න.
02 සිට 04 දක්වා
ඩිගෝලීය ග්රැයිඩින් සෑදීම-කෝණියේ කෝණ
ආරම්භක සහ නැවතුම් ස්ථාන කෝණයෙහි කෝණය තීරණය වේ. බොහෝ රේඛීය අනුක්රමයන් ඉහළ සිට පහළට හෝ වමේ සිට දකුණට වේ. නමුත් රේඛිත රේඛාවක් මත ගමන් කරන අනුක්රමයක් ගොඩනැඟිය හැක. මෙම පින්තූරයෙහි රූපයේ සිට දකුණට වමේ සිට රූපය හරහා අංශක 45 ක් ඇතුලත සරල අනුක්රමයක් පෙන්වයි.
ශ්රේණි නිශ්චය කිරීම සඳහා කෝණ
මෙම කෝණය මූලද්රව්යයෙහි මධ්යස්ථ කවයක් තුල රේඛාවක් රේඛාව වේ. දිගින් දිගට හරවන ස්ථාන, දකුණට 90 දකුණට, 180 ඩී ලකුණු පහළට, සහ වමේ සිට 270 ඩී. ඔබ 0 සිට 359 සිට ඕනෑම කෝණයක් අර්ථ දැක්විය හැක.
ඔබ චතුරස්රයකදී අංශක 45 ක් උස පහළ වම් කෙළවරේ පහළ දකුණේ සිට චලනය වන නමුත්, සෘජුකෝණාස්රයේ දී ආරම්භය සහ අවසන් කරුණු හැඩයේ පිටතින් පෙනෙන පරිදි, ආරම්භක හා අවසාන ස්ථාන ස්වල්ප වශයෙනි.
ප්රෝටෝන අනුක්රමයක් අර්ථ දැක්වීමට වඩාත් පොදු ක්රමයක් වන්නේ ඉහළ දකුණ වැනි කෙළවරක් අර්ථ දැක්වීමයි. එම කෝණය ප්රතිවිරුද්ධ කොටසේ සිට එම කෝණයෙන් ගමන් කරනු ඇත. පහත සඳහන් ප්රධාන වචන සමඟ ආරම්භක ස්ථායිකරණ නිර්වචනය කළ හැකිය:
- ඉහල
- හරි
- පතුලේ
- වමට
- මධ්යස්ථානයයි
තවද ඔවුන් වඩාත් විශේෂිත විය හැකිය:
- ඉහළ දකුණේ
- ඉහළ වම්පස
- ඉහළම ස්ථානය
- පහළ දකුණේ
- පහළ වම්පස
- පහළ මැද
- හරි මැද
- වම් මධ්යස්ථානය
මෙහි දැක්වෙන්නේ පින්තූරයට සමාන අකුරක CSS ය, රතු සිට සුදු පස ඉහළ කෙළවරේ සිට පහළට වමට:
පසුබිම: ## 901A1C;
පසුබිම් රූප: -moz-linear-gradient (දකුණු පස, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (linear, right top, left bottom, color-stop (0, # 901A1C), වර්ණ-නැවතුම් (1, #FFFFFF);
පසුබිම: -webkit-linear-gradient (දකුණු පස, # 901A1C 0%, #ffffff 100%);
පසුබිම: -O-රේඛීය-අනුක්රමණය (දකුණු පස, # 901A1C 0%, #ffffff 100%);
පසුබිම: -ms-line-gradient (දකුණු පස, # 901A1C 0%, #ffffff 100%);
පසුබිම: රේඛීය-ප්රේරක (දකුණු පස, # 901A1C 0%, #ffffff 100%);
මෙම උදාහරණයේ IE ෆිල්ටර් නොමැති බව ඔබට පෙනෙන්නට ඇත. IE මඟින් පමණක් ෆිල්ටර් වර්ග 2 ක් පමණි: ඉහළ සිට පහළට (පෙරනිමිය) සහ වමේ සිට දකුණට (GradientType = 1 ස්විචය සමඟ).
CSS භාවිතා කිරීමෙන් මෙම ක්රියාකාරී රේඛීය අනුක්රමණය බලන්න.
04 සිට 03 දක්වා
වර්ණ සංවෘත
CSS3 රේඛීය අනුක්රමයන් සමඟ, ඔබට පවා ප්රියජනක බලපෑම් නිර්මාණය කිරීමට ඔබගේ වර්ණය වෙත විවිධ වර්ණ එකතු කළ හැකිය. මෙම වර්ණ එකතු කිරීම සඳහා, ඔබ විසින් ඔබේ දේපල අවසානය වෙත අමතර වර්ණ එකතු කරනු ලැබේ. වර්ණය ආරම්භ කිරීම හෝ අවසන් කිරීම සඳහා රේඛාවේ කොතැනද යන්න ඇතුළත් කළ යුතුය.
අන්තර්ජාල Explorer ෆිල්ටරය පමණක් වර්ණ නැවතුම් සඳහා සහාය දක්වයි. එබැවින් ඔබ මෙම ප්රස්තාරය ගොඩනඟන විට ඔබට පෙන්විය යුතු පළමු හා දෙවන වර්ණ පමණක් ඇතුළත් කළ යුතුය.
ඉහත 3-වර්ණ අනුක්රමය සඳහා CSS මෙන්න:
පසුබිම: #ffffff;
පසුබිම: -moz-රේඛීය-අනුක්රමණය (වමේ, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-gradient (linear, left-top, right top, color-stop (0%, # ffffff), වර්ණ-නැවතුම් (51%, # 901A1C), වර්ණ-නැවතුම් (100%, # ffffff);
පසුබිම: -webkit-linear-gradient (වමේ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
පසුබිම: - linear-gradient (වමේ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
පසුබිම: -ms-රේඛීය-gradient (වමේ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
පෙරහන්: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
පසුබිම: linear-gradient (වමේ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
CSS භාවිතා කරමින් වර්ණ තාප තුනක් සහිත මෙම රේඛීය අනුක්රමණය බලන්න.
04 සිට 04 දක්වා
ගොඩනඟා ගැනීම පහසුය
මං gradients නිර්මාණය කිරීමට ඔබට උපකාර කරන ස්ථාන දෙකක් තිබේ. ඔවුන් සෑම දෙනාටම වාසි හා අවාසි ලබා දී ඇති අතර, තවමත් එය තවමත් සිදුකරන ගොඩනැගිලි නිර්මාණකරුවෙකු සොයා ගෙන නොමැත.
Ultimate CSS Gradient Generator
Photoshop වැනි වැඩසටහන් වල ප්රස්ථාර ශිල්පීන් එය සමාන ආකාරයකින් සිදු කරයි. මම ඔබට කැමති වන්නේ CSK විස්තාරණය, Webkit සහ මොසිල්ලා පමණක් නොවේ. මෙම උත්පාදකයේ ගැටලුව වන්නේ එය තිරස් සහ තිරස් අනුක්රමයන් සඳහා පමණි. ඔබට දර්ශනීය අනුක්රමයන් සිදු කිරීමට අවශ්ය නම්, මා නිර්දේශ කරන අනෙක් යන්ත්රයට යන්න.
CSS3 ග්රිනිං උත්පාදකය
මෙම උත්පාදක යන්ත්රය පළමු වරට වඩා මා වටහා ගැනීමට තව ටිකක් ගත විය. නමුත් දිශාව වෙනස් කිරීම සඳහා එය සහාය දෙයි.
ඔබට වඩා හොඳ CSS Gradient Generator ගැන ඔබ දන්නවා නම් කරුණාකර අපට දැන ගන්න .