| 18.02.2016

CSS3 UI ഡിസൈനർമാർക്കായി പരിധിയില്ലാത്ത സാധ്യതകൾ തുറക്കുന്നു, കൂടാതെ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കാതെ തന്നെ ഏത് ആശയവും എളുപ്പത്തിൽ നടപ്പിലാക്കാനും ജീവസുറ്റതാക്കാനും കഴിയും എന്നതാണ് പ്രധാന നേട്ടം.

ലളിതമായ കാര്യങ്ങൾക്ക് ഒരു സാധാരണ വെബ് പേജ് എങ്ങനെ സജീവമാക്കാനും ഉപയോക്താക്കൾക്ക് അത് കൂടുതൽ ആക്സസ് ചെയ്യാനും കഴിയുന്നു എന്നത് അതിശയകരമാണ്. ഞങ്ങൾ CSS3 സംക്രമണങ്ങളെക്കുറിച്ചാണ് സംസാരിക്കുന്നത്, അതിലൂടെ നിങ്ങൾക്ക് ഒരു ഘടകത്തെ രൂപാന്തരപ്പെടുത്താനും ശൈലി മാറ്റാനും അനുവദിക്കാം, ഉദാഹരണത്തിന്, ഹോവറിൽ. ചുവടെയുള്ള ഒമ്പത് CSS3 ആനിമേഷൻ ഉദാഹരണങ്ങൾ നിങ്ങളുടെ സൈറ്റിൽ പ്രതികരണാത്മകമായ ഒരു അനുഭവം സൃഷ്ടിക്കാൻ നിങ്ങളെ സഹായിക്കും, അതുപോലെ തന്നെ മനോഹരവും സുഗമവുമായ സംക്രമണങ്ങളോടെ പേജിൻ്റെ മൊത്തത്തിലുള്ള രൂപം മെച്ചപ്പെടുത്തും.

കൂടുതൽ വിശദമായ വിവരങ്ങൾക്ക്, നിങ്ങൾക്ക് ഫയലുകൾ ഉപയോഗിച്ച് ആർക്കൈവ് ഡൗൺലോഡ് ചെയ്യാം.

എല്ലാ ഇഫക്റ്റുകളും ട്രാൻസിഷൻ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നു. സംക്രമണം- “പരിവർത്തനം”, “പരിവർത്തനം”) കൂടാതെ കപട-ക്ലാസ്: ഹോവർ, മൗസ് കഴ്‌സർ അതിന് മുകളിലൂടെ സഞ്ചരിക്കുമ്പോൾ അതിൻ്റെ ശൈലി നിർണ്ണയിക്കുന്നു (ഞങ്ങളുടെ ട്യൂട്ടോറിയലിൽ). ഞങ്ങളുടെ ഉദാഹരണങ്ങൾക്കായി, ഞങ്ങൾ 500x309 px ഡിവിയും #6d6d6d ൻ്റെ പ്രാരംഭ പശ്ചാത്തല വർണ്ണവും 0.3 സെക്കൻഡ് പരിവർത്തന ദൈർഘ്യവും ഉപയോഗിച്ചു.

