CSS3 പരിവർത്തനങ്ങൾ നൈസ് ഫേഡ് ഇഫക്റ്റുകൾ സൃഷ്ടിക്കുക
വെബ് ഡിസൈനർമാർക്ക് സെല്ലുലാർ ശ്രേണിയുടെ ഹിറ്റ് മാറ്റുമ്പോൾ അവർ സൃഷ്ടിക്കുന്ന പേജുകളിൽ കൂടുതൽ നിയന്ത്രണം ആവശ്യമാണ്. CSS3- ൽ അവതരിപ്പിച്ച പുതിയ ശൈലികൾ, വെബ് പ്രൊഫഷണലുകൾക്ക് അവരുടെ പേജുകളിലേക്ക് ഫോട്ടോഷോപ്പു പോലുള്ള ഇഫക്റ്റുകൾ ചേർക്കാൻ കഴിവ് നൽകുന്നു. ഇതിൽ ഡ്രോപ്പ് ഷാഡോകളും ഗ്ലോസ്സ് , റൗണ്ട്ഡ് കോണറുകളും, അതിലുമധികം സവിശേഷതകളും ഉണ്ട്. സൈറ്റുകളിൽ നല്ല സംവേദനാത്മകത സൃഷ്ടിക്കാൻ ആനിമേഷൻ-സമാനമായ ഇഫക്റ്റുകൾ ഉപയോഗിച്ചു.
നിങ്ങളുടെ വെബ് സൈറ്റിലെ ഘടകഭാഗങ്ങളിലേക്ക് ചേർക്കുന്ന ഒരു നല്ല ഇഫക്റ്റ് ഇഫക്റ്റ് അത്ലറ്റിക് , ട്രാന്സിഷന് ഉള്ള ഒരെണ്ണം ഉപയോഗിച്ച് അവയെ പുറംതള്ളുകയാണ് ചെയ്യുക. ഒരു സൈറ്റ് സന്ദർശകൻ എന്തെങ്കിലും ചെയ്യുന്ന സമയത്ത് ഫോക്കസ് ചെയ്യുമ്പോൾ മങ്ങിയ സ്ഥലങ്ങളെ സൃഷ്ടിച്ച് നിങ്ങളുടെ പേജുകൾ കൂടുതൽ സംവേദനാത്മകമാക്കുന്നതിന് എളുപ്പമുള്ളതും നന്നായി പിന്തുണയ്ക്കുന്നതുമായ മാർഗ്ഗമാണ് ഇത്, ആ ഘടകത്തിന് മുകളിലൂടെ ഹോവർ ചെയ്യൽ പോലെ.
നിങ്ങളുടെ വെബ് പേജുകളിലെ വിവിധ ഘടകങ്ങളിലേക്ക് ഈ സംവേദനാത്മക ദൃശ്യ പ്രഭാവം ചേർക്കുന്നത് എത്ര എളുപ്പമാണെന്ന് നമുക്ക് നോക്കാം.
നമുക്ക് ഹോവർ ചെയ്യുമ്പോൾ ഒപാസിറ്റി മാറ്റുക
ഒരു ഉപഭോക്താവ് ആ മൂലകിന്മേൽ ഹോവർ ചെയ്യുമ്പോൾ ഒരു ഇമേജിന്റെ അതാര്യത എങ്ങനെ മാറ്റം വരുത്തും എന്ന് നമുക്ക് നോക്കാം. ഈ ഉദാഹരണത്തിന് (താഴെ കാണിച്ചിരിക്കുന്നത് HTML) ഞാൻ ഗ്രേഡൗട്ടിലെ ക്ലാസ് ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഒരു ഇമേജ് ഉപയോഗിക്കുന്നു.
അത് ചവച്ചരച്ചാക്കി മാറ്റാൻ, ഞങ്ങളുടെ സ്റ്റൈൽഷീറ്റിന് ഇനിപ്പറയുന്ന സ്റ്റൈൽ നിയമങ്ങൾ ചേർക്കുന്നു:
.greydout {
-വെബ്ബിറ്റ്-അതാര്യത: 0.25;
-മോസ്-അതാര്യത: 0.25;
അതാര്യത: 0.25;
}
ഈ അതാര്യത ക്രമീകരണങ്ങൾ 25% ലേക്ക് വിവർത്തനം ചെയ്യുന്നു. ചിത്രം അതിന്റെ സാധാരണ സുതാര്യത 1/4 കാണിക്കും എന്നാണ് ഇതിനർത്ഥം. സുതാര്യതയില്ലെങ്കിൽ പൂർണ്ണമായി 100% ആയിരിക്കും, 0% പൂർണ്ണമായും സുതാര്യമായിരിക്കും.
അടുത്തതായി, ഇമേജിനെ കൂടുതൽ വ്യക്തമായി (അല്ലെങ്കിൽ കൂടുതൽ കൃത്യതയോടെ, പൂർണ്ണമായി തുറന്നുകാണിക്കാൻ) വരുമ്പോൾ, മൌസ് അത് നീട്ടിവയ്ക്കുമ്പോൾ നിങ്ങൾ ചേർക്കേണ്ടതാണ്: ഹോവർ സ്യൂഡോ ക്ലാസ്:
.greydout: ഹോവർ {
-വെബ്ബിറ്റ്-അതാര്യത: 1;
-Moz-opacity: 1;
അതാര്യത: 1;
}
ഈ ഉദാഹരണങ്ങൾക്കായി, ആ ബ്രൌസറുകളുടെ പഴയ പതിപ്പുകളിൽ പിന്നോട്ടുള്ള അനുയോജ്യത ഉറപ്പാക്കാൻ ഞാൻ വെണ്ടറിന്റെ മുൻഗണന പതിപ്പുകൾ ഉപയോഗിക്കുന്നു. ഇത് ഒരു നല്ല പ്രാക്ടീസ് ആണെങ്കിൽ, യാഥാർത്ഥ്യമാണ് അതാര്യത ഭരണം ഇപ്പോൾ ബ്രൌസറുകളിൽ പിന്തുണയ്ക്കുന്നത്, ആ വെണ്ടർ പ്രിഫിക്സ് ചെയ്ത ലൈനുകൾ ഉപേക്ഷിക്കാൻ ഇത് വളരെ സുരക്ഷിതമാണ്. എന്നിരുന്നാലും, പഴയ ബ്രൗസർ പതിപ്പുകൾക്കായുള്ള പിന്തുണ ഉറപ്പാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ ഈ പ്രിഫിക്സുകൾ ഉൾപ്പെടുത്തേണ്ടതില്ല. പ്രഖ്യാപനം അവസാനിപ്പിച്ച് സ്വീകരിച്ച ഏറ്റവും മികച്ച രീതി പിന്തുടർന്ന്, സാധാരണ, പ്രിഫിക്സ് ശൈലിയിലുള്ള ശൈലി പിന്തുടരുക.
നിങ്ങൾ ഒരു സൈറ്റിൽ ഇത് വിന്യസിക്കുകയാണെങ്കിൽ, ഈ അതാര്യത വളരെ പെട്ടെന്ന് തന്നെ മാറുന്നതായി നിങ്ങൾ കാണും. ആദ്യം അത് ചാരമാണ്, അതിനുശേഷം രണ്ട് ഇടവേളകളിൽ ഇടയ്ക്കുള്ള സംസ്ഥാനങ്ങളും ഇല്ല. ഇത് പ്രകാശ പ്രതീകം പോലെയാണ് - ഓൺ അല്ലെങ്കിൽ ഓഫ്. ഇത് നിങ്ങൾക്കാവശ്യമുള്ളതാകാം, പക്ഷേ കൂടുതൽ ക്രമാനുഗതമായ ഒരു മാറ്റം കൊണ്ട് പരീക്ഷിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുണ്ടാവും.
ഒരു നല്ല ഇഫക്ട് ചേർക്കാനും ഈ മങ്ങൽ ക്രമാനുഗതമാക്കാനും, നിങ്ങൾ ഗ്യാരന്റിഔട്ട് ക്ലാസിലേക്ക് ട്രാൻസിഷൻ പ്രോപ്പർട്ടി ചേർക്കാൻ ആഗ്രഹിക്കുന്നു:
.greydout {
-വെബ്ബിറ്റ്-അതാര്യത: 0.25;
-മോസ്-അതാര്യത: 0.25;
അതാര്യത: 0.25;
-വെബ്ബ്കിറ്റ്-പരിവർത്തനം: എല്ലാ 3s സുഖവും;
-മോസ്-ട്രാൻസിഷൻ: എല്ലാ 3 ഐസ് സൌജന്യവും;
-MS-transition: എല്ലാം 3s എളുപ്പത്തിൽ;
-ഓൺ-ട്രാൻസിഷൻ: എല്ലാം 3s എളുപ്പത്തിൽ;
പരിവർത്തനം: എല്ലാ 3s സുഖവും;
}
ഈ കോഡ് ഉപയോഗിച്ച്, മാറ്റം പെട്ടെന്നുതന്നെ മാറുന്നതിനുപകരം ക്രമേണ മാറ്റം വരും.
ഒരിക്കൽ കൂടി, നമ്മൾ ഒരുപാട് വെണ്ടർ പ്രീഫിക്സ് ചെയ്ത നിയമങ്ങൾ ഇവിടെ ഉപയോഗിക്കുന്നു. പരിവർത്തന അതോറിറ്റിയായി പിന്തുണയ്ക്കില്ല, അതിനാൽ ഈ പ്രീഫിക്സുകൾ അർത്ഥപൂർണ്ണമായിരിക്കും.
ഈ ആശയവിനിമയം നിങ്ങൾ ആസൂത്രണം ചെയ്യുമ്പോൾ ഓർക്കുവാനുള്ള ഒരു സംവിധാനമാണ് ടച്ച് സ്ക്രീൻ ഡിവൈസുകൾ "ഹോവർ" സ്റ്റാൻഡേർഡ് ഇല്ല എന്നതിനാൽ ഒരു മൊബൈൽ ഫോൺ പോലെ ഒരു ടച്ച് സ്ക്രീൻ ഉപയോഗിച്ച് ആരെങ്കിലും ഈ ഇഫക്ടുകൾ നഷ്ടപ്പെടുന്നു. പരിവർത്തനം പലപ്പോഴും സംഭവിക്കും, പക്ഷെ അത് സാധ്യമല്ലാത്തതിനാൽ അത് കാണാനാകില്ല. നിങ്ങൾ ഇത് ഒരു നല്ല ബോണസ് പ്രമേയമായി കൂട്ടിച്ചേർക്കുന്നതാണ് നല്ലത്, പക്ഷേ നിങ്ങൾക്കാവശ്യമായ ഉള്ളടക്കം മനസ്സിലാക്കാൻ ആവശ്യമായ മാറ്റങ്ങൾ വരുത്തണം.
മങ്ങുന്നത് മങ്ങിയതാണു്
നിങ്ങൾ ഒരു മങ്ങാത്ത ചിത്രം ആരംഭിക്കേണ്ടതില്ല, പൂർണ്ണമായും തുറന്ന ചിത്രത്തിൽ നിന്നും മറയ്ക്കാൻ സംക്രമണങ്ങളും ഒപാസിറ്റിയും ഉപയോഗിക്കാം. ഒരേയൊരു ചിത്രം ഉപയോഗിച്ച്, ഒരേയൊരു തരം വർക്കുകൾ ഉപയോഗിച്ച്:
class = "withfadeout">
മുൻപുള്ളതുപോലെ, ഒപാസിറ്റി മാറ്റുന്നു: ഹോവർ സെലക്റ്റർ:
.withfadeout {
-webkit- പരിവർത്തനം: എല്ലാ 2s എളുപ്പത്തിൽ-ഔട്ട്-ഔട്ട്;
-മോസ്-ട്രാൻസിഷൻ: എല്ലാ 2 സെലെസ്-ഇൻ-ഔട്ട്;
-MS-transition: എല്ലാ 2s എളുപ്പത്തിൽ-ഔട്ട്-ഔട്ട്;
-ഓൺ-ട്രാൻസിഷൻ: എല്ലാ 2 സെലെസ്-ഇൻ-ഔട്ട്;
പരിവർത്തനം: എല്ലാ 2 സെലെസ്-ഇൻ-ഔട്ട്;
}
withfadeout: hover {
-വെബ്ബിറ്റ്-അതാര്യത: 0.25;
-മോസ്-അതാര്യത: 0.25;
അതാര്യത: 0.25;
}
ഈ ഉദാഹരണത്തിൽ, ചിത്രം പൂർണ്ണമായും തുറന്നുകാട്ടുന്നതിൽ നിന്നും സുതാര്യമാവും - നമ്മുടെ ആദ്യ ഉദാഹരണത്തിന്റെ പിന്നിലേക്ക് മാറുന്നു.
ഇമേജുകൾക്കപ്പുറത്തേക്ക് പോകുന്നത്
ഈ വിഷ്വൽ ട്രാൻസിഷനുകളും ഫേഡുകളിലേക്ക് ഇമേജുകളിലേക്കും പ്രയോഗിക്കാൻ കഴിയുന്നത് നല്ലതാണ്, എന്നാൽ ഈ CSS ഇഫക്റ്റുകൾ ഉപയോഗിച്ച് ഇമേജുകൾ ഉപയോഗിക്കുന്നതിന് നിങ്ങൾ പരിമിതപ്പെടുത്തിയിട്ടില്ല. നിങ്ങൾക്ക് ക്ലിക്കുചെയ്ത് സൂക്ഷിക്കുമ്പോൾ എളുപ്പത്തിൽ നീക്കംചെയ്യുന്ന CSS- ശൈലീകൃത ബട്ടണുകൾ നിങ്ങൾക്ക് എളുപ്പത്തിൽ മാറ്റാനാകും. നിങ്ങൾ ഉപയോഗിക്കുന്നത് അതാര്യത്വം സജ്ജമാക്കും: സക്രിയ ക്ലാസ് സജീവമാക്കുകയും ബട്ടൺ നിർവചിക്കുന്ന ക്ലാസിൽ മാറ്റം വരുത്തുകയും ചെയ്യുക. എന്ത് സംഭവിക്കുന്നുവെന്ന് കാണാൻ ഈ ബട്ടൺ ക്ലിക്കുചെയ്ത് പിടിക്കുക.
ഓണ്ലൈനില് ഉയരുകയോ ക്ളിക്ക് ചെയ്യുമ്പോള് പ്രത്യേകിച്ച് ഏതെങ്കിലും ദൃശ്യ മൂലകക്ഷി ഫെയ്ഡ് ഉണ്ടാക്കുക സാധ്യമാണ്. ഈ ഉദാഹരണത്തിൽ ഞാൻ മൌസിന്റെ മുകളിലായിരിക്കുമ്പോൾ, div ന്റെയും ഒറിജിനലിന്റെയും ഒപാസിറ്റി മാറ്റുന്നു. ഇവിടെയാണ് CSS:
#myDiv {
വീതി: 280px;
പശ്ചാത്തല വർണം: # 557A47;
നിറം: # dfdfdf;
പാഡിംഗ്: 10px;
-webkit-transition: എല്ലാം 4s എളുപ്പവുമല്ല 0s;
-മോസ്-ട്രാൻസിഷൻ: എല്ലാ 4 കളും സുഗമമായ 0s;
-ms-transition: എല്ലാം 4s എളുപ്പത്തിൽ-ഔട്ട് 0 സെമുകളിൽ;
-ഒ-പരിവർത്തനം: എല്ലാം 4s എളുപ്പത്തിൽ -0s;
പരിവർത്തനം: എല്ലാ 4s എളുപ്പവും-ഔട്ട് 0s;
}
#myDiv: hover {
-വെബ്ബിറ്റ്-അതാര്യത: 0.25;
-മോസ്-അതാര്യത: 0.25;
അതാര്യത: 0.25;
നിറം: # 000;
}
പശ്ചാത്തല നിറങ്ങളുടെ പശ്ചാത്തലത്തിൽ നാവിഗേഷൻ മെനുകൾക്ക് പ്രയോജനം ലഭിക്കും
ഈ ലളിതമായ നാവിഗേഷൻ മെനുവിൽ പശ്ചാത്തല നിറം ഞാൻ മെനു ഇനങ്ങളിൽ മൗസിനെ പോലെ മെമ്മറിയിലേക്കും പുറത്തേയ്ക്കും മങ്ങുന്നു. ഇവിടെ HTML:
- വീട്
- CSS3 ട്യൂട്ടോറിയലുകൾ
- CSS3 ഗുണവിശേഷതകൾ
ഇവിടെയാണ് CSS:
ul # sampleNav {list-style: none; }
ഉള് # sampleNav li {
പ്രദർശിപ്പിക്കുക: ഇൻലൈൻ;
ഫ്ലോട്ട്: ഇടത്;
പാഡിംഗ്: 5px 15px;
മാർജിൻ: 0 5px;
-വെബ്ബിറ്റ്-ട്രാൻസിഷൻ: എല്ലാ 2 സെക്കന്റിലും;
-ഒരു-പരിവർത്തനം: എല്ലാ 2 സെക്കന്റിലും;
-ms-transition: എല്ലാ 2 സെക്കന്റിലും;
-ഒ-പരിവർത്തനം: എല്ലാ 2 സെക്കന്റിലും;
പരിവർത്തനം: എല്ലാ 2 സെക്കന്റിലും;
}
ul # sampleNav li a {ടെക്സ്റ്റ്-അലങ്കരിക്കൽ: ഒന്നുമില്ല; }
ഉള് # sampleNav li: ഹോവർ {
പശ്ചാത്തല വർണം: # DAF197;
}
ബ്രൌസർ പിന്തുണ
ഞാൻ ഇതിനകം ഏതാനും തവണ സ്പർശിച്ചതു പോലെ, ഈ ശൈലികൾ വളരെ മികച്ച ബ്രൗസർ പിന്തുണയുള്ളതിനാൽ നിങ്ങൾക്ക് തകരാറുകളില്ലാതെ ഉപയോഗിക്കാൻ മടിക്കേണ്ടതില്ല. ഇന്റർനെറ്റ് എക്സ്പ്ലോററിൻറെ പഴയ പതിപ്പുകളേക്കാള് വളരെ അപൂർവമായത് മാത്രമല്ല, എല്ലാ 11 പതിപ്പിനുമുള്ള എല്ലാ പതിപ്പിനുമുള്ള പിന്തുണ അവസാനിപ്പിക്കാൻ മൈക്രോസോഫ്റ്റിന്റെ സമീപകാല തീരുമാനവും ഈ പഴയ ബ്രൌസറുകളെ കുറച്ചുകൂടി കുറവായി മാറുന്നു. ഒരു പഴയ ബ്രൗസർ ഈ ഫേഡ് മാറ്റം കാണുക, അത് ഒരു വലിയ പ്രശ്നമാകരുത്. ഈ തരത്തിലുള്ള ഇഫക്റ്റുകൾ ആസ്വദിക്കാൻ കഴിയുന്നിടത്തോളം കാലം പ്രവർത്തനക്ഷമത വർദ്ധിപ്പിക്കാനോ കീ ഉള്ളടക്കങ്ങൾ വെളിപ്പെടുത്താനോ അവ ആശ്രയിക്കരുത്, തുടർന്ന് ഇഫക്റ്റുകൾക്ക് പിന്തുണയ്ക്കാത്ത പഴയ ബ്രൗസറുകൾക്ക് കുറച്ചധികം ആസ്വാദ്യകരമായ അനുഭവം ലഭിക്കും, എന്നാൽ ആ ബ്രൌസറുകളിലെ ഉപയോക്താക്കൾ പോലും അവർ സാധാരണ പോലെ സൈറ്റ് ഉപയോഗിക്കാനും അവർക്കാവശ്യമുള്ള വിവരങ്ങൾ നേടുകയും പ്രത്യേകിച്ചും, വ്യത്യാസം അറിയുന്നു.
എക്സ്ട്രാ ഫ fun; രണ്ടു ചിത്രങ്ങൾ കൈമാറുക
ഒരു ചിത്രം മറ്റൊന്നിലേക്ക് എങ്ങനെ മറയ്ക്കാമെന്നതിന്റെ ഉദാഹരണം ഇതാ. HTML ഉപയോഗിക്കുക:
കൂടാതെ, പൂർണ്ണമായും സുതാര്യവും, മറ്റൊന്ന് പൂർണ്ണമായും അതാര്യവുമാണ്, തുടർന്ന് പരിവർത്തനത്തെ രണ്ടു കുത്തുകളാക്കി മാറ്റുന്നു.
.swapMe img {-webkit-transition: എല്ലാ 1 ന്റെ എളുപ്പത്തിൽ-ഔട്ട്-ഔട്ട്; -മോസോ-പരിവർത്തനം: എല്ലാ 1 ന്റെ ലളിതമായ-ഔട്ട്-ഔട്ട്; -MS-transition: എല്ലാ 1 ന്റെ എളുപ്പത്തിൽ-ഔട്ട്-ഔട്ട്; -ഒ-പരിവർത്തന: എല്ലാ 1 ന്റെ എളുപ്പത്തിൽ-ഔട്ട്-ഔട്ട്; പരിവർത്തനം: എല്ലാ 1 ന്റെ എളുപ്പത്തിൽ-ഔട്ട്-ഔട്ട്; } .swap1, .swapMe: ഹോവർ .swap2 {-webkit-opacity: 1; -Moz-opacity: 1; അതാര്യത: 1; } .swapMe: ഹോവർ .swap1, .swap2 {-webkit-opacity: 0; -moz-opacity: 0; അതാര്യത: 0; }