ഗ്രാഫിക് എഡിറ്ററുകൾ ഉപയോഗിക്കാതെ, കഴിയുന്നത്ര വേഗത്തിൽ ഒരു ചിത്രം ചാരനിറമാക്കേണ്ടത് ആവശ്യമായി വന്നേക്കാം. തീർച്ചയായും, നിങ്ങൾക്ക് Adobe ഫോട്ടോഷോപ്പ് ഗ്രാഫിക് എഡിറ്റർ ഉപയോഗിക്കാം (നിങ്ങൾക്ക് ആഴവും ടോണും പോലും സജ്ജമാക്കാൻ കഴിയും). തീർച്ചയായും, നിങ്ങൾക്ക് ബ്രൗസറിൽ അത്തരം പാരാമീറ്ററുകൾ ക്രമീകരിക്കാൻ കഴിയില്ല, പക്ഷേ ഞങ്ങളുടെ കണ്ണുകൾ (തീർച്ചയായും, നിങ്ങൾ ഒരു പ്രൊഫഷണലല്ലെങ്കിൽ) വ്യത്യാസം ശ്രദ്ധിക്കില്ല.
ഈ ലേഖനത്തിൽ ഒരു ഇമേജ് ഗ്രേ ആക്കാനുള്ള വഴികൾ നമ്മൾ നോക്കും.
1. CSS ഫിൽട്ടർ
സ്വത്ത് ഉപയോഗിക്കുന്നത് ഫിൽട്ടർഒരു ബ്ലാക്ക് ആൻഡ് വൈറ്റ് ഇമേജ് സൃഷ്ടിക്കുന്നതിനുള്ള ഏറ്റവും എളുപ്പമുള്ള മാർഗമാണിത്. IE-യിൽ ഒരു ബ്ലാക്ക് ആൻഡ് വൈറ്റ് ഇമേജ് സൃഷ്ടിക്കാൻ, നിങ്ങൾ പ്രോപ്പർട്ടി ഉപയോഗിക്കുകയും വേണം ഫിൽട്ടർ.
ഇന്ന്, സ്വത്ത് ഫിൽട്ടർ CSS3 സാങ്കേതികവിദ്യയുടെ ഭാഗമാണ്, ഇത് Firefox, Chrome, Safari പോലുള്ള ബ്രൗസറുകൾ പിന്തുണയ്ക്കുന്നു. വെബ്കിറ്റ് ഫിൽട്ടറുകൾക്ക് ബ്ലാക്ക് ആൻഡ് വൈറ്റ് ഇഫക്റ്റ് സൃഷ്ടിക്കാൻ മാത്രമല്ല, സെപിയ, ബ്ലർ ഇഫക്റ്റുകൾ നൽകാനും കഴിയും.
ചിത്രം ചാരനിറമാക്കുന്നതിന്, നിങ്ങൾ ഇനിപ്പറയുന്ന സവിശേഷതകൾ സജ്ജീകരിക്കേണ്ടതുണ്ട്:
ഈ കോഡ് IE6-9, Chrome18+, Safari 6.0+, Opera15+ എന്നിവയിൽ പ്രവർത്തിക്കും.
2. ജാവാസ്ക്രിപ്റ്റ്
മുകളിലെ കോഡിന് പകരമുള്ളതാണ് ജാവാസ്ക്രിപ്റ്റ്, IE6 ഉം അതിൽ താഴെയുള്ളതും ഉൾപ്പെടെ, പ്രവർത്തനക്ഷമമാക്കിയാൽ എല്ലാ ബ്രൗസറുകളിലും ഇത് പ്രവർത്തിക്കും.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | var imgObj = document.getElementById("js-image" ) ;< imgPixels.height ; y++ ) { for (var x = 0 ; x < imgPixels.width ; x++ ) { var i = (y * 4 ) * imgPixels.width + x * 4 ; var avg = (imgPixels.data [ i] + imgPixels.data [ i + 1 ] + imgPixels.data [ i + 2 ] ) / 3 ; imgPixels.data [ i] = avg; imgPixels.data [ i + 1 ] = avg; imgPixels.data [ i + 2 ] = avg; } } canvasContext.putImageData (imgPixels, 0 , 0 , 0 , 0 , imgPixels.width , imgPixels.height ) ; return canvas.toDataURL () ; } imgObj.src = gray(imgObj) ; |
ഫംഗ്ഷൻ ഗ്രേ(imgObj) (var canvas = document.createElement ("കാൻവാസ്"); var canvasContext = canvas.getContext ("2d"); var imgW = imgObj.width ; var imgH = imgObj.height ; canvas.W; canvas.height = imgH; canvasContext.drawImage (imgObj, 0 ) var imgPixels = canvasContext.getImageData (0, 0, imgW, imgH)
ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച്, നമുക്ക് ഒരു ചിത്രത്തിന് കറുപ്പും വെളുപ്പും ഇഫക്റ്റ് നൽകാം, ഉദാഹരണത്തിന്, ചിത്രത്തിൽ ഹോവർ ചെയ്ത് ക്ലിക്ക് ചെയ്യുമ്പോൾ. സുഗമമായ ഫേഡ്-ടു-ഗ്രേ ഇഫക്റ്റ് സൃഷ്ടിക്കാൻ നിങ്ങൾക്ക് ഒരുമിച്ച് jQuery ഉപയോഗിക്കാം. ബ്രൗസറിൽ ജാവാസ്ക്രിപ്റ്റ് പ്രവർത്തനരഹിതമാക്കിയേക്കാം എന്നതാണ് ഒരേയൊരു പോരായ്മ.
3.എസ്.വി.ജി
SVG ഫിൽട്ടറുകൾ ഉപയോഗിക്കുക എന്നതാണ് മറ്റൊരു മാർഗം.
നിങ്ങൾ ചെയ്യേണ്ടത് ഒരു SVG ഫയൽ സൃഷ്ടിച്ച് താഴെയുള്ള കോഡ് ഉപയോഗിക്കുക മാത്രമാണ്:
| 1 2 3 4 | നിങ്ങൾക്ക് എല്ലാ കോഡുകളും നേരിട്ട് CSS-ൽ എഴുതാനും കഴിയും: img (ഫിൽട്ടർ: url ( |
#ഗ്രേസ്കെയിൽ");"
ഫലം സമാനമായിരിക്കും.
എല്ലാ ബ്രൗസറുകളിലും ഈ പ്രഭാവം പിന്തുണയ്ക്കുന്നതിന്, എല്ലാ രീതികളും സംയോജിപ്പിക്കേണ്ടത് ആവശ്യമാണ്. ഈ കോഡ് Firefox 3.5+, Opera15+, Safari, Chrome, IE എന്നിവയിൽ പ്രവർത്തിക്കും.
| 1 2 3 4 5 6 7 8 | img (-webkit-filter: ഗ്രേസ്കെയിൽ(100%) ; -webkit-filter: ഗ്രേസ്കെയിൽ(1 ); ഫിൽറ്റർ: ഗ്രേസ്കെയിൽ(100%) ; ഫിൽട്ടർ: url ("../img/gray.svg#grayscale" ) ; ഫിൽട്ടർ : ചാരനിറം; |
ഈ കോഡ് Javascript-നൊപ്പം ഉപയോഗിക്കാനാകും, Javascript പ്രവർത്തനരഹിതമാക്കിയാൽ, ഈ കോഡ് പ്രവർത്തിക്കും. Modernizr ഇത് സഹായിക്കും.
Modernizr കൂട്ടിച്ചേർക്കുന്നു jsബോഡിക്കുള്ള ക്ലാസ്, ബ്രൗസറിൽ Javascript പ്രവർത്തനക്ഷമമാക്കിയിട്ടുണ്ടെങ്കിൽ, ക്ലാസ് രജിസ്റ്റർ ചെയ്യും no-js Javascript പ്രവർത്തനരഹിതമാക്കിയിട്ടുണ്ടെങ്കിൽ. CSS-ൽ എഴുതാനുള്ളത് ഇനി പറയുന്നവയാണ്:
| 1 2 3 4 5 6 7 8 | .no-js img (-webkit-filter: ഗ്രേസ്കെയിൽ(100%) ; -webkit-filter: ഗ്രേസ്കെയിൽ(1 ) ; ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100% ); ഫിൽട്ടർ: url (../img/gray.svg#grayscale " ;അരിപ്പ: ചാരനിറം; |
മങ്ങൽ, തെളിച്ചം, മറ്റ് നിരവധി ഫിൽട്ടറുകൾ എന്നിവ പ്രയോഗിച്ച് HTML ഘടകങ്ങളും ചിത്രങ്ങളും പരിഷ്‌ക്കരിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന SVG-യുടെ വളരെ രസകരമായ ഒരു ഓഫ്‌ഷൂട്ടാണ് CSS3 ഫിൽട്ടറുകൾ. ഈ ട്യൂട്ടോറിയലിൽ, അവ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് ഞങ്ങൾ വേഗത്തിൽ പരിശോധിക്കും.
ഇതെങ്ങനെ പ്രവർത്തിക്കുന്നു?
CSS ഉപയോഗിച്ച് നമുക്ക് വളരെ സങ്കീർണ്ണമായ ചില ഇഫക്റ്റുകൾ സൃഷ്ടിക്കാൻ കഴിയും. അവ ചിത്രങ്ങളിലും HTML ഘടകങ്ങളിലും പ്രയോഗിക്കാൻ കഴിയും. ഈ ഇഫക്റ്റുകളെല്ലാം നിയന്ത്രിക്കാൻ ഉപയോഗിക്കുന്ന വസ്തുവാണ് ഫിൽട്ടർ.
ഫിൽട്ടർ: ഫിൽട്ടർ(മൂല്യം);
നിങ്ങൾ പ്രതീക്ഷിക്കുന്നതുപോലെ, ഈ പ്രോപ്പർട്ടിക്ക് ഒരു ബ്രൗസർ പ്രിഫിക്‌സിൻ്റെ ഉപയോഗം ആവശ്യമാണ്. എന്നാൽ ഇപ്പോൾ, മാത്രം -വെബ്കിറ്റ്-(Chrome, Safari) എന്നിവ മാത്രമാണ് ഈ പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുന്ന ബ്രൗസർ എഞ്ചിനുകൾ.
വെബ്കിറ്റ്-ഫിൽട്ടർ: ഫിൽറ്റർ(മൂല്യം) ;
-moz-ഫിൽറ്റർ: ഫിൽറ്റർ (മൂല്യം) ;
-o-ഫിൽട്ടർ: ഫിൽട്ടർ (മൂല്യം) ;
-ms-ഫിൽറ്റർ: ഫിൽട്ടർ(മൂല്യം) ;
ഫിൽട്ടറേഷൻ
നിരവധി ഫിൽട്ടറുകൾ ഉണ്ട്, അതിനാൽ ഓരോന്നിനെയും നന്നായി മനസ്സിലാക്കാൻ, നമുക്ക് അവ ഓരോന്നായി നോക്കാം. ഒരു ഘടകത്തിലേക്ക് ഒന്നിലധികം ഫിൽട്ടറുകൾ പ്രയോഗിക്കാൻ കഴിയും (ഒരു സ്പേസ് കൊണ്ട് വേർതിരിച്ചത്), ഉദാഹരണത്തിന്, തെളിച്ചംഒപ്പം മങ്ങിക്കുക:
ഫിൽട്ടർ: മങ്ങൽ (5px ) തെളിച്ചം (0.5 );
കുറച്ച് ഫിൽട്ടറുകൾ ചുവടെ ഉൾപ്പെടുത്തിയിട്ടില്ല, എന്നാൽ നിലവിലുള്ള CSS (സുതാര്യതയും നിഴലുകളും) ഉപയോഗിച്ച് അവ എളുപ്പത്തിൽ നടപ്പിലാക്കാൻ കഴിയും. ഫിൽട്ടറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണിക്കാൻ ഞങ്ങൾ ഉപയോഗിക്കുന്ന യഥാർത്ഥ ചിത്രം ഇതാ:
ഫിൽട്ടറുകളെ പിന്തുണയ്‌ക്കാത്തതും ഫലം കാണാൻ കഴിയാത്തതുമായ ബ്രൗസറാണ് നിങ്ങൾ ഉപയോഗിക്കുന്നതെങ്കിൽ, ഫിൽട്ടർ പ്രയോഗിച്ചതും (ആദ്യ ഫോട്ടോ) ഫിൽട്ടറിൻ്റെ ഫലവും ഒരു സ്റ്റാറ്റിക് ഇമേജിൻ്റെ രൂപത്തിൽ (രണ്ടാമത്തെ ഫോട്ടോ) ഞാൻ കാണിക്കും.
മങ്ങിക്കുക
എപ്പോഴെങ്കിലും CSS ഉപയോഗിച്ച് ഒരു ചിത്രത്തിലോ വാചകത്തിലോ ഒരു ഗൗസിയൻ ബ്ലർ ചെയ്യാൻ ആഗ്രഹിക്കുന്നുണ്ടോ? ഫിൽട്ടറുകൾ ഉപയോഗിച്ച് നിങ്ങൾക്കത് ചെയ്യാൻ കഴിയും! മങ്ങൽ അളക്കുന്നത് പിക്സലിലാണ്, അതിനാൽ നിങ്ങൾക്ക് ഇതുപോലൊന്ന് ചെയ്യാൻ കഴിയും:
ഫിൽട്ടർ: ബ്ലർ(5px );
// ബ്രൗസർ സ്പെസിഫിക്
-webkit-filter: blur(5px) ;
-moz-ഫിൽറ്റർ: ബ്ലർ(5px );
-o-ഫിൽട്ടർ: ബ്ലർ(5px );
-ms-ഫിൽട്ടർ: ബ്ലർ(5px );
തെളിച്ചം
തെളിച്ചം പൂജ്യത്തിൽ നിന്ന് ഒന്നിലേക്ക് അളക്കുന്നു, 1 പൂർണ്ണ തെളിച്ചവും (വെളുപ്പ്) 0 യഥാർത്ഥ തെളിച്ചവുമാണ്.
ഫിൽട്ടർ: തെളിച്ചം (0.2 );
// ബ്രൗസർ സ്പെസിഫിക്
-വെബ്കിറ്റ്-ഫിൽട്ടർ: തെളിച്ചം (0.2 );
-moz-ഫിൽറ്റർ: തെളിച്ചം (0.2 );
-o-ഫിൽട്ടർ: തെളിച്ചം (0.2 );
-ms-ഫിൽട്ടർ: തെളിച്ചം (0.2 );
സാച്ചുറേഷൻ
സാച്ചുറേഷൻ ഒരു ശതമാനമായി കണക്കാക്കുന്നു.
ഫിൽട്ടർ: സാച്ചുറേറ്റ് (50% );
// ബ്രൗസർ സ്പെസിഫിക്
-webkit-filter: saturate(50% );
-moz-ഫിൽറ്റർ: സാച്ചുറേറ്റ് (50% );
-o-ഫിൽട്ടർ: സാച്ചുറേറ്റ് (50% );
-ms-ഫിൽട്ടർ: സാച്ചുറേറ്റ് (50% );
ടോൺ റൊട്ടേഷൻ
ഈ ഫിൽട്ടർ ഭ്രമണം ചെയ്തുകൊണ്ട് ടോൺ മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു (നിങ്ങൾ തിരിയുന്ന നിറങ്ങളുടെ ഒരു ചക്രത്തെക്കുറിച്ച് ചിന്തിക്കുക). ഇത് ഡിഗ്രിയിൽ അളക്കുന്നു.
ഫിൽട്ടർ: ഹ്യൂ-റൊട്ടേറ്റ്(20ഡിഗ്രി);
// ബ്രൗസർ സ്പെസിഫിക്
-വെബ്കിറ്റ്-ഫിൽട്ടർ: ഹ്യൂ-റൊട്ടേറ്റ് (20ഡിഗ്രി) ;
-moz-ഫിൽറ്റർ: ഹ്യൂ-റൊട്ടേറ്റ് (20ഡിഗ്രി) ;
-o-ഫിൽട്ടർ: ഹ്യൂ-റൊട്ടേറ്റ് (20ഡിഗ്രി);
-ms-ഫിൽട്ടർ: ഹ്യൂ-റൊട്ടേറ്റ് (20ഡിഗ്രി) ;
കോൺട്രാസ്റ്റ്
കോൺട്രാസ്റ്റ്, വീണ്ടും, ഒരു ശതമാനമായി അളക്കുന്നു. 100% സ്ഥിരസ്ഥിതിയാണ്, 0% പൂർണ്ണമായും കറുത്ത ചിത്രം സൃഷ്ടിക്കും. 100%-ൽ കൂടുതലുള്ള എന്തും കോൺട്രാസ്റ്റ് ചേർക്കുന്നു!
ഫിൽട്ടർ: കോൺട്രാസ്റ്റ്(150% );
// ബ്രൗസർ സ്പെസിഫിക്
-webkit-filter: കോൺട്രാസ്റ്റ്(150% );
-moz-ഫിൽറ്റർ: കോൺട്രാസ്റ്റ് (150% );
-o-ഫിൽട്ടർ: കോൺട്രാസ്റ്റ് (150% );
-ms-ഫിൽട്ടർ: കോൺട്രാസ്റ്റ് (150% );
വിപരീതം
ഒരു ശതമാനമായും അളക്കുന്നു. ലഭ്യമായ മൂല്യങ്ങൾ 0% മുതൽ 100% വരെയാണ്. വിചിത്രമെന്നു പറയട്ടെ, ഇപ്പോൾ, വെബ്കിറ്റ് 100% ൽ താഴെയാണെങ്കിൽ വിപരീതങ്ങളെ പിന്തുണയ്ക്കുന്നില്ല.
ഫിൽട്ടർ: വിപരീതം (100%);
// ബ്രൗസർ സ്പെസിഫിക്
-webkit-filter: invert (100%) ;
-moz-ഫിൽറ്റർ: വിപരീതം (100% );
-o-ഫിൽട്ടർ: വിപരീതം (100% );
-ms-ഫിൽട്ടർ: വിപരീതം (100% );
ബ്ലീച്ചിംഗ്
വീണ്ടും, നിങ്ങൾ ചിത്രം ഡീസാച്ചുറേറ്റ് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ശതമാനം നൽകുക. ലഭ്യമായ മൂല്യങ്ങൾ 0% മുതൽ 100% വരെയാണ്.
ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100% );
// ബ്രൗസർ സ്പെസിഫിക്
-webkit-filter: ഗ്രേസ്കെയിൽ(100% );
-moz-ഫിൽറ്റർ: ഗ്രേസ്കെയിൽ(100% );
-o-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100% );
-ms-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100% );
സെപിയ
നിങ്ങൾക്ക് ഇൻസ്റ്റാഗ്രാമിൽ എന്തെങ്കിലും പോസ്റ്റുചെയ്യണമെങ്കിൽ ഇത് വളരെ ഉപയോഗപ്രദമാണെന്ന് ഞാൻ കരുതുന്നു. നിങ്ങൾ ഇതിനായി CSS ഉപയോഗിക്കില്ലെന്ന് ഞാൻ കരുതുന്നുവെങ്കിലും. ഏത് സാഹചര്യത്തിലും, ചാരനിറത്തിലുള്ള ഈ ഷേഡുകൾ, മൊത്തത്തിൽ, ചിത്രത്തിലേക്ക് സെപിയ ചേർക്കാൻ നിങ്ങളെ അനുവദിക്കും. 100% പൂർണ്ണമായ സെപിയയായിരിക്കും, 0% യഥാർത്ഥ ചിത്രമായിരിക്കും.
ഫിൽട്ടർ: സെപിയ(100% );
// ബ്രൗസർ സ്പെസിഫിക്
-വെബ്കിറ്റ്-ഫിൽട്ടർ: സെപിയ (100% );
-moz-ഫിൽറ്റർ: സെപിയ (100% );
-o-ഫിൽട്ടർ: സെപിയ(100% );
-ms-ഫിൽട്ടർ: സെപിയ(100% );
ബ്രൗസർ പിന്തുണ
| വെബ്കിറ്റ് | മോസില്ല | ത്രിശൂലം | പ്രെസ്റ്റോ | |
| മങ്ങിക്കുക | പരീക്ഷണാത്മകം | ഇല്ല | ഇല്ല | ഇല്ല |
| തെളിച്ചം | ||||
| സാച്ചുറേഷൻ | ||||
| ടോണുകൾ തിരിക്കുക | ||||
| കോൺട്രാസ്റ്റ് | ||||
| വിപരീതം | പൂർണ്ണമായ വിപരീതം മാത്രം |
|||
| ബ്ലീച്ചിംഗ് | പരീക്ഷണാത്മകം | |||
| സെപിയ |
നിങ്ങൾക്ക് എന്തെങ്കിലും ചോദ്യങ്ങളുണ്ടെങ്കിൽ, ഞങ്ങളുടെ ഉപയോഗം ഉപയോഗിക്കാൻ ഞങ്ങൾ ശുപാർശ ചെയ്യുന്നു
CSS3 ഫിൽട്ടറുകൾഫോട്ടോഷോപ്പ് ഫിൽട്ടറുകൾക്ക് സമാനമായ വിഷ്വൽ ഇഫക്റ്റുകൾ ബ്രൗസറിൽ പുനർനിർമ്മിക്കുക. ചിത്രങ്ങളിൽ മാത്രമല്ല, ശൂന്യമല്ലാത്ത ഘടകങ്ങളിലേക്കും ഫിൽട്ടറുകൾ ചേർക്കാൻ കഴിയും.
ഫിൽട്ടറുകളുടെ സെറ്റ് ബ്രൗസറിൽ പ്രീഇൻസ്റ്റാൾ ചെയ്തവയിൽ മാത്രം പരിമിതപ്പെടുത്തിയിട്ടില്ല. നിങ്ങൾക്ക് SVG ഫിൽട്ടറുകൾ svg ഘടകത്തോടൊപ്പം ലിങ്കിൽ നിന്ന് ഡൗൺലോഡ് ചെയ്യുന്നതിലൂടെയും ഉപയോഗിക്കാം.
SVG സ്പെസിഫിക്കേഷൻ്റെ ഭാഗമായാണ് ഫിൽട്ടറുകൾ ആദ്യം സൃഷ്ടിച്ചത്. വെക്റ്റർ ഗ്രാഫിക്സിൽ പിക്സൽ ഗ്രിഡ് അടിസ്ഥാനമാക്കിയുള്ള ഇഫക്റ്റുകൾ പ്രയോഗിക്കുക എന്നതായിരുന്നു അവരുടെ ചുമതല. SVG-നുള്ള ബ്രൗസർ പിന്തുണയോടെ, ബ്രൗസറുകളിൽ നേരിട്ട് ഈ ഇഫക്റ്റുകൾ ഉപയോഗിക്കാൻ ഇപ്പോൾ സാധ്യമാണ്.
ബ്രൗസറുകൾ പേജ് പിക്സൽ പിക്സൽ ഉപയോഗിച്ച് പ്രോസസ്സ് ചെയ്യുന്നു, നിർദ്ദിഷ്ട ഇഫക്റ്റുകൾ പ്രയോഗിക്കുകയും ഒറിജിനലിന് മുകളിൽ ഫലം വരയ്ക്കുകയും ചെയ്യുന്നു. അതിനാൽ, നിരവധി ഫിൽട്ടറുകൾ ഉപയോഗിക്കുന്നതിലൂടെ നിങ്ങൾക്ക് വ്യത്യസ്ത ഇഫക്റ്റുകൾ നേടാൻ കഴിയും; കൂടുതൽ ഫിൽട്ടറുകൾ, പേജ് റെൻഡർ ചെയ്യാൻ ബ്രൗസറിന് കൂടുതൽ സമയമെടുക്കും.
നിങ്ങൾക്ക് ഒരേ സമയം ഒന്നിലധികം ഫിൽട്ടറുകൾ പ്രയോഗിക്കാൻ കഴിയും. ഒരു മൂലകത്തിന് മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ അത്തരം ഇഫക്റ്റുകൾ പ്രയോഗിക്കുന്നതിനുള്ള ക്ലാസിക് മാർഗം: ഹോവർ .
ബ്രൗസർ പിന്തുണ
IE:പിന്തുണയ്ക്കുന്നില്ല
എഡ്ജ്: url() ഒഴികെ 13.0
ഫയർഫോക്സ്: 35.0
Chrome: 18.0 -വെബ്കിറ്റ്-
സഫാരി: 9.1, 6.0 -വെബ്കിറ്റ്-
ഓപ്പറ: 40.0, 15.0 -വെബ്കിറ്റ്-
iOS സഫാരി: 9.3, 6.1 -വെബ്കിറ്റ്-
ആൻഡ്രോയിഡ് ബ്രൗസർ: 53.0, 4.4 -വെബ്കിറ്റ്-
Android-നുള്ള Chrome: 55.0, 47.0 -വെബ്കിറ്റ്-
| ഫിൽട്ടർ | |
|---|---|
| മങ്ങിക്കുക() | മൂല്യം നീളമുള്ള യൂണിറ്റുകളിൽ വ്യക്തമാക്കിയിരിക്കുന്നു, ഉദാഹരണത്തിന് px, em. യഥാർത്ഥ ചിത്രത്തിന് ഒരു ഗൗസിയൻ മങ്ങൽ പ്രയോഗിക്കുന്നു. റേഡിയസ് മൂല്യം കൂടുന്തോറും മങ്ങൽ വർദ്ധിക്കും. ആരം മൂല്യം വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, സ്ഥിരസ്ഥിതി 0 ആണ്. |
| തെളിച്ചം() | മൂല്യം % അല്ലെങ്കിൽ ദശാംശ ഭിന്നസംഖ്യകളിൽ വ്യക്തമാക്കിയിരിക്കുന്നു. ചിത്രത്തിൻ്റെ തെളിച്ചം മാറ്റുന്നു. ഉയർന്ന മൂല്യം, ചിത്രം തെളിച്ചമുള്ളതാണ്. സ്ഥിര മൂല്യം 1 ആണ്. |
| കോൺട്രാസ്റ്റ്() | മൂല്യം % അല്ലെങ്കിൽ ദശാംശ ഭിന്നസംഖ്യകളിൽ വ്യക്തമാക്കിയിരിക്കുന്നു. ചിത്രത്തിൻ്റെ ദൃശ്യതീവ്രത ക്രമീകരിക്കുന്നു, അതായത്. ചിത്രത്തിൻ്റെ/പശ്ചാത്തലത്തിൻ്റെ ഇരുണ്ടതും ഭാരം കുറഞ്ഞതുമായ പ്രദേശങ്ങൾ തമ്മിലുള്ള വ്യത്യാസം. സ്ഥിര മൂല്യം 100% ആണ്. പൂജ്യത്തിൻ്റെ മൂല്യം യഥാർത്ഥ ചിത്രം ഇരുണ്ട ചാരനിറത്തിലുള്ള പശ്ചാത്തലത്തിൽ മറയ്ക്കും. 0 മുതൽ 100% വരെ അല്ലെങ്കിൽ 0 മുതൽ 1 വരെ വർദ്ധിക്കുന്ന മൂല്യങ്ങൾ ക്രമേണ യഥാർത്ഥ ചിത്രം യഥാർത്ഥ ഡിസ്പ്ലേയിലേക്ക് തുറക്കും, കൂടാതെ മുകളിലുള്ള മൂല്യങ്ങൾ ഹൈലൈറ്റുകളും ഷാഡോകളും തമ്മിലുള്ള വ്യത്യാസം വർദ്ധിപ്പിക്കും. |
| ഡ്രോപ്പ്-ഷാഡോ() | ബോക്സ് ഷാഡോ, ടെക്സ്റ്റ് ഷാഡോ പ്രോപ്പർട്ടികൾ പോലെയാണ് ഫിൽട്ടർ പ്രവർത്തിക്കുന്നത്. ഇനിപ്പറയുന്ന മൂല്യങ്ങൾ ഉപയോഗിക്കുന്നു: എക്സ്-ആക്സിസ് ഓഫ്സെറ്റ് Y-ആക്സിസ് ഓഫ്സെറ്റ് ബ്ലർ സ്ട്രെച്ച് ഷാഡോ കളർ. ഫിൽട്ടറിൻ്റെ വ്യതിരിക്തമായ സവിശേഷത, നിഴൽ മൂലകങ്ങളിലേക്കും അതിൻ്റെ ഉള്ളടക്കത്തിലേക്കും അവയുടെ സുതാര്യത കണക്കിലെടുത്ത് ചേർക്കുന്നു എന്നതാണ്, അതായത്. മൂലകത്തിൽ ടെക്സ്റ്റ് അടങ്ങിയിട്ടുണ്ടെങ്കിൽ, ബ്ലോക്കിൻ്റെ ടെക്‌സ്‌റ്റിനും ദൃശ്യമായ ബോർഡറുകൾക്കും ഫിൽട്ടർ ഒരു നിഴൽ ചേർക്കും. മറ്റ് ഫിൽട്ടറുകളിൽ നിന്ന് വ്യത്യസ്തമായി, ഈ ഫിൽട്ടറിനായി പാരാമീറ്ററുകൾ സജ്ജീകരിക്കേണ്ടത് ആവശ്യമാണ് (കുറഞ്ഞത് ഓഫ്സെറ്റ് മൂല്യമാണ്). |
| ഗ്രേസ്കെയിൽ() | ഒരു ചിത്രത്തിൽ നിന്ന് എല്ലാ നിറങ്ങളും എക്‌സ്‌ട്രാക്‌റ്റ് ചെയ്യുന്നു, ഔട്ട്‌പുട്ടിനെ ബ്ലാക്ക് ആൻഡ് വൈറ്റ് ചിത്രമാക്കി മാറ്റുന്നു. മൂല്യം % അല്ലെങ്കിൽ ദശാംശ ഭിന്നസംഖ്യകളിൽ വ്യക്തമാക്കിയിരിക്കുന്നു. ഉയർന്ന മൂല്യം, ശക്തമായ പ്രഭാവം. |
| നിറം തിരിക്കുക() | കളർ വീലിലെ നിർദ്ദിഷ്ട റൊട്ടേഷൻ കോണിനെ ആശ്രയിച്ച് ചിത്രത്തിൻ്റെ നിറങ്ങൾ മാറ്റുന്നു. 0deg മുതൽ 360deg വരെയുള്ള ഡിഗ്രികളിലാണ് മൂല്യം വ്യക്തമാക്കിയിരിക്കുന്നത്. 0deg എന്നത് സ്ഥിരസ്ഥിതി മൂല്യമാണ്, അതായത് ഫലമില്ല. |
| വിപരീതം() | ഫിൽട്ടർ ചിത്രം നെഗറ്റീവ് ആക്കുന്നു. മൂല്യം % ൽ വ്യക്തമാക്കിയിരിക്കുന്നു. 0% ഒരു ഫിൽട്ടർ പ്രയോഗിക്കുന്നില്ല, 100% പൂർണ്ണമായും നിറങ്ങൾ പരിവർത്തനം ചെയ്യുന്നു. |
| അതാര്യത() | ഫിൽട്ടർ അതാര്യത പ്രോപ്പർട്ടിക്ക് സമാനമായി പ്രവർത്തിക്കുന്നു, ഒരു ഘടകത്തിന് സുതാര്യത നൽകുന്നു. ഫിൽട്ടറിനായി ബ്രൗസറുകൾ ഹാർഡ്‌വെയർ ആക്സിലറേഷൻ നൽകുന്നു, ഇത് പ്രകടനം മെച്ചപ്പെടുത്തുന്നു എന്നതാണ് ഒരു പ്രത്യേകത. രസകരമായ ഇഫക്റ്റുകൾ സൃഷ്ടിക്കുന്ന ഫിൽട്ടർ ഒരേ സമയം മറ്റ് ഫിൽട്ടറുകളുമായി സംയോജിപ്പിക്കാൻ കഴിയും എന്നതാണ് അധിക ബോണസ്. മൂല്യം % മാത്രമായി സജ്ജീകരിച്ചിരിക്കുന്നു, 0% മൂലകത്തെ പൂർണ്ണമായും സുതാര്യമാക്കുന്നു, 100% ഫലമുണ്ടാക്കില്ല. |
| പൂരിത () | വർണ്ണ സാച്ചുറേഷൻ നിയന്ത്രിക്കുന്നു, ഒരു കോൺട്രാസ്റ്റ് ഫിൽട്ടറിൻ്റെ തത്വത്തിൽ പ്രവർത്തിക്കുന്നു. 0% മൂല്യം നിറം നീക്കംചെയ്യുന്നു, അതേസമയം 100% ഫലമുണ്ടാക്കില്ല. 0% മുതൽ 100% വരെയുള്ള മൂല്യങ്ങൾ വർണ്ണ സാച്ചുറേഷൻ കുറയ്ക്കുന്നു, 100% ന് മുകളിലുള്ള മൂല്യങ്ങൾ വർണ്ണ സാച്ചുറേഷൻ വർദ്ധിപ്പിക്കുന്നു. മൂല്യം ഒന്നുകിൽ % അല്ലെങ്കിൽ ഒരു പൂർണ്ണസംഖ്യയായി വ്യക്തമാക്കാം, 1 എന്നത് 100% ന് തുല്യമാണ്. |
| സെപിയ() | പുരാതന കാലത്തെയും "റെട്രോ"യെയും അനുകരിക്കുന്ന ഒരു പ്രഭാവം. 0% മൂല്യം മൂലകത്തിൻ്റെ രൂപഭാവം മാറ്റില്ല, കൂടാതെ 100% സെപിയ പ്രഭാവം പൂർണ്ണമായും പുനർനിർമ്മിക്കുന്നു. |
| url() | ഒരു svg ഫിൽട്ടർ ഉള്ള ഒരു ബാഹ്യ XML ഫയലിൻ്റെ സ്ഥാനം അല്ലെങ്കിൽ നിലവിലെ പ്രമാണത്തിൽ സ്ഥിതിചെയ്യുന്ന ഒരു ഫിൽട്ടറിലേക്കുള്ള ഒരു ആങ്കർ ഫംഗ്ഷൻ സ്വീകരിക്കുന്നു. |
| ഒന്നുമില്ല | സ്ഥിര മൂല്യം. ഫലമില്ലെന്ന് സൂചിപ്പിക്കുന്നു. |
| പ്രാഥമിക | ഈ പ്രോപ്പർട്ടി അതിൻ്റെ ഡിഫോൾട്ട് മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുന്നു. |
| അനന്തരാവകാശം | മാതൃ ഘടകത്തിൽ നിന്ന് പ്രോപ്പർട്ടി മൂല്യം അവകാശമാക്കുന്നു. |
ഗ്രാഫിക് എഡിറ്റർമാരുടെ ചില പ്രധാന പ്രവർത്തനങ്ങളെ നേരിടാൻ കഴിയുന്ന തരത്തിൽ CSS പ്രോപ്പർട്ടികൾ വികസനത്തിൻ്റെ ഒരു തലത്തിലെത്തി. ഇതിൻ്റെ ഒരു ഉദാഹരണം CSS ഫിൽട്ടറുകൾ ആണ്, അതിലൂടെ നിങ്ങൾക്ക് ചിത്രങ്ങൾക്കായി മനോഹരമായ ഇഫക്റ്റുകൾ സൃഷ്ടിക്കാൻ കഴിയും.
നേരത്തെ സങ്കൽപ്പിക്കാൻ പോലും ബുദ്ധിമുട്ടായിരുന്നുവെങ്കിൽ, ഇപ്പോൾ മിക്കവാറും എല്ലാ സോഫ്റ്റ്വെയർ ഫിൽട്ടറുകളും മങ്ങൽ മുതൽ കലാപരമായ വർണ്ണ മോഡലുകൾ വരെ കാസ്കേഡ് പട്ടികയിൽ നടപ്പിലാക്കുന്നു.
എന്നാൽ CSS ഫിൽട്ടറുകൾക്ക് ഇപ്പോഴും ഒരു ചെറിയ പോരായ്മയുണ്ട് - എല്ലാ വെബ് ബ്രൗസറുകളും വിഷ്വൽ ഇഫക്റ്റുകൾ പിന്തുണയ്ക്കുന്നില്ല. തീർച്ചയായും, ഇത് സമയത്തിൻ്റെ കാര്യം മാത്രമാണ്. "x" എന്ന മണിക്കൂർ വരുമ്പോൾ, ഡവലപ്പർമാർ തയ്യാറാകേണ്ടതുണ്ട്. ഇപ്പോൾ, ഇതുവരെ നടപ്പിലാക്കിയ കാര്യങ്ങൾ നോക്കാം.
CSS ഫിൽട്ടറുകൾക്കുള്ള ബ്രൗസർ പിന്തുണ
അടിസ്ഥാനപരമായി, എല്ലാ ജനപ്രിയ ബ്രൗസറുകൾക്കും, ഫയർഫോക്സ്, ക്രോം, ഓപ്പറ, ഫിൽട്ടർ ഇഫക്റ്റുകളുമായി ഒരു "സൗഹൃദ" ബന്ധമുണ്ട്. ഏറ്റവും പുതിയ പതിപ്പുകളിൽ പോലും ഇഫക്റ്റുകളെ പിന്തുണയ്ക്കാൻ പൂർണ്ണമായും വിസമ്മതിക്കുന്ന IE-യെ കുറിച്ച് ഇതുതന്നെ പറയാനാവില്ല.
| ബ്രൗസർ | എക്സ്പ്ലോറർ | Chrome | ഫയർഫോക്സ് | സഫാരി | ഓപ്പറ | ആൻഡ്രോയിഡ് | ഐഒഎസ് |
|---|---|---|---|---|---|---|---|
| പതിപ്പ് | ഇല്ല | 31+ | 35+ | 7+ | 18+ | 4.4+ | 6+ |
| ഫിൽട്ടർ | — | (-വെബ്കിറ്റ്-) | + | (-വെബ്കിറ്റ്-) | (-വെബ്കിറ്റ്-) | (-വെബ്കിറ്റ്-) | (-വെബ്കിറ്റ്-) |
CSS ഫിൽട്ടറുകളുടെ പ്രവർത്തനങ്ങളും വാക്യഘടനയും
എല്ലാ CSS പ്രോപ്പർട്ടികൾക്കും മൂല്യങ്ങൾ എഴുതിയ ക്രമം സംയോജിപ്പിക്കുന്ന ചില പാരാമീറ്ററുകൾ ഉണ്ട്. ഫിൽട്ടർ പ്രോപ്പർട്ടി ഒരു അപവാദമല്ല, മറ്റുള്ളവയെപ്പോലെ, ഇതിന് ഒരു ആപ്ലിക്കേഷനിൽ നിരവധി നിയമങ്ങളുടെ സംയോജനം ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു ചിത്രത്തിനായി ഒരു തെളിച്ചം ഫിൽട്ടർ ചേർക്കുക, ഒരു സ്ഥലത്തിന് ശേഷം മറ്റൊന്ന് വ്യക്തമാക്കുക - കോൺട്രാസ്റ്റ്. ഈ ലേഖനത്തിലെ എല്ലാ കാര്യങ്ങളും നന്നായി മനസ്സിലാക്കുന്നതിന് കുറച്ച് ഉദാഹരണങ്ങൾ ഉപയോഗിച്ച് ഞങ്ങൾ ഉൾക്കൊള്ളുന്നു.
വാക്യഘടന
ഫിൽട്ടർ: ഫിൽട്ടർ പേര് (മൂല്യത്തിൻ്റെ ശതമാനം); ഫിൽട്ടർ: url(img.svg); ഫിൽട്ടർ: മങ്ങൽ (10px); ഫിൽട്ടർ: തെളിച്ചം (0.9); ഫിൽട്ടർ: കോൺട്രാസ്റ്റ് (150%); ഫിൽട്ടർ: ഡ്രോപ്പ്-ഷാഡോ (5px 5px 10px കറുപ്പ്); ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(80%); ഫിൽട്ടർ: ഹ്യൂ-റൊട്ടേറ്റ്(60ഡിഗ്രി); ഫിൽട്ടർ: വിപരീതം (80%); ഫിൽട്ടർ: അതാര്യത (50%); ഫിൽട്ടർ: പൂരിത (50%); ഫിൽട്ടർ: സെപിയ (40%); /* ഒന്നിലധികം ഫിൽട്ടറുകൾ പ്രയോഗിക്കുക */ ഫിൽട്ടർ: കോൺട്രാസ്റ്റ് (150%) ഗ്രേസ്കെയിൽ (80%);
ഫിൽട്ടറുകളുടെ പട്ടിക
| ഫിൽട്ടർ ചെയ്യുക | വിവരണം |
|---|---|
| മങ്ങിക്കുക (px) | ചിത്രം മങ്ങിക്കുന്നതിനുള്ള ഫിൽട്ടർ. മങ്ങലിൻ്റെ അളവ് പിക്സലുകളിൽ സൂചിപ്പിച്ചിരിക്കുന്നു. ഒരു നമ്പർ വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, സ്ഥിരസ്ഥിതി 0 ആണ്. |
| ഡ്രോപ്പ്-ഷാഡോ() | നിഴൽ. സമാന പാരാമീറ്ററുകളും എഴുത്തിൻ്റെ അതേ ക്രമവും ഉള്ള ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടിക്ക് ഒരു ബദൽ. അപവാദം നാലാമത്തെ മൂല്യം "സ്ട്രെച്ച്" ആണ്: മിക്കവാറും എല്ലാ ബ്രൗസറുകളും ഇതിനെ പിന്തുണയ്ക്കുന്നില്ല. |
| ഗ്രേ സ്കെയിൽ (%) | "ഡീ കളറൈസ്" ഫിൽട്ടർ. നിങ്ങൾ വ്യക്തമാക്കുന്ന ശതമാനത്തെ അടിസ്ഥാനമാക്കി ചിത്രത്തിലേക്ക് ചാരനിറത്തിലുള്ള ഷേഡുകൾ പ്രയോഗിക്കുന്നു. ഒരു നെഗറ്റീവ് മൂല്യം അനുവദനീയമല്ല, ചിത്രത്തിൻ്റെ മൗലികത 0 ആണ്. |
| തെളിച്ചം (%) | ചിത്രത്തിൻ്റെ തെളിച്ചം ക്രമീകരിക്കുക. 100% മൂല്യം തെളിച്ചത്തിൻ്റെ ആരംഭ പോയിൻ്റ് കാണിക്കുന്നു. ക്രമീകരണം നെഗറ്റീവ് (-50%), പോസിറ്റീവ് (150%) ആയിട്ടാണ് നിർമ്മിച്ചിരിക്കുന്നത്. |
| ദൃശ്യതീവ്രത (%) | ഇമേജ് കോൺട്രാസ്റ്റ് ക്രമീകരിക്കുക. മുമ്പത്തെ ഫിൽട്ടർ പോലെ, 100% മൂല്യം ഉത്ഭവം കാണിക്കും. മാറ്റങ്ങൾ നെഗറ്റീവ് (-20%) അല്ലെങ്കിൽ പോസിറ്റീവ് (120%) ആയി സജ്ജീകരിക്കാം. |
| നിറം തിരിക്കുക (ഡിഗ്രി) | റോട്ടറി കളർ ടോൺ ഓവർലേ. നിർദ്ദിഷ്ട ഡിഗ്രിയെ ആശ്രയിച്ച് (0ഡിഗ്രി മുതൽ 360ഡിഗ്രി വരെ), ചിത്രം വർണ്ണത്തിലേക്ക് ക്രമീകരിക്കും, അത് കളർ വീൽ നിർണ്ണയിക്കുന്നു. |
| വിപരീതം (%) | ഇമേജ് വിപരീതം. 0 മുതൽ 100% വരെയുള്ള ഒരു മൂല്യം നെഗറ്റീവ് പാരാമീറ്റർ ഇല്ലാതെ പ്രയോഗിക്കുന്നു. |
| പൂരിത (%) | ഇമേജ് സാച്ചുറേഷൻ. പ്രാരംഭ സ്ഥാനം 100% ആയി നിർണ്ണയിക്കപ്പെടുന്നു, കൂടാതെ നെഗറ്റീവ് മൂല്യമില്ല. |
| സെപിയ (%) | സെപിയ പ്രഭാവം. ചിത്രത്തിൻ്റെ ഒറിജിനാലിറ്റി 0%-ൽ നിർണ്ണയിക്കപ്പെടുന്നു, കൂടാതെ 100% വരെ നിഷേധാത്മകത കൂടാതെ ലഭ്യമാണ്. |
| അതാര്യത (%) | ചിത്രത്തിൻ്റെ സുതാര്യത. അതേ ഉപയോഗ രീതികളുള്ള സമാനമായ അതാര്യത സ്വഭാവമുള്ള മറ്റൊരു ഫിൽട്ടർ. നെഗറ്റീവ് പാരാമീറ്റർ ഇല്ലാതെ 0 മുതൽ 100% വരെ ക്രമീകരണം അനുവദനീയമാണ്. |
| url() | ഒരു നിർദ്ദിഷ്ട #id ഉള്ള ഒരു SVG ഘടകത്തിലേക്കുള്ള ഒരു CSS ലിങ്ക്. |
| പ്രാഥമിക | വസ്തുവിൻ്റെ ഡിഫോൾട്ട് മൂല്യം സജ്ജീകരിക്കുന്നു. |
| അനന്തരാവകാശം | അതിൻ്റെ മാതൃ ഘടകത്തിൻ്റെ എല്ലാ പ്രോപ്പർട്ടി മൂല്യങ്ങളും അവകാശമാക്കുന്നു. |
CSS ഫിൽട്ടറുകളുടെ ഉദാഹരണങ്ങൾ
ലേഖനത്തിൻ്റെ രസകരമായ ഒരു ഭാഗത്തേക്ക് ഞങ്ങൾ എത്തിയിരിക്കുന്നു, അതിൽ ഓരോ ഫിൽട്ടറും അതിൻ്റെ ആപ്ലിക്കേഷൻ്റെ ഉദാഹരണങ്ങൾ ഉപയോഗിച്ച് ഞങ്ങൾ പ്രത്യേകം പരിഗണിക്കും. വ്യക്തതയ്ക്കായി, മൂന്ന് ചിത്രങ്ങൾ ഉപയോഗിക്കും. ആദ്യത്തേത് ആരംഭ പോയിൻ്റ്, മൗലികതയുടെ രൂപം കാണിക്കും. രണ്ടാമത്തേത് ഒരു ഫിൽട്ടർ പ്രയോഗിക്കുന്നതിനുള്ള ഒരു സ്റ്റാറ്റിക് ഉദാഹരണമായി വർത്തിക്കും, മൂന്നാമത്തേത് ഹോവർ ഇഫക്റ്റ് കാണിക്കും, ചിത്രത്തിന് മുകളിൽ മൗസ് കഴ്സർ ഹോവർ ചെയ്യുന്നു.
മങ്ങിക്കൽ ഫിൽട്ടർ
ഗ്രാഫിക് എഡിറ്റർമാരിൽ, ബ്ലർ ഫിൽട്ടർ ഒഴിച്ചുകൂടാനാവാത്ത ഒരു ഉപകരണമാണ്, ഇത് പലപ്പോഴും ജോലിയിൽ ഉപയോഗിക്കുന്നു. ഇതിന് എളുപ്പത്തിൽ ഒരു ബ്ലറി ഇമേജ് സൃഷ്ടിക്കാൻ കഴിയും, പക്ഷേ ഒരു പ്രത്യേക ഘടകത്തിൽ ഫോക്കസ് ചെയ്യുന്നതിൻ്റെ പ്രഭാവം സൃഷ്ടിക്കാൻ കഴിയും, അതേസമയം ചിത്രത്തിൻ്റെ ബാക്കി ഭാഗം മങ്ങലിന് കീഴിലാകും. കൂടാതെ പലതും.
വെബ്‌സൈറ്റ് രൂപകൽപ്പനയിൽ (ഉദാഹരണത്തിന്, മങ്ങൽ) ചിത്രത്തിൽ സ്ഥിതിചെയ്യുന്ന വാചകത്തിൻ്റെ മികച്ച വായനാക്ഷമതയ്ക്കായി ഒരു ലൈനിംഗായി ഉപയോഗിക്കാം. യഥാർത്ഥത്തിൽ, മങ്ങൽ 0 px മൂല്യത്തിൽ നിന്ന് പൂർണ്ണമായും അപ്രത്യക്ഷമാകുന്നതുവരെ ഗൗസിയൻ ആണ്.
ഒറിജിനൽ
ഫിൽട്ടർ ചെയ്യുക
ഹോവർ പ്രഭാവം
/*സ്റ്റാറ്റിക് റൂൾ*/ .efbl1 img(ഫിൽട്ടർ: blur(2px); -webkit-filter: blur(2px); ) /*hover effect*/ .efbl2 img( സംക്രമണം: എല്ലാം 0.6s ഈസ് 0s; ) :ഹോവർ img(ഫിൽട്ടർ: ബ്ലർ(4പിഎക്സ്); -വെബ്കിറ്റ്-ഫിൽട്ടർ: ബ്ലർ(4പിഎക്സ്); സംക്രമണം: എല്ലാ 0.6സെക്കും ഈസ് 0സെ; )
ഫിൽട്ടർ ഷാഡോ
കാസ്കേഡിംഗ് ടേബിളിൻ്റെ മൂന്നാം പതിപ്പിനൊപ്പം ഷാഡോ പ്രോപ്പർട്ടി ഞങ്ങൾക്ക് വന്നു. തീർച്ചയായും, വെബ്‌സൈറ്റ് വികസനത്തിൽ ഏർപ്പെട്ടിരിക്കുന്ന എല്ലാവർക്കും ഇത് പരിചിതമാണ്, കാരണം ഡിസൈനിൽ ബോക്സ് ഷാഡോ ഒരു പ്രധാന പങ്ക് വഹിക്കുന്നു. ഡ്രോപ്പ്-ഷാഡോ ഫിൽട്ടറിനെ സമാനമായ പാരാമീറ്ററുകളുള്ള ഒരു ഇൻഫീരിയർ ബദൽ എന്ന് വിളിക്കാം, അവയിൽ 5 എണ്ണം മാത്രമേ ഉള്ളൂ, ആന്തരിക നിഴൽ കണക്കാക്കുന്നില്ല.
എഴുത്തിൻ്റെ ക്രമം ഇപ്രകാരമാണ്: 5px/-5px (തിരശ്ചീന ഓഫ്സെറ്റ്), 5px/-5px (ലംബമായ ഓഫ്സെറ്റ്), 15px (ഷാഡോ ബ്ലർ റേഡിയസ്), 5px/-5px (ഷാഡോ സ്ട്രെച്ച്), കറുപ്പ് (നിറം). സ്ട്രെച്ചിംഗ്, ഇൻസെറ്റ് മൂല്യങ്ങൾ ഒഴികെയുള്ള എല്ലാ വാക്യഘടനകളെയും ഫിൽട്ടർ പിന്തുണയ്ക്കുന്നു, കൂടാതെ കോമകളാൽ വേർതിരിച്ച ഒന്നിലധികം ഷാഡോകൾ ചേർക്കുന്നു. ഇതൊക്കെയാണെങ്കിലും, ചില ഗുണങ്ങളുണ്ട്, ഉദാഹരണത്തിന്, ഫിൽട്ടർ കപട ഘടകങ്ങൾ കണക്കിലെടുക്കുന്നു, ഇത് മൂലകത്തിൻ്റെ നിഴലിൻ്റെ കൃത്യമായ രൂപം പ്രദർശിപ്പിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
ബ്ലോക്കിന് ഒരു പശ്ചാത്തലം ഇല്ലെങ്കിലും ഒരു ബോർഡർ സ്ട്രോക്ക് മാത്രമേ വ്യക്തമാക്കിയിട്ടുള്ളൂ എന്നതും രസകരമാണ്, ബോക്സ്-ഷാഡോ ഉപയോഗിക്കുമ്പോൾ ഒരു നിഴൽ പ്രദർശിപ്പിക്കും, പശ്ചാത്തലം കണക്കിലെടുക്കുന്നു, അതായത് സോളിഡ് ഒന്ന്. ഡ്രോപ്പ് ഷാഡോ ഉപയോഗിക്കുമ്പോൾ, പശ്ചാത്തലം കണക്കിലെടുക്കാതെ നിഴൽ ഒരു സ്ട്രോക്കിൻ്റെ രൂപമെടുക്കുന്നു.
ഒറിജിനൽ
ഫിൽട്ടർ ചെയ്യുക
ഹോവർ പ്രഭാവം
/*സ്റ്റാറ്റിക് റൂൾ*/ .efdrswd1 img( ഫിൽട്ടർ: ഡ്രോപ്പ്-ഷാഡോ(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0 , 0.4)); 0.4) -വെബ്കിറ്റ്-ഫിൽറ്റർ: ഡ്രോപ്പ്-ഷാഡോ (0, 0, 0, 0.4)
നിറംമാറ്റ ഫിൽട്ടർ
ശരിയായ ദിശയിൽ എല്ലാ സമയത്തും ക്ലാസിക് ഫോട്ടോഗ്രാഫി ശൈലി. ഫിൽട്ടർ ഒരു മൂല്യം മാത്രമേ അനുവദിക്കൂ - പോസിറ്റീവ്. നിർദ്ദിഷ്ട ശതമാനത്തെ ആശ്രയിച്ച്, ചാരനിറത്തിലുള്ള ഷേഡുകൾ ചിത്രത്തിൻ്റെ നിറത്തെ സുഗമമായി മാറ്റിസ്ഥാപിക്കും. കൂടാതെ, ശതമാനത്തിന് പകരം, നിങ്ങൾക്ക് ഒരു പൂർണ്ണ സംഖ്യ (0.01/1) വരെയുള്ള ഭിന്നസംഖ്യകൾ ഉപയോഗിക്കാം.
ഒറിജിനൽ
ഫിൽട്ടർ ചെയ്യുക
ഹോവർ പ്രഭാവം
/*സ്റ്റാറ്റിക് റൂൾ*/ .efgrays1 img( ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(90%); -വെബ്കിറ്റ്-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(90%); .efgrays2:ഹോവർ img(ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(90%); -വെബ്കിറ്റ്-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(90%); സംക്രമണം: എല്ലാ 0.6സെക്കും ഈസ് 0സെ; )
തെളിച്ചം ഫിൽട്ടർ
ചിത്രത്തിൻ്റെ "പര്യവേക്ഷണം ചെയ്യപ്പെടാത്ത" കറുത്ത മൂലകളിലേക്ക് വെളിച്ചം ചേർക്കുന്നു. അമേച്വർ ഫോട്ടോഗ്രാഫുകൾ സാധാരണയായി മോശം വെളിച്ചമുള്ള സ്ഥലങ്ങളിൽ എടുക്കുന്നതിനാൽ ഇത് പലപ്പോഴും ഫോട്ടോ പ്രോസസ്സിംഗിൽ ഉപയോഗിക്കുന്നു. ഫിൽട്ടറിൻ്റെ തെളിച്ചം 0% (പൂർണ്ണമായും കറുത്ത ചിത്രം) മുതൽ ചിത്രം പൂർണ്ണമായും അപ്രത്യക്ഷമാകുന്നത് വരെ ക്രമീകരിക്കാവുന്നതാണ്. യഥാർത്ഥ പോയിൻ്റ് 100% ആയി നിർവചിച്ചിരിക്കുന്നു, കൂടാതെ മൂല്യം ഒരു ഭിന്നസംഖ്യയായും വ്യക്തമാക്കാം.
ഒറിജിനൽ
ഫിൽട്ടർ ചെയ്യുക
ഹോവർ പ്രഭാവം
/*സ്റ്റാറ്റിക് റൂൾ*/ .efbrig1 img( ഫിൽട്ടർ: തെളിച്ചം(150%); -webkit-filter: തെളിച്ചം(150%); ) /*ഹോവർ ഇഫക്റ്റിന്*/ .efbrig2 img( സംക്രമണം: എല്ലാ 0.6സെക്കും ഈസ് 0സെ; ) .efbrig2:ഹോവർ img(ഫിൽട്ടർ: തെളിച്ചം(150%); -വെബ്കിറ്റ്-ഫിൽട്ടർ: തെളിച്ചം(150%); സംക്രമണം: എല്ലാ 0.6സെക്കും ഈസ് 0സെ; )
കോൺട്രാസ്റ്റ് ഫിൽട്ടർ
ഒരു ചിത്രത്തെ കൂടുതൽ പ്രകടമാക്കുന്നതിനുള്ള ഒരു ലളിതമായ മാർഗ്ഗം, ചിത്രത്തിൻ്റെ ഏറ്റവും ഭാരം കുറഞ്ഞതും ഇരുണ്ടതുമായ ഭാഗങ്ങളുടെ തെളിച്ച ക്രമീകരണങ്ങൾ പരീക്ഷിക്കുക എന്നതാണ്. ഇതിനെ സഹായിക്കാൻ കോൺട്രാസ്റ്റ് ഫിൽട്ടർ തയ്യാറാണ്. അതിൻ്റെ പാരാമീറ്ററുകൾ, മറ്റു പലതും പോലെ, ഒരു നെഗറ്റീവ് മൂല്യം (-150%) ഒഴിവാക്കുന്നു, പ്രാരംഭ സ്ഥാനം 100% ൽ സൂചിപ്പിച്ചിരിക്കുന്നു. ശതമാനത്തിന് പുറമേ, ഭിന്നസംഖ്യകളും (1.5) അനുവദനീയമാണ്.
ഒറിജിനൽ
ഫിൽട്ടർ ചെയ്യുക
ഹോവർ പ്രഭാവം
/*സ്റ്റാറ്റിക് റൂൾ*/ .efcontr1 img(ഫിൽട്ടർ: കോൺട്രാസ്റ്റ്(150%); -webkit-filter: കോൺട്രാസ്റ്റ്(150%); .efcontr2:ഹോവർ img(ഫിൽട്ടർ: കോൺട്രാസ്റ്റ്(150%); -വെബ്കിറ്റ്-ഫിൽട്ടർ: കോൺട്രാസ്റ്റ്(150%); സംക്രമണം: എല്ലാ 0.6സെക്കും ഈസ് 0സെ; )
കളർ ടോൺ ഫിൽട്ടർ
പ്രധാന റിസോഴ്സ് ഡിസൈനിൻ്റെ ശൈലിയുമായി പൊരുത്തപ്പെടുന്ന ഇമേജ് ഡിസൈനിലെ മികച്ച ഡിസൈൻ ടെക്നിക്. തിരഞ്ഞെടുത്ത വർണ്ണത്തിൻ്റെ ഒരു ഷേഡ് യഥാർത്ഥ ചിത്രത്തിലേക്ക് ഓവർലേ ചെയ്യുക എന്നതാണ് ആശയം. നൽകിയിരിക്കുന്ന ഡിഗ്രിയെ ആശ്രയിച്ച് അനുപാതങ്ങൾ പുറത്തുവരുന്നു, ഇത് കളർ വീലിലെ വർണ്ണ പോയിൻ്റിനെ സൂചിപ്പിക്കുന്നു.
മൂല്യം പോസിറ്റീവ് ആണെങ്കിൽ (150ഡിഗ്രി), ഭ്രമണം ഘടികാരദിശയിൽ സംഭവിക്കുന്നു. അതനുസരിച്ച്, നെഗറ്റീവ് ആണെങ്കിൽ, എതിർ ഘടികാരദിശയിൽ. രണ്ട് സ്ഥാനങ്ങളിൽ ഇത് 0deg മുതൽ 360deg വരെയാണ്.
ഒറിജിനൽ
ഫിൽട്ടർ ചെയ്യുക
ഹോവർ പ്രഭാവം
/*സ്റ്റാറ്റിക് റൂൾ*/ .efhrotai1 img( ഫിൽട്ടർ: ഹ്യൂ-റൊട്ടേറ്റ്(180ഡിഗ്രി); -വെബ്കിറ്റ്-ഫിൽട്ടർ: ഹ്യൂ-റൊട്ടേറ്റ്(180ഡിഗ്രി); ) /*ഹോവർ ഇഫക്റ്റിന്*/ .efhrotai2 img( സംക്രമണം: എല്ലാം 0.6സെ ഈസ് 0സെ ; ) .efhrotai2: ഹോവർ img (ഫിൽറ്റർ: ഹ്യൂ-റൊട്ടേറ്റ്(180ഡിഗ്രി); -വെബ്കിറ്റ്-ഫിൽട്ടർ: ഹ്യൂ-റൊട്ടേറ്റ്(180ഡിഗ്രി); സംക്രമണം: എല്ലാ 0.6സെക്കും ഈസ് 0സെ; )
വിപരീത ഫിൽട്ടർ
ഒരു ചിത്രത്തിൻ്റെ നിറം തലകീഴായി മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു പ്രത്യേക പ്രഭാവം. ഗ്രാഫിക് എഡിറ്റർമാരിൽ ഇതിന് ഒരു പ്രത്യേക പങ്ക് ഉണ്ട്, അതിൻ്റെ പങ്കാളിത്തമില്ലാതെ ആഗ്രഹിച്ച ഫലം നേടാൻ കഴിയില്ല. വിപരീത ഫിൽട്ടർ പാരാമീറ്റർ 0% മുതൽ 100% വരെയുള്ള പോസിറ്റീവ് ദിശയിൽ മാത്രമേ വ്യക്തമാക്കിയിട്ടുള്ളൂ.
ഒറിജിനൽ
ഫിൽട്ടർ ചെയ്യുക
ഹോവർ പ്രഭാവം
/*സ്റ്റാറ്റിക് റൂൾ*/ .efinve1 img( ഫിൽട്ടർ: വിപരീതം(100%); -webkit-filter: invert(100%); ) /*hover effect*/ .efinve2 img( സംക്രമണം: എല്ലാ 0.6സെക്കും ഈസ് 0സെ; ) .efinve2:hover img(ഫിൽട്ടർ: ഇൻവെർട്ട്(100%); -webkit-filter: invert(100%); സംക്രമണം: എല്ലാ 0.6s-ഉം ഈസ് 0s; )
സാച്ചുറേഷൻ ഫിൽട്ടർ
അജ്ഞാതമായ കാരണങ്ങളാൽ ഒരു ചിത്രത്തിൻ്റെ സ്വാഭാവിക നിറം നഷ്ടപ്പെടുമ്പോൾ (വെയിലിൽ ബ്ലീച്ച് ചെയ്ത ടി-ഷർട്ട് പോലെയുള്ള ഒന്ന്), സാച്ചുറേഷൻ വർദ്ധിപ്പിക്കുന്നത് അതിൻ്റെ യഥാർത്ഥ രൂപം തൽക്ഷണം പുനഃസ്ഥാപിക്കാൻ കഴിയും. ഈ ഫിൽട്ടർ മറ്റ് ഫിൽട്ടറുകളുമായി സംയോജിപ്പിച്ച് ഉപയോഗിക്കുകയാണെങ്കിൽ, ഫലം വളരെ തൃപ്തികരമായിരിക്കും. 0 പ്രാരംഭ കാഴ്ചയിൽ നിന്ന് വലിയ സംഖ്യകളിലേക്കാണ് ക്രമീകരണം നിർമ്മിച്ചിരിക്കുന്നത്.
ഒറിജിനൽ
ഫിൽട്ടർ ചെയ്യുക
ഹോവർ പ്രഭാവം
/*സ്റ്റാറ്റിക് റൂൾ*/ .efsatut1 img( ഫിൽട്ടർ: സാച്ചുറേറ്റ്(165%); -webkit-filter: saturate(165%); ) /* ഹോവർ ഇഫക്റ്റിന്*/ .efsatut2 img( സംക്രമണം: എല്ലാ 0.6സെയും ഈസ് 0സെ; ) .efsatut2:hover img(ഫിൽട്ടർ: saturate(165%); -webkit-filter: saturate(165%); സംക്രമണം: എല്ലാ 0.6s 0s ഈസ്; )
സെപിയ ഫിൽട്ടർ
പഴയ ഫോട്ടോഗ്രാഫുകളുടെ പ്രഭാവത്തിൻ്റെ അനുകരണം (ചെറുതായി തവിട്ട് നിറം). ഇത് ഇമേജിൻ്റെ ഒരു റെട്രോ ശൈലി കൈവരിക്കുന്നു, അത് പ്രത്യേകിച്ചും ജനപ്രിയമാണ്. സെപിയ ഫിൽട്ടർ 0% (ഹോം പൊസിഷൻ) മുതൽ 100% വരെ ക്രമീകരിക്കാവുന്നതാണ്.
ഒറിജിനൽ
ഫിൽട്ടർ ചെയ്യുക
ഹോവർ പ്രഭാവം
/*സ്റ്റാറ്റിക് റൂൾ*/ .efsepiaa1 img( ഫിൽട്ടർ: സെപിയ(100%); -webkit-filter: sepia(100%); .efsepiaa2:ഹോവർ img(ഫിൽട്ടർ: സെപിയ(100%); -വെബ്കിറ്റ്-ഫിൽട്ടർ: സെപിയ(100%); സംക്രമണം: എല്ലാ 0.6സെകളും ഈസ് 0സെ; )
ഫിൽട്ടർ സുതാര്യത
കാസ്കേഡിംഗ് ടേബിൾ പതിപ്പ് 3-ൽ നിന്നുള്ള ഒപാസിറ്റി പ്രോപ്പർട്ടിക്ക് സമാനമായ ഒരു ഫിൽട്ടർ. വാക്യഘടന ഒന്നുതന്നെയാണ്, സുതാര്യത മൂല്യം 0% മുതൽ 100% വരെ ക്രമീകരിക്കാവുന്നതാണ് (യഥാർത്ഥ സ്ഥാനം).
ഒറിജിനൽ
ഫിൽട്ടർ ചെയ്യുക
ഹോവർ പ്രഭാവം
/*സ്റ്റാറ്റിക് റൂൾ*/ .efopaty1 img( ഫിൽട്ടർ: അതാര്യത(50%); -webkit-filter: opacity(50%); ) /*ഹോവർ ഇഫക്റ്റിന്*/ .efopaty2 img( സംക്രമണം: എല്ലാ 0.6സെയും ഈസ് 0സെ; ) .efopaty2:ഹോവർ img(ഫിൽട്ടർ: അതാര്യത(50%); -വെബ്കിറ്റ്-ഫിൽട്ടർ: അതാര്യത(50%); സംക്രമണം: എല്ലാ 0.6സെകളും ഈസ് 0സെ; )
ലിങ്ക് ഫിൽട്ടർ ചെയ്യുക
ഒരു നിർദ്ദിഷ്ട ഐഡൻ്റിഫയർ ഉള്ള SVG ഘടകങ്ങളെ അടിസ്ഥാനമാക്കി ഒരു ഇഷ്‌ടാനുസൃത ഫിൽട്ടർ സൃഷ്‌ടിക്കുന്നു, അത് പിന്നീട് ഒരു ലിങ്ക് ഫിൽട്ടർ വഴി CSS-ൽ ഉപയോഗിക്കാനാകും. സാധാരണ ഫിൽട്ടറുകളിൽ നിന്ന്, ഓവർലേ മാസ്കുകൾ മുതൽ നിസ്സാരമായ സുതാര്യത വരെ ഇഫക്റ്റുകൾ വളരെ വ്യത്യസ്തമായിരിക്കും.
CSS ഫിൽട്ടറുകൾ ജനറേറ്റർ
വിവിധ CSS പ്രോപ്പർട്ടികളുടെ ജനറേറ്ററുകൾ സൃഷ്ടിക്കുന്നത് വളരെക്കാലമായി പതിവാണ്. , കൂടാതെ വളരെ കൂടുതൽ. ജോലി എളുപ്പമാക്കുന്നതിനുള്ള ഒരു ഉപകരണമായി അവ പ്രവർത്തിക്കുന്നു. തുടക്കക്കാരായ വെബ്‌മാസ്റ്റർമാർക്ക് അവർക്ക് ഇരട്ട ആനുകൂല്യങ്ങൾ ലഭിക്കും. അവ ഉപയോഗിക്കാൻ വളരെ എളുപ്പമാണ്: സ്ലൈഡറുകൾ നീക്കുക, നിങ്ങൾക്ക് ഫലം ഉടനടി കാണാൻ കഴിയും. പൂർത്തിയാകുമ്പോൾ, ജനറേറ്റ് ചെയ്ത കോഡ് പകർത്തുക മാത്രമാണ് അവശേഷിക്കുന്നത്. സിഎസ്എസ് ഫിൽട്ടർ ജനറേറ്ററുകൾക്കും ഇത് ബാധകമാണ്. നിങ്ങളുടെ റഫറൻസിനായി അവയിൽ രണ്ടെണ്ണം ഇതാ:
ഉപസംഹാരം
അവലോകനം വളരെ വലുതായി മാറി, പക്ഷേ ഇത് പ്രായോഗികമായി ആർക്കെങ്കിലും ഉപയോഗപ്രദമാകുമെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു. കൂടാതെ, ഫിൽട്ടറുകൾ സംയോജിപ്പിക്കാൻ മറക്കരുത്, ഒന്ന് നല്ലതാണ്, എന്നാൽ രണ്ട് ചില സന്ദർഭങ്ങളിൽ മികച്ചതായിരിക്കും.
ഹലോ. ഇന്ന് നിങ്ങൾ വെബ്സൈറ്റുകളിൽ മനോഹരമായ ഇഫക്റ്റുകൾ ഉള്ള ആരെയും അത്ഭുതപ്പെടുത്തില്ല. ചിലർ കഴിഞ്ഞ 10 വർഷമായി ഇത് ഫ്ലാഷിൽ ചെയ്യുന്നു, മറ്റുള്ളവർ ജാവാസ്ക്രിപ്റ്റിൽ ഇത് ചെയ്യുന്നത് ഇതുവരെ നിർത്തിയിട്ടില്ല, എന്നാൽ ഏറ്റവും വിപുലമായവർ വളരെക്കാലമായി CSS3 ഉപയോഗിക്കുന്നു. ഇതാണ് ഇന്ന് നമ്മൾ ചെയ്യുക.
ഒരു CSS ഇമേജ് (ഗ്രേസ്കെയിൽ ഇമേജ് css) നിറം മാറ്റുന്നത് എങ്ങനെയെന്ന് നമുക്ക് പഠിക്കാം, അത് മനോഹരമായി ചെയ്യുക
അതിനാൽ, ലളിതമായ എന്തെങ്കിലും ഉപയോഗിച്ച് നമുക്ക് ആരംഭിക്കാം, ഞങ്ങൾക്ക് മനോഹരമായ ഫോട്ടോകൾ ആവശ്യമാണ്, നമുക്ക് ഇത് എടുക്കാം:
നമുക്ക് അത് ഡിസാച്ചുറേറ്റ് ചെയ്യണം (സിഎസ്എസ് ഇമേജ് ഡിസാച്ചുറേറ്റ് ചെയ്യുക - നിറങ്ങൾ നീക്കം ചെയ്യുക, ചിത്രം കറുപ്പും വെളുപ്പും ആക്കുക). ഇതിനായി (പൊതുവായി ഗ്രാഫിക്സുമായി പ്രവർത്തിക്കുന്നതിന്) CSS3 ന് ഒരു പ്രത്യേക ഫിൽട്ടർ ടൂൾ ഉണ്ട്.
ഇത് ഞങ്ങൾ ഉപയോഗിക്കും.
പരിഹാരം: ചിത്രം CSS നിറം മാറ്റുക
ആദ്യം, നമുക്ക് ചിത്രം തന്നെ ഇടാം:
തുടർന്ന് ഞങ്ങൾ ചിത്രത്തിനായി ഒരു ശൈലി സജ്ജീകരിക്കും:
Img (-webkit-filter: ഗ്രേസ്കെയിൽ(100%); -moz-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); -ms-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); -o-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); 100%); ചാരനിറം; /* IE 6-9 */ )
ഇപ്പോൾ നമ്മുടെ ചിത്രം കറുപ്പും വെളുപ്പും ആയി മാറും.
നിങ്ങൾക്ക് തീർച്ചയായും അവിടെ നിർത്താം, പക്ഷേ ചിത്രം ഉപയോക്താവിൻ്റെ പ്രവർത്തനങ്ങളോട് പ്രതികരിക്കുമ്പോൾ ഇത് കൂടുതൽ രസകരമാണ്.
നിങ്ങൾ ചിത്രത്തിന് മുകളിലൂടെ സഞ്ചരിക്കുമ്പോൾ, അത് ക്രമേണ നിറമാകുന്നതിന് ഇത് നിർമ്മിക്കാൻ ഞാൻ നിർദ്ദേശിക്കുന്നു.
വാസ്തവത്തിൽ, ഇത് ചെയ്യാൻ ബുദ്ധിമുട്ടുള്ള കാര്യമല്ല, നിങ്ങൾക്ക് ജാവാസ്ക്രിപ്റ്റ് അറിയേണ്ട ആവശ്യമില്ല.
ആനിമേറ്റ് ഡിസ്കലോർ ഇമേജ് CSS
നമ്മുടെ മുൻ ശൈലിയിലേക്ക് കുറച്ച് ചേർക്കാം:
Img (-webkit-filter: ഗ്രേസ്കെയിൽ(100%); -moz-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); -ms-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); -o-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); 100%); ഫിൽട്ടർ: ചാരനിറം; : ഒന്നുമില്ല; ഫിൽട്ടർ ഒന്നുമില്ല;
നിങ്ങൾ മൗസ് ഉപയോഗിച്ച് ചിത്രത്തിന് മുകളിൽ ഹോവർ ചെയ്യുമ്പോൾ ചിത്രം നിറമാകാൻ ഇത് അനുവദിക്കും. നിറവ്യത്യാസ പ്രക്രിയ ആനിമേറ്റുചെയ്യാൻ നമുക്ക് CSS3 സംക്രമണവും ഉപയോഗിക്കാം:
Img (-webkit-filter: ഗ്രേസ്കെയിൽ(100%); -moz-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); -ms-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); -o-ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); ഫിൽട്ടർ: ഗ്രേസ്കെയിൽ(100%); 100%); ചാരനിറം; */ ) img:hover (-webkit-filter: ഒന്നുമില്ല; -moz-ഫിൽട്ടർ: ഒന്നുമില്ല; -ms-ഫിൽട്ടർ: ഒന്നുമില്ല; -o-ഫിൽട്ടർ: ഒന്നുമില്ല; ഫിൽട്ടർ: ഒന്നുമില്ല; ഫിൽട്ടർ: ഒന്നുമില്ല; /* IE 6-9 * /)
എല്ലാ ശൈലികൾക്കും റൂൾ പ്രവർത്തിക്കുമെന്ന് പരിവർത്തനത്തിലെ എല്ലാ പാരാമീറ്റർ പറയുന്നു, രണ്ടാമത്തെ പാരാമീറ്റർ ആനിമേഷൻ സമയമാണ്.
ആദ്യ പാരാമീറ്ററിൽ, നിങ്ങൾക്ക് ഒരു നിശ്ചിത പ്രോപ്പർട്ടി വ്യക്തമാക്കാൻ കഴിയും (ഉദാഹരണത്തിന്, ഉയരം, ഉയരം മാത്രം ആനിമേറ്റ് ചെയ്യാൻ), രണ്ടാമത്തേതിൽ, നിമിഷങ്ങൾക്കുള്ളിൽ സമയം (ദശാംശ ഭിന്നസംഖ്യകളിൽ ആകാം - 0.1 സെ).