ബോഡി > div (വീതി: 500px; ഉയരം: 309px; പശ്ചാത്തലം: #6d6d6d; -webkit-transition: all 0.3s Ease;; -moz-transition: all 0.3s Ease;; -o-transition: all 0.3s Ease;; സംക്രമണം: എല്ലാ 0.3സെ അനായാസവും;)

1. ഹോവറിൽ നിറം മാറ്റുക

ഒരു കാലത്ത്, ചില RGB മൂല്യങ്ങളുടെ ഗണിതശാസ്ത്ര കണക്കുകൂട്ടലുകൾക്കൊപ്പം, അത്തരമൊരു പ്രഭാവം നടപ്പിലാക്കുന്നത് വളരെ ശ്രമകരമായ ജോലിയായിരുന്നു. നിങ്ങൾക്ക് ഒരു കപട ക്ലാസ് ചേർക്കേണ്ട ഒരു CSS ശൈലി ഇപ്പോൾ എഴുതിയാൽ മതി: സെലക്ടറിലേക്ക് ഹോവർ ചെയ്‌ത് ഒരു പശ്ചാത്തല വർണ്ണം സജ്ജമാക്കുക, അത് നിങ്ങൾ ബ്ലോക്കിന് മുകളിലൂടെ ഹോവർ ചെയ്യുമ്പോൾ യഥാർത്ഥ പശ്ചാത്തല നിറം സുഗമമായി (0.3 സെക്കൻഡിനുള്ളിൽ) മാറ്റിസ്ഥാപിക്കും:

നിറം:ഹോവർ (പശ്ചാത്തലം:#53ea93;)

2. ഫ്രെയിമിൻ്റെ രൂപം

നിങ്ങൾ മൗസ് ഹോവർ ചെയ്യുമ്പോൾ സുഗമമായി ദൃശ്യമാകുന്ന ആന്തരിക ഫ്രെയിമാണ് രസകരവും ശ്രദ്ധേയവുമായ പരിവർത്തനം. വിവിധ ബട്ടണുകൾ അലങ്കരിക്കാൻ അനുയോജ്യമാണ്. ഈ പ്രഭാവം നേടാൻ, ഇൻസെറ്റ് പാരാമീറ്റർ (ഘടകത്തിനുള്ളിലെ നിഴൽ സജ്ജീകരിക്കുന്നു) ഉപയോഗിച്ച് ഞങ്ങൾ pseudo-class:hover, box-shadow പ്രോപ്പർട്ടി എന്നിവ ഉപയോഗിക്കുന്നു. കൂടാതെ, നിങ്ങൾ ഷാഡോ സ്ട്രെച്ചും (ഞങ്ങളുടെ കാര്യത്തിൽ ഇത് 23px ആണ്) അതിൻ്റെ നിറവും സജ്ജീകരിക്കേണ്ടതുണ്ട്:

ബോർഡർ: ഹോവർ (ബോക്സ്-ഷാഡോ: ഇൻസെറ്റ് 0 0 0 23px #53ea93; )

3. സ്വിംഗ്

ഈ CSS ആനിമേഷൻ ഒരു അപവാദമാണ്, കാരണം ട്രാൻസിഷൻ പ്രോപ്പർട്ടി ഇവിടെ ഉപയോഗിച്ചിട്ടില്ല. പകരം ഞങ്ങൾ ഉപയോഗിച്ചത്:

• @keyframes എന്നത് ഫ്രെയിം-ബൈ-ഫ്രെയിം CSS ആനിമേഷൻ സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു അടിസ്ഥാന നിർദ്ദേശമാണ്, ഇത് നിങ്ങളെ വിളിക്കുന്നത് ചെയ്യാൻ അനുവദിക്കുന്നു. സ്റ്റോറിബോർഡും ആനിമേഷനെ പ്രധാന പോയിൻ്റുകളുടെ പട്ടികയായി വിവരിക്കുക;
• ആനിമേഷൻ, ആനിമേഷൻ-ആവർത്തന-എണ്ണം - ആനിമേഷൻ പാരാമീറ്ററുകൾ (ദൈർഘ്യവും വേഗതയും), സൈക്കിളുകളുടെ എണ്ണം (ആവർത്തനങ്ങൾ) എന്നിവ ക്രമീകരിക്കുന്നതിനുള്ള പ്രോപ്പർട്ടികൾ. ഞങ്ങളുടെ കാര്യത്തിൽ, 1 ആവർത്തിക്കുക.

@-webkit-keyframes സ്വിംഗ് ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% (-webkit-transform: translateX(6px); പരിവർത്തനം: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); രൂപാന്തരം: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); രൂപാന്തരം: translateX(3px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes സ്വിംഗ് ( 15% ( -webkit-transform: translateX(9px); പരിവർത്തനം: translateX(9px); ) 30% (-webkit-transform: translateX(-9px); രൂപാന്തരം: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); : translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); TranslateX(-6px); ) 65% ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 100% (-webkit-transform: translateX(0); transform: translateX(0); ) .swing:hover (-webkit-animation: swing 0.6s Ease; ആനിമേഷൻ: സ്വിംഗ് 0.6സെ അനായാസം; -വെബ്കിറ്റ്-ആനിമേഷൻ-ആവർത്തന-എണ്ണം: 1; ആനിമേഷൻ-ആവർത്തന-എണ്ണം: 1; )

4. ശോഷണം

ഫേഡ് ഇഫക്റ്റ് അടിസ്ഥാനപരമായി ഒരു മൂലകത്തിൻ്റെ സുതാര്യതയിലെ ലളിതമായ മാറ്റമാണ്. ആനിമേഷൻ രണ്ട് ഘട്ടങ്ങളിലായാണ് സൃഷ്ടിച്ചിരിക്കുന്നത്: ആദ്യം നിങ്ങൾ പ്രാരംഭ സുതാര്യത 1 ആയി സജ്ജീകരിക്കേണ്ടതുണ്ട് - അതായത്, പൂർണ്ണമായ അതാര്യത, തുടർന്ന് മൗസ് ഹോവർ ചെയ്യുമ്പോൾ അതിൻ്റെ മൂല്യം വ്യക്തമാക്കുക - 0.6:

ഫേഡ് (ഒപാസിറ്റി: 1; ) .ഫേഡ്: ഹോവർ (ഒപാസിറ്റി: 0.6; )

വിപരീത ഫലത്തിനായി, മൂല്യങ്ങൾ സ്വാപ്പ് ചെയ്യുക:

5. മാഗ്നിഫിക്കേഷൻ

ഹോവർ ചെയ്യുമ്പോൾ ബ്ലോക്ക് വലുതാക്കാൻ, ഞങ്ങൾ ട്രാൻസ്ഫോർമേഷൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കുകയും അതിനെ സ്കെയിൽ (1.2) ആയി സജ്ജീകരിക്കുകയും ചെയ്യും. ഈ സാഹചര്യത്തിൽ, ബ്ലോക്ക് അതിൻ്റെ അനുപാതങ്ങൾ നിലനിർത്തുമ്പോൾ 20 ശതമാനം വർദ്ധിക്കും:

ഗ്രോ: ഹോവർ (-വെബ്കിറ്റ്-ട്രാൻസ്ഫോം: സ്കെയിൽ(1.2); -എംഎസ്-ട്രാൻസ്ഫോം: സ്കെയിൽ(1.2); രൂപാന്തരം: സ്കെയിൽ(1.2); )

6. കുറയ്ക്കൽ

ഒരു മൂലകത്തെ ചെറുതാക്കുന്നത് അതിനെ വലുതാക്കുന്നതുപോലെ എളുപ്പമാണ്. അഞ്ചാമത്തെ പോയിൻ്റിൽ സ്കെയിൽ വർദ്ധിപ്പിക്കുന്നതിന് 1-ൽ കൂടുതൽ മൂല്യം വ്യക്തമാക്കേണ്ടതുണ്ടെങ്കിൽ, ബ്ലോക്ക് കുറയ്ക്കുന്നതിന് ഒന്നിൽ താഴെയുള്ള ഒരു മൂല്യം ഞങ്ങൾ വ്യക്തമാക്കും, ഉദാഹരണത്തിന്, സ്കെയിൽ(0.7) . ഇപ്പോൾ, മൗസ് ഹോവർ ചെയ്യുമ്പോൾ, ബ്ലോക്ക് അതിൻ്റെ യഥാർത്ഥ വലുപ്പത്തിൻ്റെ 30 ശതമാനം ആനുപാതികമായി ചുരുങ്ങും:

ഷ്രിങ്ക്: ഹോവർ (-വെബ്കിറ്റ്-ട്രാൻസ്ഫോം: സ്കെയിൽ(0.7); -എംഎസ്-ട്രാൻസ്ഫോം: സ്കെയിൽ(0.7); രൂപാന്തരം: സ്കെയിൽ(0.7); )

7. ഒരു സർക്കിളിലേക്ക് രൂപാന്തരം

സാധാരണയായി ഉപയോഗിക്കുന്ന ആനിമേഷനുകളിലൊന്ന് ചതുരാകൃതിയിലുള്ള ഒരു മൂലകമാണ്, അത് മുകളിലേയ്‌ക്ക് ഹോവർ ചെയ്യുമ്പോൾ ഒരു വൃത്തമായി മാറുന്നു. CSS ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി ഉപയോഗിച്ച്, :ഹോവർ, ട്രാൻസിഷൻ എന്നിവയുമായി സംയോജിച്ച്, ഇത് പ്രശ്നങ്ങളില്ലാതെ നേടാനാകും:

സർക്കിൾ: ഹോവർ (ബോർഡർ-റേഡിയസ്: 70%; )

8. റൊട്ടേഷൻ

ഒരു ഘടകത്തെ നിശ്ചിത എണ്ണം ഡിഗ്രി കൊണ്ട് തിരിക്കുക എന്നതാണ് രസകരമായ ആനിമേഷൻ ഓപ്ഷൻ. ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾക്ക് വീണ്ടും ട്രാൻസ്ഫോർമേഷൻ പ്രോപ്പർട്ടി ആവശ്യമാണ്, എന്നാൽ മറ്റൊരു മൂല്യം - rotateZ(20deg) . ഈ പാരാമീറ്ററുകൾ ഉപയോഗിച്ച്, ബ്ലോക്ക് Z അക്ഷത്തിന് ആപേക്ഷികമായി 20 ഡിഗ്രി ഘടികാരദിശയിൽ തിരിക്കും:

റൊട്ടേറ്റ്: ഹോവർ (-വെബ്കിറ്റ്-ട്രാൻസ്ഫോം: റൊട്ടേറ്റ്സെഡ്(20ഡിഗ്രി); -എംഎസ്-ട്രാൻസ്ഫോം: റൊട്ടേറ്റ്സെഡ്(20ഡിഗ്രി); രൂപമാറ്റം: റൊട്ടേറ്റ്സെഡ്(20ഡിഗ്രി); )

9. 3D ഷാഡോ

ഫ്ലാറ്റ് ഡിസൈനിൽ ഈ പ്രഭാവം ഉചിതമാണോ എന്ന കാര്യത്തിൽ ഡിസൈനർമാരുടെ അഭിപ്രായങ്ങൾ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു. എന്നിരുന്നാലും, ഈ CSS3 ആനിമേഷൻ തികച്ചും യഥാർത്ഥവും വെബ് പേജുകളിലും ഉപയോഗിക്കുന്നു. ഇതിനകം പരിചിതമായ ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് ഞങ്ങൾ ഒരു ത്രിമാന പ്രഭാവം കൈവരിക്കും (ഒരു മൾട്ടി-ലെയർ ഷാഡോ സൃഷ്ടിക്കും) കൂടാതെ translateX(-7px) പാരാമീറ്റർ ഉപയോഗിച്ച് പരിവർത്തനം ചെയ്യും (ബ്ലോക്കിൻ്റെ തിരശ്ചീനമായ 7 പിക്സലുകൾ ഇടത്തേക്ക് മാറ്റുന്നത് ഉറപ്പാക്കും. ):

മൂന്ന് nsform: translateX( -7px); പരിവർത്തനം: translateX(-7px); )

ബ്രൗസർ പിന്തുണ

ഇനിപ്പറയുന്ന ബ്രൗസറുകൾ നിലവിൽ ട്രാൻസിഷൻ പ്രോപ്പർട്ടിയെ പിന്തുണയ്ക്കുന്നു:

ഡെസ്ക്ടോപ്പ് ബ്രൗസറുകൾ
ഇന്റർനെറ്റ് എക്സ്പ്ലോറർ	IE 10-ഉം അതിന് മുകളിലുള്ളവയും പിന്തുണയ്ക്കുന്നു
ക്രോം	പതിപ്പ് 26-ൽ നിന്ന് പിന്തുണയ്ക്കുന്നു (പതിപ്പ് 25-ൽ -webkit- പ്രിഫിക്സിൽ പ്രവർത്തിക്കുന്നത് വരെ)
ഫയർഫോക്സ്	പതിപ്പ് 16-ൽ നിന്ന് പിന്തുണയ്ക്കുന്നു (4-15 പതിപ്പുകളിൽ ഇത് -moz- പ്രിഫിക്സിൽ പ്രവർത്തിക്കുന്നു)
ഓപ്പറ	പതിപ്പ് 12.1-ൽ നിന്ന് പിന്തുണയ്ക്കുന്നു
സഫാരി	പതിപ്പ് 6.1-ൽ നിന്ന് പിന്തുണയ്ക്കുന്നു (3.1-6 പതിപ്പുകളിൽ ഇത് -webkit- പ്രിഫിക്സിൽ പ്രവർത്തിക്കുന്നു)

ഈ ഉദാഹരണങ്ങളിൽ ഉപയോഗിച്ചിരിക്കുന്ന ശേഷിക്കുന്ന പ്രോപ്പർട്ടികൾ, ട്രാൻസ്ഫോർമേഷൻ , ബോക്സ്-ഷാഡോ മുതലായവ, മിക്കവാറും എല്ലാ ആധുനിക ബ്രൗസറുകളും പിന്തുണയ്ക്കുന്നു. എന്നിരുന്നാലും, നിങ്ങളുടെ പ്രോജക്റ്റുകൾക്കായി നിങ്ങൾ ഈ ആശയങ്ങൾ ഉപയോഗിക്കാൻ പോകുകയാണെങ്കിൽ, ക്രോസ്-ബ്രൗസർ അനുയോജ്യത രണ്ടുതവണ പരിശോധിക്കാൻ ഞങ്ങൾ ശക്തമായി ശുപാർശ ചെയ്യുന്നു.

ഈ CSS3 ആനിമേഷൻ ഉദാഹരണങ്ങൾ നിങ്ങൾക്ക് സഹായകരമാണെന്ന് ഞങ്ങൾ പ്രതീക്ഷിക്കുന്നു. നിങ്ങൾക്ക് സൃഷ്ടിപരമായ വിജയം ഞങ്ങൾ നേരുന്നു!

അത്തരമൊരു വർദ്ധനവ് സംഘടിപ്പിക്കുന്നതിന്, ഞാൻ രണ്ട് വഴികൾ നിർദ്ദേശിക്കുന്നു. രണ്ടും ശുദ്ധമാണ് സി.എസ്.എസ്, ഉപയോഗമില്ലാതെ ജാവാസ്ക്രിപ്റ്റ്. നിങ്ങൾ ഈ രീതി പ്രയോഗിക്കാൻ പോകുന്നതിനെ ആശ്രയിച്ച്, ബാക്കിയുള്ള പേജ് ഘടകങ്ങളെ ബാധിക്കാതെ, ബ്ലോക്കിനെയോ ചിത്രത്തെയോ ആദ്യ രീതി വലുതാക്കുന്നു. ബാക്കിയുള്ളവയുടെ മുകളിൽ വളരുന്നതായി തോന്നുന്നു. അത്തരമൊരു സുഗമമായ വർദ്ധനവ് സംഘടിപ്പിക്കുന്നതിന്, നിങ്ങൾക്ക് ഇത് ആവശ്യമാണ്:
1. അത് ഏത് മൂലകമായിരിക്കും എന്ന് നിർണ്ണയിക്കുക. ഞങ്ങളുടെ കാര്യത്തിൽ, ഇത് ഒരു ക്ലാസുള്ള ഒരു ബ്ലോക്കായിരിക്കും തടയുക

2. ഞങ്ങളുടെ സൈറ്റിൻ്റെ html കോഡിൽ ഞങ്ങൾ അത് ശരിയായ സ്ഥലത്ത് പ്രദർശിപ്പിക്കുന്നു

സ്റ്റൈൽ ഫയലിൽ ഞങ്ങൾ ഇനിപ്പറയുന്ന പാരാമീറ്ററുകൾ നൽകുന്നു:

ബ്ലോക്ക്(വീതി:150px; ഉയരം:150px; പശ്ചാത്തലം:#f30; ഡിസ്പ്ലേ: ബ്ലോക്ക്; അതാര്യത: 1; -വെബ്കിറ്റ്-പരിവർത്തനം: സ്കെയിൽ(1,1); -വെബ്കിറ്റ്-ട്രാൻസിഷൻ-ടൈമിംഗ്-ഫംഗ്ഷൻ: ഈസി-ഔട്ട്; -വെബ്കിറ്റ് -ട്രാൻസിഷൻ-ഡ്യൂറേഷൻ: 550മിഎസ്; -മോസ്-ട്രാൻസ്ഫോം: സ്കെയിൽ(1,1); -മോസ്-ട്രാൻസിഷൻ-ടൈമിംഗ്-ഫംഗ്ഷൻ: ഈസ്-ഔട്ട്; -മോസ്-ട്രാൻസിഷൻ-ഡ്യൂറേഷൻ: 550മിഎസ്; .ബ്ലോക്ക്:ഹോവർ (-വെബ്കിറ്റ്- രൂപാന്തരം: സ്കെയിൽ(1.2,1.2); -വെബ്കിറ്റ്-ട്രാൻസിഷൻ-ടൈമിംഗ്-ഫംഗ്ഷൻ: ഈസ്-ഔട്ട്; -വെബ്കിറ്റ്-ട്രാൻസിഷൻ-ഡ്യൂറേഷൻ: 550മിഎസ്; -മോസ്-ട്രാൻസ്ഫോം: സ്കെയിൽ(1.2,1.2); -മോസ്-ട്രാൻസിഷൻ-ടൈമിംഗ്- ഫംഗ്‌ഷൻ: ഈസ്-ഔട്ട്; -moz-ട്രാൻസിഷൻ-ഡ്യൂറേഷൻ: 550മി.എസ്; )

പൂർത്തിയായ ഫലം നിങ്ങൾക്ക് പരിശോധിക്കാം. വീതി, ഉയരം, പശ്ചാത്തലം, മറ്റ് പാരാമീറ്ററുകൾ എന്നിവ നിങ്ങൾക്ക് ആവശ്യമുള്ളതിലേക്ക് സജ്ജമാക്കുക, പ്രധാന കാര്യം പാരാമീറ്ററുകൾ ശരിയായി വ്യക്തമാക്കുക എന്നതാണ് - പരിവർത്തനം- വർദ്ധനവിൻ്റെ വലുപ്പത്തിന് ഉത്തരവാദി, നിങ്ങൾ അത് ബ്ലോക്കിൽ സ്പർശിക്കേണ്ടതില്ല, സ്ഥിരസ്ഥിതിയായി ഇത് 1 ആണ് - യഥാർത്ഥ വലുപ്പം, എന്നാൽ പ്രോപ്പർട്ടിക്കൊപ്പം : ഹോവർഞങ്ങൾ അത് ആവശ്യമുള്ള വലുപ്പത്തിലേക്ക് മാറ്റുന്നു, ഈ സാഹചര്യത്തിൽ 1.2 വർദ്ധനവ് ഏത് വലുപ്പത്തിലേക്ക് മാറും.
തീർച്ചയായും, നിങ്ങൾക്ക് ഇത് മറ്റൊരു രീതിയിൽ മാറ്റാൻ കഴിയും, ഉദാഹരണത്തിന്, ഹോവർ ചെയ്യുമ്പോൾ നിങ്ങൾക്ക് സുഗമമായ കുറവ് വേണമെങ്കിൽ, ഇത് ചെയ്യാൻ ആരും നിങ്ങളെ വിലക്കില്ല.
അടുത്ത സ്വത്ത് - പരിവർത്തനം, മില്ലിസെക്കൻഡിലെ ആനിമേഷൻ വേഗതയ്ക്ക് ഉത്തരവാദി. നിങ്ങൾ അത് ഉപയോഗിച്ചില്ലെങ്കിൽ, എല്ലാം ഗണ്യമായി കൂടുകയും കുറയുകയും ചെയ്യും. ഈ ഉദാഹരണത്തിൽ, ഈ പരാമീറ്ററിൻ്റെ മൂല്യം 550മി.സി.

രണ്ടാമത്തെ രീതി ആദ്യത്തേതിൽ നിന്ന് അല്പം വ്യത്യസ്തമാണ്. അതിൻ്റെ ആനിമേഷനും വർദ്ധനവും പേജിൻ്റെ മറ്റ് ബ്ലോക്കുകളിലും ഘടകങ്ങളിലും സ്വാധീനം ചെലുത്തുന്നു. വലുതാക്കുമ്പോൾ, അവ വശങ്ങളിലേക്ക് നീങ്ങുന്നതായി തോന്നുന്നു. എന്നിരുന്നാലും, ഈ രീതിയും ഉപയോഗിക്കുന്നു, ഒരു പ്രത്യേക പ്രശ്നം പരിഹരിക്കാൻ പലർക്കും ഇത് ആവശ്യമാണ്.
അതിനാൽ ഹോവർ ഓൺ സുഗമമായ സൂം സംഘടിപ്പിക്കുന്നതിന് നമ്മൾ എന്താണ് ചെയ്യേണ്ടത്?

1. ആദ്യ ഉദാഹരണത്തിലെന്നപോലെ, ഒരു ക്ലാസ് ഉള്ള ഒരു ബ്ലോക്ക് ഞങ്ങൾ നിർവ്വചിക്കുന്നു ബ്ലോക്ക്2

2. വീണ്ടും ഞങ്ങൾ അത് ശരിയായ സ്ഥലത്ത് പ്രദർശിപ്പിക്കുന്നു

അതിന് ശൈലികൾ നൽകുക:

Block2(വീതി: 150px; ഉയരം: 150px; പശ്ചാത്തലം:#390; -webkit-transition: all 2s Ease; -moz-transition: all 2s ease; -ms-transition: all 2s Ease; -o-transition: all 2s Ease ; സംക്രമണം: എല്ലാ 2സെയും അനായാസം; .block2:ഹോവർ (വീതി: 200px; ഉയരം: 200px; )

ഈ സാഹചര്യത്തിൽ, ഞങ്ങൾ ബ്ലോക്ക് വലുപ്പം പിക്സലുകളിൽ മാറ്റി പ്രോപ്പർട്ടി ചേർക്കുക - പരിവർത്തനം, ഇത് വർദ്ധനവ് സുഗമമാക്കുന്നു. ആദ്യ രീതിയിൽ നിന്ന് വ്യത്യസ്തമായി, ഞങ്ങൾ ആനിമേഷൻ സമയം മില്ലിസെക്കൻഡിലല്ല, സെക്കൻഡിൽ വ്യക്തമാക്കുന്നു. ഉദാഹരണത്തിൽ, ഇത് 2 സെക്കൻഡ് ആണ്. ഈ ലളിതമായ വഴികളിലൂടെ നിങ്ങൾക്ക് സ്ക്രിപ്റ്റുകളുടെ ഉപയോഗം അവലംബിക്കാതെ തന്നെ സുഗമമായ വർദ്ധനവ് ഉണ്ടാക്കാം. ശുദ്ധമായ CSS ഉപയോഗിച്ച് നിങ്ങൾക്ക് എത്തിച്ചേരാനാകും.

ബ്രൗസറുകളുടെ പഴയ പതിപ്പുകൾക്ക് അവർക്ക് എന്താണ് വേണ്ടതെന്ന് മനസ്സിലാകില്ല, അതിനാൽ സ്വയം കാണുക. വ്യക്തിപരമായി, ഞാൻ ശ്രദ്ധിക്കുന്നില്ല, ഒരു ദശലക്ഷത്തിൽ 1 പേർ പുരാതന, പാവപ്പെട്ട ഇൻ്റർനെറ്റ് എക്സ്പ്ലോററിൽ നിന്ന് എൻ്റെ സൈറ്റ് സന്ദർശിക്കും, എന്തെങ്കിലും പ്രദർശിപ്പിക്കപ്പെടില്ല എന്ന വസ്തുതയെക്കുറിച്ചുള്ള മോശമായ കാര്യത്തെക്കുറിച്ച് വിഷമിക്കേണ്ടതില്ല. അത്തരം ഉപയോക്താക്കൾക്കായി, അവർ മാലിന്യം ഉപേക്ഷിച്ച് ഒരു സാധാരണ, മനുഷ്യ ബ്രൗസറിലേക്ക് മാറേണ്ട സമയമായിരിക്കുന്നു എന്ന സന്ദേശം ഞാൻ പ്രദർശിപ്പിക്കുന്നു.

അത്രയേയുള്ളൂ, നിങ്ങളുടെ ശ്രദ്ധയ്ക്ക് നന്ദി. 🙂

മൗസ് കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ ചിത്രം വലുതാക്കുന്നതിൻ്റെ ഫലം പലർക്കും അറിയാം. എന്നാൽ ബ്ലോക്ക് എലമെൻ്റിൻ്റെ പ്രധാന ഉള്ളടക്കം വലുതാക്കാതെ പശ്ചാത്തല-ചിത്രം മാത്രം വലുതാക്കുന്ന തരത്തിൽ നമുക്ക് ഇത് എങ്ങനെ നിർമ്മിക്കാനാകും?

340 പിക്സൽ വീതിയും 230 പിക്സൽ ഉയരവുമുള്ള ഒരു ബ്ലോക്ക് ഘടകം സൃഷ്ടിക്കാം.

അതിനുള്ള ശൈലി നമുക്ക് വ്യക്തമാക്കാം:

Vozm (
വീതി: 340px;
ഉയരം:230px;
ഫ്ലോട്ട്:ഇടത്;
കവിഞ്ഞൊഴുകുക: മറഞ്ഞിരിക്കുന്നു;
}

ഇടത്തേക്ക് വിന്യസിക്കുക - ഫ്ലോട്ട്:ഇടത്. മറഞ്ഞിരിക്കുന്ന മൂല്യത്തോടുകൂടിയ ഓവർഫ്ലോ പ്രോപ്പർട്ടിയും ഞങ്ങൾ വ്യക്തമാക്കുന്നു, അതിനാൽ പശ്ചാത്തല ചിത്രം ഞങ്ങളുടെ ബ്ലോക്കിൻ്റെ വിസ്തീർണ്ണത്തിനപ്പുറത്തേക്ക് വ്യാപിക്കില്ല.

ഞങ്ങളുടെ ബ്ലോക്ക് ഘടകത്തിലേക്ക് ഉള്ളടക്കം സ്ഥാപിക്കുക എന്നതാണ് അടുത്ത ഘട്ടം:

Vozm p (
നിറം:#da291c;
ഫോണ്ട്-വെയ്റ്റ്:ബോൾഡ്;
ഫോണ്ട് വലുപ്പം:16px;
ലൈൻ-ഉയരം:21px;
}
.vozm .red_bl (
വീതി: 30px;
ഉയരം: 6px;
പശ്ചാത്തല നിറം:#da291c;
}

ബ്ലോക്ക് എലമെൻ്റിലെ ഖണ്ഡികകൾക്കുള്ള ടെക്‌സ്‌റ്റ് വർണ്ണം വ്യക്തമാക്കുക - #da291c മൂല്യമുള്ള നിറം. 16 പിക്സലുകളുടെ ഫോണ്ട് വലുപ്പവും 21 പിക്സൽ ലൈൻ-ഉയരവുമുള്ള ടെക്സ്റ്റ് ബോൾഡ് ആയിരിക്കുമെന്നും ഞങ്ങൾ സൂചിപ്പിക്കുന്നു.

"red_bl" ശൈലി ഞങ്ങളുടെ ബ്ലോക്ക് കണ്ടെയ്‌നറിലേക്ക് നല്ല തിരശ്ചീനമായ ചുവന്ന ഘടകം ചേർക്കും. വീതി 30 പോയിൻ്റ്, ഉയരം 6 പോയിൻ്റ്, ടെക്‌സ്‌റ്റിന് സമാനമായ നിറം.

അകത്തെ ബ്ലോക്കിനായി ഞങ്ങൾ ഒരു ശൈലിയും ചേർക്കുന്നു:

Vposf (
സ്ഥാനം:ബന്ധു;
z-സൂചിക:9999;
ഇടത്:45px;
മുകളിൽ:40px;
}

ഇടത് വശത്ത് 45 പോയിൻ്റുകളും മുകളിൽ 40 പോയിൻ്റുകളും ഉള്ള ആന്തരിക മാർജിനുകളുള്ള ആന്തരിക ബ്ലോക്കിൻ്റെ ആപേക്ഷിക സ്ഥാനം ഞങ്ങൾ സൂചിപ്പിക്കുന്നു.

ഒരു പശ്ചാത്തല ചിത്രം പശ്ചാത്തല-ചിത്രം ചേർക്കുക:

അതിനുള്ള ശൈലി ഇതുപോലെ കാണപ്പെടുന്നു:

കുട്ടി (
വീതി: 100%;
ഉയരം: 100%;
പശ്ചാത്തല-സ്ഥാനം: കേന്ദ്രം;
പശ്ചാത്തല വലുപ്പം: കവർ;
-webkit-transition: all .5s;
-moz-ട്രാൻസിഷൻ: എല്ലാം .5s;
-o-ട്രാൻസിഷൻ: എല്ലാ .5s;
സംക്രമണം: എല്ലാം .5s;
}

ഹോവറിൽ പശ്ചാത്തല ഇമേജ് വർദ്ധിപ്പിക്കുന്നതിൻ്റെ പ്രഭാവം 50 മില്ലിസെക്കൻഡിനുള്ളിൽ സുഗമമായി സംഭവിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ വ്യത്യസ്ത ബ്രൗസറുകൾക്കുള്ള ട്രാൻസിഷൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നു. വീതിയും ഉയരവും 100% ആയി സജ്ജമാക്കുക. ഞങ്ങൾ പശ്ചാത്തല സ്ഥാനവും (പശ്ചാത്തല-സ്ഥാനം) മധ്യഭാഗത്ത് സജ്ജമാക്കുകയും ബ്ലോക്കിൻ്റെ വീതിയിലും ഉയരത്തിലും ഇമേജ് (പശ്ചാത്തല വലുപ്പം) സ്കെയിൽ ചെയ്യുകയും ചെയ്യുന്നു.

Vozm:hover.child,
.vozm:focus .child (
-ms-പരിവർത്തനം: സ്കെയിൽ (1.2);
-moz-transform: സ്കെയിൽ (1.2);
-o-transform: സ്കെയിൽ(1.2);
രൂപാന്തരം: സ്കെയിൽ (1.2);
}

ഇത് ചെയ്യുന്നതിന്, മൂല്യ സ്കെയിൽ ഉപയോഗിച്ച് ട്രാൻസ്ഫോർമേഷൻ പ്രോപ്പർട്ടി ഉപയോഗിക്കുക. ഒറിജിനലിൻ്റെ 20% വർദ്ധനയാണ് വരുത്തിയിരിക്കുന്നത്.

ശരി, നമുക്ക് പശ്ചാത്തലം തന്നെ ലോഡ് ചെയ്യാം:

Bg-1 (പശ്ചാത്തല-ചിത്രം: url("/userf_fs/stati/fon_sh.jpg");മാർജിൻ-ടോപ്പ്: -59px;)

പശ്ചാത്തല ചിത്രമുള്ള ബ്ലോക്ക് എലമെൻ്റ് ഞങ്ങളുടെ ടെക്‌സ്‌റ്റിന് താഴെയായതിനാൽ, അത് ഉയർത്തേണ്ടതുണ്ട്. ഇത് ചെയ്യുന്നതിന്, മാർജിൻ ടോപ്പ് പ്രോപ്പർട്ടിക്ക് ഒരു നെഗറ്റീവ് മൂല്യം ഉപയോഗിക്കുക.

അതിനാൽ html കോഡ് ഇതുപോലെ കാണപ്പെടുന്നു:

കൂടാതെ css ഇപ്രകാരമാണ്:

Vozm (
വീതി: 340px;
ഉയരം:230px;
ഫ്ലോട്ട്:ഇടത്;
കവിഞ്ഞൊഴുകുക: മറഞ്ഞിരിക്കുന്നു;
}
.കുട്ടി(
വീതി: 100%;
ഉയരം: 100%;
പശ്ചാത്തല-സ്ഥാനം: കേന്ദ്രം;
പശ്ചാത്തല വലുപ്പം: കവർ;
-webkit-transition: all .5s;
-moz-ട്രാൻസിഷൻ: എല്ലാം .5s;
-o-ട്രാൻസിഷൻ: എല്ലാ .5s;
സംക്രമണം: എല്ലാം .5s;
}
.vozm:ഹോവർ .കുട്ടി,
.vozm:focus .child (
-ms-പരിവർത്തനം: സ്കെയിൽ (1.2);
-moz-transform: സ്കെയിൽ (1.2);
-വെബ്കിറ്റ്-പരിവർത്തനം: സ്കെയിൽ (1.2);
-o-transform: സ്കെയിൽ(1.2);
രൂപാന്തരം: സ്കെയിൽ (1.2);
}
.vozm പി (
നിറം:#da291c;
ഫോണ്ട്-വെയ്റ്റ്:ബോൾഡ്;
ഫോണ്ട് വലുപ്പം:16px;
ലൈൻ-ഉയരം:21px;
}
.vozm .red_bl (
വീതി: 30px;
ഉയരം: 6px;
പശ്ചാത്തല നിറം:#da291c;
}
..jpg");മാർജിൻ ടോപ്പ്: -59px;)
.vposf (
സ്ഥാനം:ബന്ധു;
z-സൂചിക:9999;
ഇടത്:45px;
മുകളിൽ:40px;
}

ഞങ്ങൾ പരസ്പരം ബന്ധപ്പെട്ട നിരവധി ബ്ലോക്ക് ഘടകങ്ങൾ സ്ഥാപിക്കുകയാണെങ്കിൽ, നമുക്ക് ഇനിപ്പറയുന്ന ചിത്രം ലഭിക്കും.

അതിനാൽ, ഞങ്ങൾ ആഗ്രഹിച്ച ഫലം കൈവരിച്ചു.

ആധുനിക വെബ്‌സൈറ്റുകളിലെ ഒരു സാധാരണ രീതി ഒരു ഇമേജ് ഉപയോഗിച്ച് ഒരു ബ്ലോക്ക് സുഗമമായി വലുതാക്കുക എന്നതാണ്. CSS ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് എങ്ങനെ ചെയ്യാം?

ഹോവർ CSS-ൽ സുഗമമായ ഇമേജ് സൂം

പ്രശ്നത്തിൻ്റെ പരിഹാരം ഞങ്ങൾ രണ്ട് ഘട്ടങ്ങളായി വിഭജിക്കുന്നു: html മാർക്ക്അപ്പ്, css ശൈലികൾ. ആദ്യം, ഉള്ളിലുള്ള ചിത്രങ്ങൾ ഉപയോഗിച്ച് ബ്ലോക്കുകൾ അടയാളപ്പെടുത്താം:

എല്ലാ ബ്ലോക്കുകൾക്കും ബോക്സ് ക്ലാസ് നൽകി. അതിൻ്റെ പ്രധാന ഗുണങ്ങളിൽ ഒന്ന് ഓവർഫ്ലോ ആയിരിക്കും: മറഞ്ഞിരിക്കുന്നു, അതായത്, ബ്ലോക്കിനപ്പുറത്തേക്ക് പോകുന്ന എല്ലാം മറയ്ക്കുക. നമുക്ക് ചിത്രം വലുതാക്കിയാലോ? അതെ. എന്നാൽ ബ്ലോക്ക് പരിമിതപ്പെടുത്തിയ ഭാഗം മാത്രമേ ദൃശ്യമാകൂ.
ഞങ്ങൾ ഇത് ക്രമീകരിച്ചു. നമുക്ക് ശൈലികളുടെ വിവരണത്തിലേക്ക് പോകാം.

പെട്ടി (
കവിഞ്ഞൊഴുകുന്നു:മറഞ്ഞിരിക്കുന്നു;
വീതി: 250px;
ഉയരം: 250px;
}
എല്ലാം പ്രസ്താവിച്ചതുപോലെയാണ് - ചതുരാകൃതിയിലുള്ള ബ്ലോക്കുകൾ, സ്റ്റാൻഡേർഡിന് സമാനമായ വലുപ്പം, ചിത്രം വലുതാക്കിയിട്ടില്ല, പിന്നെ 250 ബൈ 250.
ഓവർഫ്ലോ:ഹൈഡൻ പ്രോപ്പർട്ടി, നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, സൂം ഇൻ ചെയ്യുമ്പോൾ ബ്ലോക്കിൻ്റെ അതിരുകൾക്കപ്പുറത്തേക്ക് പോകാൻ അനുവദിക്കുന്നില്ല.
ചിത്രങ്ങളുമായി ബന്ധപ്പെട്ട ഗുണങ്ങൾ:

ബോക്സ് img (
-moz-ട്രാൻസിഷൻ: എല്ലാ 1-ഉം ഈസ്-ഔട്ട്;
-o-ട്രാൻസിഷൻ: എല്ലാ 1-ഉം ഈസ്-ഔട്ട്;
-webkit-transition: all 1s Ease-out;
സംക്രമണം: എല്ലാ 1-ഉം ഈസി-ഔട്ട്;
}

ബോക്സ് img: ഹോവർ(
-വെബ്കിറ്റ്-പരിവർത്തനം: സ്കെയിൽ (1.2);
-moz-transform: സ്കെയിൽ (1.2);
-o-transform: സ്കെയിൽ(1.2);
രൂപാന്തരം: സ്കെയിൽ (1.2);
}
CSS3 ഇല്ലാതെ ഇതിന് ഒരു വഴിയുമില്ല. എല്ലാ ആധുനിക ബ്രൗസറുകളും ആനിമേഷൻ പ്രദർശിപ്പിക്കും. നിങ്ങൾക്ക് സംക്രമണവും പരിവർത്തന പാരാമീറ്ററുകളും ആവശ്യമാണ്. ഞങ്ങൾ ആനിമേഷൻ സമയം 1 സെക്കൻഡ് (1സെ) ആയി സജ്ജമാക്കി. വർധന 1.2 മടങ്ങ് വരും. നിങ്ങൾക്ക് ഇത് നിങ്ങളുടെ അഭിരുചിക്കനുസരിച്ച് മാറ്റാം.
ഇപ്പോൾ ഉദാഹരണത്തിന് ജോലി!

തീർച്ചയായും, ചിത്രങ്ങൾ വലുതാക്കാൻ നിരവധി മാർഗങ്ങളുണ്ട്. കൂടാതെ പ്രധാനമായും സ്ക്രിപ്റ്റുകളുടെയും പ്ലഗിന്നുകളുടെയും ഉപയോഗം ഉപയോഗിക്കുന്നു. എൻ്റെ അഭിപ്രായത്തിൽ, ധാരാളം ഫോട്ടോഗ്രാഫുകളോ ഏതെങ്കിലും ചിത്രങ്ങളോ ഉള്ള വിഭവങ്ങളുടെ കാര്യത്തിൽ അത്തരം രീതികൾ ന്യായീകരിക്കപ്പെടുന്നു. എൻ്റെ ബ്ലോഗ് അങ്ങനെയല്ല. കൂടാതെ, പതിവുപോലെ, എൻ്റെ സൈറ്റിൽ സമയം, അറിവ്, വിഭവങ്ങൾ എന്നിവയുടെ ഏറ്റവും കുറഞ്ഞ ചെലവിൻ്റെ പാത ഞാൻ പിന്തുടരുന്നു.

ഒരു വെബ്‌സൈറ്റിലെ ചിത്രങ്ങൾ സ്‌ക്രിപ്റ്റുകളൊന്നും ഉപയോഗിക്കാതെ, എന്നാൽ html മാത്രം ഉപയോഗിച്ച് വലുതാക്കാനുള്ള ഒരു മാർഗം ഞാൻ നിങ്ങൾക്ക് വാഗ്ദാനം ചെയ്യുന്നു.

ഒരു വെബ്‌സൈറ്റിൽ ചിത്രം വലുതാക്കുന്ന ഈ രീതി വായനക്കാരനെ ചിത്രം വേഗത്തിൽ കാണാൻ അനുവദിക്കും, കാരണം നിങ്ങളുടെ വെബ്‌സൈറ്റിന് സ്‌ക്രിപ്റ്റുകൾ അധികമായി ലോഡ് ചെയ്യേണ്ടതില്ല.

വെബ്സൈറ്റിൽ ചിത്രം വലുതാക്കുന്നു

രീതി 1 - കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ സൈറ്റിലെ ചിത്രം വലുതാക്കുക

വളരെ ലളിതമായ, നന്നായി, ഏറ്റവും ലളിതമായ മാർഗം, സത്യസന്ധമായി. ഇമേജ് പ്രോപ്പർട്ടികളിൽ നിങ്ങൾ ഇനിപ്പറയുന്ന കോഡ് ചേർക്കേണ്ടതുണ്ട്:

Onmouseover="this.style.width="വലിയ ഇമേജ് വീതി px"" onmouseout="this.style.width="ചെറിയ ഇമേജ് വീതി px""

നിങ്ങൾ മൗസ് കഴ്‌സർ ഹോവർ ചെയ്യുമ്പോൾ, ചിത്രം വലുതാകുന്നു.
ഇതെല്ലാം ടെക്സ്റ്റ് എഡിറ്ററിൽ ചെയ്തതാണെന്ന് നിങ്ങൾ മനസ്സിലാക്കുമെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.

രീതി 2 - മൗസിൽ ക്ലിക്ക് ചെയ്ത് സൈറ്റിലെ ചിത്രം വലുതാക്കുക

രീതി സമാനമാണ്, നിങ്ങൾ onmouseover മാറ്റി പകരം onclick ചെയ്യേണ്ടതുണ്ട്. ഇമേജ് പ്രോപ്പർട്ടികളിൽ ഇനിപ്പറയുന്ന കോഡ് ചേർത്തു:

Style="width: "width value of the small image px; ബോർഡർ:2px കട്ടിയുള്ള കറുപ്പ്;" onclick="this.style.width=വലിയ ഇമേജ് വീതി px"" onmouseout="this.style.width="ചെറിയ ഇമേജ് വീതി px""

ഇത് പൂർണ്ണമായും ഇതുപോലെ കാണപ്പെടും

പുസി ചിത്രത്തിനുള്ള ഫലവും കോഡും ഇതാ.
നിങ്ങൾ മൗസിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ, ചിത്രം യഥാർത്ഥ ചിത്രത്തിൻ്റെ വലുപ്പത്തിലേക്കോ നിങ്ങൾ വ്യക്തമാക്കുന്ന വലുപ്പത്തിലേക്കോ വലുതാക്കുന്നു. വലുപ്പം കുറയ്ക്കുന്നതിന്, അതായത്, ചിത്രം അതിൻ്റെ യഥാർത്ഥ വലുപ്പത്തിലേക്ക് തിരികെ നൽകുക, പേജിൽ എവിടെയെങ്കിലും ക്ലിക്ക് ചെയ്യുക.

സൈറ്റിലെ ചിത്രങ്ങൾ വലുതാക്കുന്നതിന് - html ഉപയോഗിച്ച് - അത്തരം രീതികൾ ഉപയോഗിക്കുന്നത് നിങ്ങൾക്ക് ബുദ്ധിമുട്ടുള്ളതായി തോന്നിയില്ലെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.

പൊതുവേ, പല വെബ്‌മാസ്റ്ററുകളും ഏതെങ്കിലും എഞ്ചിൻ ഉപയോഗിക്കുന്നതിൽ മാത്രം പരിമിതപ്പെടുത്തുന്നില്ലെന്നും അവരുടെ സൈറ്റുകളിൽ html കോഡുകൾ ഉപയോഗിക്കുമെന്നും ഞാൻ വിശ്വസിക്കുന്നു.

ഇതും വായിക്കുക:

2015-10-27T16:07:59+00:00 പ്രതീക്ഷസ്ക്രിപ്റ്റുകളും കോഡുകളും സൈറ്റിലെ ചിത്രം വലുതാക്കുന്നു, സൈറ്റിലെ ചിത്രം വലുതാക്കുന്നു

തീർച്ചയായും, ചിത്രങ്ങൾ വലുതാക്കാൻ നിരവധി മാർഗങ്ങളുണ്ട്. കൂടാതെ പ്രധാനമായും സ്ക്രിപ്റ്റുകളുടെയും പ്ലഗിന്നുകളുടെയും ഉപയോഗം ഉപയോഗിക്കുന്നു. എൻ്റെ അഭിപ്രായത്തിൽ, ധാരാളം ഫോട്ടോഗ്രാഫുകളോ ഏതെങ്കിലും ചിത്രങ്ങളോ ഉള്ള വിഭവങ്ങളുടെ കാര്യത്തിൽ അത്തരം രീതികൾ ന്യായീകരിക്കപ്പെടുന്നു. എൻ്റെ ബ്ലോഗ് അങ്ങനെയല്ല. കൂടാതെ, പതിവുപോലെ, എൻ്റെ സൈറ്റിൽ സമയം, അറിവ്, വിഭവങ്ങൾ എന്നിവയുടെ ഏറ്റവും കുറഞ്ഞ ചെലവിൻ്റെ പാത ഞാൻ പിന്തുടരുന്നു. വർദ്ധിപ്പിക്കാനുള്ള ഒരു വഴി ഞാൻ നിങ്ങൾക്ക് വാഗ്ദാനം ചെയ്യുന്നു ...

നഡെഷ്ദ ട്രോഫിമോവ [ഇമെയിൽ പരിരക്ഷിതം]അഡ്മിനിസ്ട്രേറ്റർ ബ്ലോഗ് സൈറ്റ്

നിങ്ങൾക്ക് ഇതിൽ താൽപ്പര്യമുണ്ടാകാം:

പ്രധാന പേജിൽ നിന്നും RSS ൽ നിന്നും ഞങ്ങൾ വിഭാഗം എൻട്രികൾ നീക്കം ചെയ്യുന്നു

സൈറ്റിൻ്റെ പ്രവർത്തനക്ഷമതയും രൂപവും ഞങ്ങൾ മെച്ചപ്പെടുത്തുന്നത് തുടരുന്നു. പ്രധാന പേജിൽ നിന്നും RSS ൽ നിന്നും ഞങ്ങൾ അനാവശ്യ പോസ്റ്റുകൾ നീക്കം ചെയ്യുന്നു.

ഒരു വേർഡ്പ്രസ്സ് സൈറ്റിലെ ബ്രെഡ്ക്രംബ്സ്

വെബ്സൈറ്റിലെ ബ്രെഡ്ക്രംബ്സ് - അവ എന്തൊക്കെയാണ്, അവ എങ്ങനെ ചെയ്യണം?

5 മിനിറ്റിനുള്ളിൽ ഒരു ടെക്സ്റ്റ് ഷാഡോ എങ്ങനെ ഉണ്ടാക്കാം

ഹലോ, എൻ്റെ ബ്ലോഗിൻ്റെ പ്രിയ വായനക്കാരൻ. 5 മിനിറ്റിനുള്ളിൽ css ശൈലികളും html കോഡും ഉപയോഗിച്ച് ഒരു ടെക്സ്റ്റ് ഷാഡോ എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഈ ലേഖനത്തിൽ നിങ്ങൾ പഠിക്കും.

css കോഡ് ഉപയോഗിച്ച് ഒരു ഡൗൺലോഡ് ബട്ടൺ എങ്ങനെ നിർമ്മിക്കാം

ഹലോ, എൻ്റെ ബ്ലോഗിൻ്റെ പ്രിയ വായനക്കാരൻ. ഞാൻ ബട്ടണുകളുടെ വിഷയം തുടരുന്നു. css കോഡ് ഉപയോഗിച്ച് ഒരു ഡൗൺലോഡ് ബട്ടൺ എങ്ങനെ നിർമ്മിക്കാം എന്നതിനെക്കുറിച്ച് ഈ ലേഖനം സംസാരിക്കും.

ഒരു വെബ്‌സൈറ്റിനായി ബട്ടണുകൾ എങ്ങനെ നിർമ്മിക്കാം