01 ഓഫ് 04
CSS3 ഉപയോഗിച്ച് ക്രോസ്-ബ്രൌസർ ലീനിയർ ഗ്രേഡിയൻറ് സൃഷ്ടിക്കുന്നു
ലീനിയർ ഗ്രേഡിയൻറ്സ്
നിങ്ങൾ കാണുന്ന ഏറ്റവും സാധാരണമായ ഗ്രേഡിയന്റ് രണ്ട് വർണ്ണങ്ങളുടെ ഒരു ലീജർ ഗ്രേഡിയൻറ് ആണ്. അതായത്, ഗ്രേഡിയന്റ് ആദ്യ വരിയിൽ നിന്ന് ക്രമേണ രണ്ടാമത്തെ ആ വരിയിലേക്ക് മാറിക്കൊണ്ട് നേർരേഖയിൽ നീങ്ങും. ഈ പേജിലുള്ള ഇമേജ് # 999 (ഇരുണ്ട ചാരനിറം) #fff (വെളുത്ത) എന്നതിലേക്ക് ലളിതമായ ഇടത്-വലത്തേക്കുള്ള ഗ്രേഡിയന്റ് കാണിക്കുന്നു.
ലീനിയർ ഗ്രേഡിയന്റുകൾ നിർവചിക്കുക എളുപ്പമാണ്, ഒപ്പം ബ്രൌസറുകളിൽ കൂടുതൽ പിന്തുണയും ഉണ്ട്. CSS3 ലിനക്സ് വിതരണങ്ങൾ Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, Safari 4+ എന്നിവ പിന്തുണയ്ക്കുന്നു. ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ ഒരു ഫിൽറ്റർ ഉപയോഗിച്ച് ചക്രം ചേർക്കുകയും ഐഇ 5.5 ലേക്ക് തിരികെ പിന്തുണക്കുകയും ചെയ്യും. ഇത് CSS3 അല്ല, ക്രോസ്-ബ്രൗസർ അനുയോജ്യതയ്ക്കുള്ള ഒരു ഓപ്ഷൻ ആണ്.
നിങ്ങൾ ഗ്രേഡിയന്റ് നിർവചിക്കുമ്പോൾ നിങ്ങൾ നിരവധി കാര്യങ്ങൾ നിർവചിക്കേണ്ടതുണ്ട്:
- ഏത് തരത്തിലുള്ള ഗ്രേഡിയന്റ് ആണ് - ലീനിയർ അല്ലെങ്കിൽ റേഡിയൽ
- ഗ്രേഡിയന്റ് ആരംഭിക്കണം
- എവിടെയാണ് ഗ്രേഡിയന്റ് നിർത്തേണ്ടത്
- ഏത് നിറങ്ങളിലാണ് ഗ്രേഡിയന്റേത്, എവിടെ തുടങ്ങണം, നിർത്തിയിടണം
CSS3 ഉപയോഗിച്ച് ലീനിയർ ചതുരശ്രയങ്ങളെ നിർവചിക്കുന്നതിന്, നിങ്ങൾ എഴുതുന്നു:
ലീനിയർ-ഗ്രേഡിയന്റ് ( കോൺ അല്ലെങ്കിൽ സൈഡ്, കോർണർ , കളർ സ്റ്റോപ്പ് , കളർ സ്റ്റോപ്പ് )
- ആദ്യം നിങ്ങൾ ലിനക്റ്റർ ഗ്രേഡിയന്റ് ഉപയോഗിച്ച് ഗ്രേഡിയന്റ് തരം നിർവ്വചിക്കുക.
- അപ്പോൾ, ഗ്രേഡിയന്റെ തുടക്കവും നിർദ്ദിഷ്ട പോയിൻറുകളും രണ്ട് രീതികളിൽ ഒന്ന് നിർവചിക്കുക: 0 മുതൽ 359 ഡിഗ്രി വരെയുള്ള കോണിന്റെ വരവ്, 0 ഡിഗ്രി നേരത്തേക്ക് പോയിന്റ് ചെയ്തു. അല്ലെങ്കിൽ ഇടത്, വലത്, അടിഭാഗം, മുകളിൽ എന്നിങ്ങനെയുള്ള "വശവും മൂലവും" ഫങ്ഷനോടൊപ്പമോ. അടുത്ത പേജിൽ ഇവ കൂടുതൽ വിശദമായി വിവരിക്കപ്പെടും. നിങ്ങൾ ഇത് ഒഴിവാക്കുകയാണെങ്കിൽ, ഗ്രേഡിയൻറ് മുകളിൽ നിന്നും ഘടകത്തിന്റെ താഴെയായി ഒഴുകും.
- അപ്പോൾ നിങ്ങൾ നിറങ്ങൾ നിർത്തുന്നു. കളർ കോഡും ഓപ്ഷണൽ ശതമാനവും കൊണ്ട് നിറം നിർത്തുന്നു. ഈ നിറം ഉപയോഗിച്ച് തുടങ്ങുകയോ അവസാനിക്കുകയോ ചെയ്യുന്ന വരിയിൽ ബ്രൗസർ പറയുന്നു. ഡിഫാള്ട്ട് നിറനിലമായി വരിയിൽ വയ്ക്കുന്നതാണ്. പേജ് 3 ൽ വർണ നിർത്തുകളെക്കുറിച്ച് കൂടുതലറിയും.
അതുകൊണ്ട്, മുകളിൽ പറഞ്ഞിരിക്കുന്ന ഗ്രേഡിയന്റ് CSS3 ഉപയോഗിച്ച് നിർവചിക്കുക, നിങ്ങൾ എഴുതുന്നു:
ലീനിയർ-ഗ്രേഡിയന്റ് (ഇടത്, # 999999 0%, #ffffff 100%);
നിങ്ങൾ എഴുതുന്ന ഒരു DIV ന്റെ പശ്ചാത്തലമായി സജ്ജമാക്കാൻ:
div {
പശ്ചാത്തല-ഇമേജ്: ലീനിയർ-ഗ്രേഡിയന്റ് (ഇടത്, # 999999 0%, #ffffff 100%;
}
CSS3 ലൈനർ ഗ്രേഡിയന്റുകൾക്കുള്ള ബ്രൌസർ വിപുലീകരണങ്ങൾ
ക്രോസ് ബ്രൌസറിനായി നിങ്ങളുടെ ഗ്രേഡിയന്റ് ലഭിക്കുന്നതിന്, മിക്ക ബ്രൌസറുകളിലും ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ 9-നും (കുറഞ്ഞത് 2 ഫിൽട്ടറുകളും) ഒരു ഫിൽറ്റർ ബ്രൌസർ എക്സ്റ്റൻഷനുകൾ ഉപയോഗിക്കേണ്ടതുണ്ട്. എല്ലാം ഇവ നിങ്ങളുടെ ഗ്രേഡിയന്റിനെ നിർവചിക്കുന്നതിന് സമാന ഘടകങ്ങൾ എടുക്കുന്നു (നിങ്ങൾക്ക് IE ൽ 2-കളർ ഗ്രേഡിയൻറ്സ് മാത്രമേ നിർവചിക്കാവൂ).
മൈക്രോസോഫ്റ്റ് ഫിൽട്ടറുകളും എക്സ്റ്റൻഷൻ ഇൻറർനെറ്റ് എക്സ്പ്ലോററുകളും പിന്തുണയ്ക്കുന്നതിൽ ഏറ്റവും വെല്ലുവിളിയാണ്, കാരണം വ്യത്യസ്ത ബ്രൌസർ പതിപ്പുകൾ പിന്തുണയ്ക്കുന്നതിന് നിങ്ങൾക്ക് മൂന്ന് വ്യത്യസ്ത ലൈനുകൾ ആവശ്യമാണ്. മുകളിൽ ചാര വെള്ള നിറത്തിൽ എത്തിക്കാൻ നിങ്ങൾ എഴുതുന്നു:
/ * ഐഇ 5.5-7 * /
ഫിൽറ്റർ: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * ഐഇ 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (ഇടത്, # 999999 0%, #ffffff 100%);
മോസില്ല എക്സ്റ്റെൻഷൻ -മോസ്-എക്സ്റ്റൻഷൻ -moz- വിപുലീകരണത്തോടെ മാത്രം പ്രവർത്തിക്കുന്ന CSS3 സ്വത്തുക്കൾ. ഫയർഫോക്സിനുള്ള മുകളിലെ ഗ്രേഡിയന്റ് ലഭിക്കുന്നതിന്, ഇങ്ങനെ എഴുതുക:
-മോസ്-ലീനിയർ-ഗ്രേഡിയന്റ് (ഇടത്, # 999999 0%, #ffffff 100%);
ഒപെറാ എക്സ്റ്റൻഷൻ - Theoo- എക്സ്റ്റൻഷൻ ഓപറേറ്റിംഗ് 11.1+ പതിപ്പിലേക്ക് ചേർക്കുന്നു. മുകളിലുള്ള ഗ്രേഡിയന്റ് ലഭിക്കുന്നതിന്, ഇങ്ങനെ എഴുതുക:
-ഒ-ലീനിയർ-ഗ്രേഡിയന്റ് (ഇടത്, # 999999 0%, #ffffff 100%);
വെബ്കിറ്റ് എക്സ്റ്റെൻഷൻ -വെബ്കിറ്റ്-എക്സ്റ്റൻഷൻ ധാരാളം CSS3 സ്വത്ത് പ്രവർത്തിക്കുന്നു. സഫാരി 5.1+ അല്ലെങ്കിൽ Chrome 10 + ന് മുകളിലുള്ള ഗ്രേഡിയന്റുകളെ നിർവ്വചിക്കാൻ നിങ്ങൾ എഴുതുന്നു:
-webkit-linear-gradient (ഇടത്, # 999999 0%, #ffffff 100%);
Chrome 2+, Safari 4+ എന്നിവയിൽ പ്രവർത്തിക്കുന്ന വെബ്കിറ്റ് വിപുലീകരണത്തിൻറെ പഴയ പതിപ്പും ഉണ്ട്. അതിൽ നിങ്ങൾ സ്വത്തിന്റെ പേരിൽ പകരം ഗ്രേഡിയന്റ് തരം ഒരു മൂല്യമായി നിർവ്വചിക്കുന്നു. ഈ വിപുലീകരണത്തോടെ ചാര വെള്ള ഗ്രേഡിയന്റിനായി, എഴുതുക:
-വെബ്കിറ്റ്-ഗ്രേഡിയന്റ് (ലീനിയർ, ഇടത് മുകൾ, വലത് ടോപ്പ്, വർക്ക്-സ്റ്റോപ്പ് (0%, # 999999), കളർ സ്റ്റോപ്പ് (100%, # എഫ്ഫഫഫ്));
പൂർണ്ണമായ CSS3 ലീനിയർ ഗ്രേഡിയന്റ് CSS കോഡ്
മുകളിൽ ചാരനിറത്തിലുള്ള ബ്രൌസർ പിന്തുണ നിങ്ങൾ മുകളിൽ വെളുത്ത ഗ്രേഡിയന്റ് ലഭിക്കാൻ ഗ്രേയ്റ്റുകൾക്ക് പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾക്കായി ഫാൾബാക്ക് സോളിഡ് വർണ്ണം ഉൾപ്പെടുത്തണം, അവസാന ഇനം പൂർണ്ണമായും ബ്രൌസറായ ബ്രൌസറിനായുള്ള CSS3 ശൈലി ആയിരിക്കണം. നിങ്ങൾ എഴുതുന്നു:
പശ്ചാത്തലം: # 999999;
പശ്ചാത്തലം: -moz-linear-gradient (ഇടത്, # 999999 0%, #ffffff 100%);
പശ്ചാത്തലം: -വെബ്കിറ്റ്-ഗ്രേഡിയന്റ് (ലീനിയർ, ഇടത് മുകൾ, വലത് ടോപ്പ്, കളർ-സ്റ്റോപ്പ് (0%, # 999999), കളർ സ്റ്റോപ്പ് (100%, # എഫ്ഫഫഫ്));
പശ്ചാത്തലം: -webkit-linear-gradient (ഇടത്, # 999999 0%, #ffffff 100%);
പശ്ചാത്തലം: -o-linear-gradient (ഇടത്, # 999999 0%, #ffffff 100%);
പശ്ചാത്തലം: -ms-linear-gradient (ഇടത്, # 999999 0%, #ffffff 100%);
ഫിൽറ്റർ: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
പശ്ചാത്തലം: ലീനിയർ-ഗ്രേഡിയന്റ് (ഇടത്, # 999999 0%, #ffffff 100%);
ഈ ട്യൂട്ടോറിയലിലെ അടുത്ത പേജുകൾ വിശദമായി ഒരു ഗ്രേഡിയന്റ് ഘടകത്തെക്കുറിച്ച് വിശദീകരിക്കുന്നു, അവസാനത്തെ പേജ് നിങ്ങളെ CSS3 ഗ്രേഡിയെർസ് സൃഷ്ടിക്കുന്നതിനുള്ള മികച്ച മാർഗമായ ടൂളിലേക്ക് സൂചിപ്പിക്കുന്നു.
വെറും CSS ഉപയോഗിച്ച് പ്രവർത്തനം ഈ ലീനിയർ ഗ്രേഡിയന്റ് കാണുക.
02 ഓഫ് 04
ഡയഗണൽ ഗ്രേഡിയൻറ്സ്-ഗ്രേഡിയന്റിലെ ആംഗിൾ സൃഷ്ടിക്കുന്നു
തുടക്കവും സ്റ്റോപ്പ് പോയിന്റുകളും ഗ്രേഡിയന്റുകളുടെ കോണി നിർണ്ണയിക്കുന്നു. ഏറ്റവും ലീനിയർ ഗ്രേഡിയന്റുകൾ മുകളിൽ നിന്നും താഴോട്ട് ഇടത്തേയ്ക്കാണുള്ളത്. എന്നാൽ ഒരു ഡയഗ്രണൽ വരിയിൽ ചലിക്കുന്ന ഒരു ഗ്രേഡിയന്റ് നിർമ്മിക്കാൻ സാധിക്കും. ഈ പേജിലെ ഇമേജ് വലതു നിന്ന് ഇടത്തേയ്ക്കുള്ള ഒരു 45 ഡിഗ്രി കോണിൽ നീങ്ങുന്ന ഒരു ലളിതമായ ഗ്രേഡിയന്റ് കാണിക്കുന്നു.
ഗ്രേഡിയന്റ് ലൈൻ നിർവ്വചിക്കാൻ കോണുകൾ
മൂലകത്തിന്റെ മദ്ധ്യത്തിൽ ഒരു സാങ്കൽപ്പിക വൃത്തത്തിലെ ഒരു വരിയാണ് കോണി. 0deg പോയിന്റ് മുകളിലേക്ക്, വലതുവശത്ത് 90deg പോയിന്റുകൾ, 180deg പോയിന്റ് താഴേക്ക്, ഇടതുവശത്ത് 270deg പോയിന്റുകൾ. 0 മുതൽ 359 ഡിഗ്രി വരെയുളള ഏത് കോണിൽ നിങ്ങൾക്ക് നിർവ്വചിക്കാം.
ഒരു ചതുരത്തിൽ, 45 ഡിഗ്രി കോണിൽ മുകളിൽ ഇടത് മൂലയിൽ നിന്ന് താഴെ വലതുവശത്തേക്ക് നീങ്ങുന്നു, പക്ഷേ ഒരു ചതുരത്തിൽ, തുടക്കത്തിലും അവസാനത്തിലും പോയിന്റ് ആകൃതിയിൽ പുറത്തു കാണാം.
ഒരു ഡയഗോണൽ ഗ്രേഡിയന്റ് നിർവചിക്കാനുള്ള കൂടുതൽ സാധാരണ മാർഗ്ഗം, മുകളിൽ വലതുഭാഗത്ത് ഒരു കോണിനെ നിർവചിക്കുക എന്നതാണ്, ഗ്രേഡിയന്റ് ആ കോണിൽ നിന്നും വിപരീത കോണിലേക്ക് നീങ്ങും. ഇനിപ്പറയുന്ന കീവേഡുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ആരംഭ പോസ്റ്റിങ്ങ് നിർവചിക്കാവുന്നതാണ്:
- മുകളിൽ
- ശരി
- താഴെ
- ഇടത്തെ
- കേന്ദ്രം
അവ കൂടുതൽ കൃത്യമായ രീതിയിൽ കൂടിച്ചേർക്കപ്പെടും:
- മുകളിൽ വലത്
- മുകളിൽ ഇടത്
- മുകളിൽ സെന്റർ
- താഴെ വലത്
- താഴെ ഇടതുഭാഗത്ത്
- താഴെ കേന്ദ്രം
- വലത് സെന്റർ
- ഇടത് കേന്ദ്രം
ചുവടെ വലത് മൂലയിൽ നിന്ന് ചുവടെ ഇടതുഭാഗത്തേക്ക് നീങ്ങുന്നത് ചുവടെ നിന്നും വലത്തേക്ക് ചുവടെ ഇടത്,
പശ്ചാത്തലം: ## 901A1C;
background-image: -moz-linear-gradient (വലത് ടോപ്പ്, # 901A1C 0%, # എഫ്എഫ്എഫ് എഫ് 100%);
പശ്ചാത്തല-ഇമേജ്: -വെബ്കിറ്റ്-ഗ്രേഡിയന്റ് (ലീനിയർ, വലത് മുകൾ, ഇടത് ചുവട്, വർണ്ണ-സ്റ്റോപ്പ് (0, # 901A1C), വർണ്ണ-സ്റ്റോപ്പ് (1, #FFFFFF));
പശ്ചാത്തലം: -webkit-linear-gradient (വലത് ടോപ്പ്, # 901A1C 0%, #ffffff 100%);
പശ്ചാത്തലം: -o-linear-gradient (വലത് ടോപ്പ്, # 901A1C 0%, #ffffff 100%);
പശ്ചാത്തലം: -ms-linear-gradient (വലത് ടോപ്പ്, # 901A1C 0%, #ffffff 100%);
പശ്ചാത്തലം: ലീനിയർ-ഗ്രേഡിയന്റ് (വലത് ടോപ്പ്, # 901A1C 0%, #ffffff 100%);
ഈ ഉദാഹരണത്തിൽ IE ഫിൽറ്ററുകളില്ലെന്ന് നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം. അതുകൊണ്ടാണ് IE രണ്ട് തരം ഫിൽട്ടറുകൾ അനുവദിക്കുന്നത്: മുകളിൽ നിന്നും താഴെയായി (സ്ഥിരസ്ഥിതി) ഇടത് നിന്ന് വലത്തേക്ക് (GradientType = 1 സ്വിച്ച്).
വെറും CSS ഉപയോഗിച്ച് ഈ ഡയഗണണൽ ലീനിയർ ഗ്രേഡിയന്റ് പ്രവർത്തിക്കുക.
04-ൽ 03
നിറങ്ങൾ നിർത്തുന്നു
CSS3 ലീനിയർ ചക്രവാളങ്ങളുമൊത്ത്, നിങ്ങൾക്ക് ഫാൻസിയർ ഇഫക്റ്റുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളുടെ ഗ്രേഡിയന്റിനായി ഒന്നിൽ കൂടുതൽ നിറങ്ങൾ ചേർക്കാൻ കഴിയും. ഈ നിറങ്ങൾ ചേർക്കാൻ നിങ്ങൾ കോമാ ഉപയോഗിച്ച് വേർതിരിച്ച് നിങ്ങളുടെ പ്രോപ്പർട്ടി അവസാനം അധിക നിറങ്ങൾ ചേർക്കുക. നിറങ്ങൾ ആരംഭിക്കുകയോ അവസാനിക്കുകയോ ചെയ്യേണ്ട വരിയിൽ നിങ്ങൾ ഉൾപ്പെടുത്തണം.
ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ ഫിൽട്ടറുകൾ രണ്ട് നിറമുള്ള സ്റ്റോപ്പുകളെ മാത്രമേ പിന്തുണയ്ക്കുന്നുള്ളൂ, അതിനാൽ നിങ്ങൾ ഈ ഗ്രേഡിയന്റ് നിർമ്മിക്കുമ്പോൾ, നിങ്ങൾ പ്രദർശിപ്പിക്കാൻ ആഗ്രഹിക്കുന്ന ആദ്യ, രണ്ടാമത്തെ വർണ്ണങ്ങൾ മാത്രമേ ഉൾപ്പെടുത്തുകയുള്ളൂ.
മുകളിൽ പറഞ്ഞിരിക്കുന്ന 3-വർണ്ണ ഗ്രേഡിയന്റായ CSS:
പശ്ചാത്തലം: #ffffff;
പശ്ചാത്തലം: -moz-linear-gradient (ഇടത്, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
പശ്ചാത്തലം: -വെബ്കിറ്റ്-ഗ്രേഡിയന്റ് (ലീനിയർ, ഇടത് മുകൾ, വലത് ടോപ്പ്, കളർ-സ്റ്റോപ്പ് (0%, # എഫ്എഫ്ഫഫ്), കളർ സ്റ്റോപ്പ് (51%, # 901A1C), കളർ സ്റ്റോപ്പ് (100%, # എഫ്ഫഫഫ്));
പശ്ചാത്തലം: -webkit-linear-gradient (ഇടത്, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
പശ്ചാത്തലം: -o-linear-gradient (ഇടത്, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
പശ്ചാത്തലം: -ms-linear-gradient (ഇടത്, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
ഫിൽറ്റർ: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
പശ്ചാത്തലം: ലീനിയർ-ഗ്രേഡിയന്റ് (ഇടത്, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
വെറും CSS ഉപയോഗിച്ച് പ്രവർത്തിപ്പിക്കുമ്പോൾ മൂന്ന് നിറങ്ങളുള്ള ഈ ലീനിയർ ഗ്രേഡിയന്റ് കാണുക.
04 of 04
കെട്ടിട ഗ്രേഡിംഗ് എളുപ്പമാക്കുക
ഞാൻ ഗ്രേഡിയൻറ് നിർമ്മിക്കാൻ സഹായിക്കുന്നതിൽ ഞാൻ ശുപാർശ ചെയ്യുന്ന രണ്ട് സൈറ്റുകൾ ഉണ്ട്, അവയ്ക്ക് ഓരോരുത്തർക്കും ആനുകൂല്യങ്ങളും തിരിച്ചടികളും ഉണ്ട്, ഇതുവരെ ഒന്നും ചെയ്യുന്ന ഗ്രേഡിയന്റ് ബിൽഡർ കണ്ടെത്തിയിട്ടില്ല.
അൾട്ടിഷ് CSS ഗ്രേഡിയൻറ് ജനറേറ്റർ
ഫോട്ടോഷോപ്പ് പോലുള്ള പ്രോഗ്രാമുകളിൽ ഗ്രേഡിയന്റ് ബിൽഡർമാർക്ക് സമാനമായ രീതിയിലാണ് ഇത് പ്രവർത്തിക്കുന്നത്. അതോടൊപ്പം വെബ്കിറ്റും മോസിലയും മാത്രമല്ല എല്ലാ സിഎസ്എസ് എക്സ്റ്റൻഷനുകളും ഇതു് ലഭ്യമാക്കുന്നു. ഈ ജനറേറ്റർ ഉപയോഗിച്ച് പ്രശ്നം അത് തിരശ്ചീനവും ലംബവുമായ ഗ്രേഡിയറുകളെ പിന്തുണയ്ക്കുന്നുവെന്നാണ്. നിങ്ങൾ ഡയഗണൽ ഗ്രേഡിയറുകൾ ചെയ്യാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഞാൻ ശുപാർശ ചെയ്യുന്ന മറ്റ് ജനറേറ്റർമാർക്ക് പോകണം.
CSS3 ഗ്രേഡിയന്റ് ജനറേറ്റർ
ഈ ജനറേറ്റർ ഒന്നാമത്തേതിനെക്കാൾ അൽപ്പം കൂടുതൽ മനസിലാക്കാൻ കഴിഞ്ഞു, പക്ഷേ ദിശ മാറ്റാൻ ഒരു ദിശ മാറ്റാൻ ഇത് സഹായിക്കുന്നു.
ഇവയിലധികം നിങ്ങൾക്ക് ഇഷ്ടമുള്ള മറ്റൊരു CSS ഗ്രേഡിയന്റ് ജനറേറ്റർ അറിയാമെങ്കിൽ, ഞങ്ങളെ അറിയിക്കുക .