ഇമേജുകൾ ഉപയോഗിച്ച് CSS ഉപയോഗിക്കൽ

നിങ്ങളുടെ ഇമേജുകൾ സ്റ്റൈൽ ചെയ്ത് സ്റ്റൈൽസ് ഇമേജുകൾ ഉപയോഗിക്കുക

ടെക്സ്റ്റ് ക്രമീകരിക്കാനും, ഫോണ്ട് മാറ്റാനും, നിറം, വലുപ്പം എന്നിവയും മാറ്റാനും നിരവധി ആളുകൾ CSS ഉപയോഗിക്കുന്നു. എന്നാൽ പലരും പലപ്പോഴും മറന്നുപോയ ഒരു കാര്യം, ചിത്രങ്ങളോടൊപ്പം CSS ഉപയോഗിക്കാം എന്നതാണ്.

ഇമേജ് മാറ്റുന്നു

ഇമേജിൽ ഇമേജ് എങ്ങനെ ദൃശ്യമാകുന്നു എന്നത് ക്രമീകരിക്കാൻ CSS നിങ്ങളെ അനുവദിക്കുന്നു. നിങ്ങളുടെ പേജുകൾ സ്ഥിരമായി നിലനിർത്തുന്നതിന് ഇത് വളരെ ഉപയോഗപ്രദമാണ്. എല്ലാ ചിത്രങ്ങളിലും ശൈലികൾ സജ്ജമാക്കുന്നതിലൂടെ, നിങ്ങളുടെ ഇമേജുകൾക്കായുള്ള ഒരു അടിസ്ഥാന രൂപം നിങ്ങൾ സൃഷ്ടിക്കുന്നു. നിങ്ങൾക്ക് ചെയ്യാവുന്ന ചില കാര്യങ്ങൾ:

• ഇമേജുകൾക്ക് ചുറ്റുമുള്ള ഒരു ബോർഡർ അല്ലെങ്കിൽ ഔട്ട്ലൈൻ
• ലിങ്കുചെയ്ത ചിത്രങ്ങളുടെ ചുറ്റും നിറമുള്ള അതിർത്തി നീക്കം ചെയ്യുക
• ഇമേജുകളുടെ വീതിയും / അല്ലെങ്കിൽ വീതിയും ക്രമീകരിക്കുക
• ഒരു ഡ്രോപ്പ് ഷാഡോ ചേർക്കുക
• ചിത്രം തിരിക്കുക
• ഇമേജ് പൂന്തോട്ടത്തിൽ മാറ്റിയപ്പോൾ ശൈലികൾ മാറ്റുക

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

img {
അതിർത്തി: 1px കട്ടിയുള്ള കറുപ്പ്;
പാഡിംഗ്: 5px;
}

സാധ്യമാകുമ്പോൾ, ഡിസൈൻ അല്ലാത്ത ചിത്രങ്ങളെ എല്ലായ്പ്പോഴും ലിങ്കുചെയ്യുന്നത് നല്ലതാണ്. എന്നാൽ നിങ്ങൾ ചെയ്യുമ്പോൾ, മിക്ക ബ്രൗസറുകളും ചിത്രത്തിന് ചുറ്റും ഒരു നിറമുള്ള അതിർത്തി ചേർക്കുന്നുവെന്ന കാര്യം ഓർക്കുക. ബോർഡർ മാറ്റാൻ നിങ്ങൾ മുകളിലുള്ള കോഡ് ഉപയോഗിക്കുകയാണെങ്കിൽ, ആ ലിങ്കിൽ അതിർത്തിയോ നീക്കം ചെയ്യുകയോ മാറ്റം വരുത്തുകയോ ചെയ്യാതെ ആ ലിങ്ക് അസാധുവാക്കും. ഇതുചെയ്യാൻ നിങ്ങൾ ഒരു സി.എസ്.എസ് ചൈൽഡ് റൂൾ ഉപയോഗിക്കണം.

img> a {
അതിർത്തി: ഒന്നുമില്ല;
}

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

ഓർമ്മിക്കുക, നിങ്ങൾ ചിത്രങ്ങൾ വലുപ്പംമാറ്റുകയാണെങ്കിൽ, മികച്ച ഫലങ്ങൾ ലഭിക്കുന്നതിന്, ഒരു വലുപ്പത്തെ - ഉയരം അല്ലെങ്കിൽ വീതി മാത്രം വ്യത്യാസപ്പെടുത്തണം. ചിത്രം അതിന്റെ അനുപാതം നിലനിർത്തുന്നുവെന്നതിനാൽ ഇത് വിചിത്രമായി തോന്നുന്നില്ല. മറ്റൊരു മൂല്യത്തെ സ്വപ്രേരിതമാക്കുക അല്ലെങ്കിൽ അനുപാതം സ്ഥിരമായി നിലനിർത്തുന്നതിന് ബ്രൗസറിനെ അറിയിക്കുന്നതിന് ഇത് പുറത്തുകടക്കുക.

img {
വീതി: 50%;
ഉയരം: auto;
}

പുതിയ സവിശേഷതകളായ വസ്തു-ഫിറ്റ്, ഒബ്ജക്റ്റ്-പോയിന്റ് എന്നിവയുമായി ഈ പ്രശ്നത്തിന് പരിഹാരം നിർദ്ദേശിക്കുന്നു. ഈ പ്രോപ്പർട്ടികളുമായി നിങ്ങൾക്ക് കൃത്യമായ ഇമേജ് ഉയരവും വീതിയും എങ്ങനെ വീക്ഷണ അനുപാതം കൈകാര്യം ചെയ്യണം എന്ന് നിർവ്വചിക്കാം. ആവശ്യമുള്ളത്ര വലുപ്പത്തിൽ ചിത്രം ലഭിക്കുന്നതിന് ഇത് നിങ്ങളുടെ ചിത്രങ്ങളുടെ ചുറ്റുമുള്ള ലേബർബോക്സിംഗ് ഇഫക്ടുകൾ അല്ലെങ്കിൽ ക്രോപ്പിംഗുകൾ സൃഷ്ടിക്കും.

CSS3 വസ്തു-ഫിറ്റ്, വസ്തു-സ്ഥാന സവിശേഷതകൾ എന്നിങ്ങനെയുള്ളവയെ ഇതുവരെ പിന്തുണയ്ക്കില്ലെങ്കിലും, നിങ്ങളുടെ ആധുനിക ബ്രൌസറുകളിൽ നന്നായി ഉപയോഗിക്കാവുന്ന മറ്റ് CSS3 സവിശേഷതകൾ നിങ്ങളുടെ ചിത്രങ്ങളിൽ മാറ്റം വരുത്താൻ ഉപയോഗിക്കാൻ കഴിയും. മിക്ക ആധുനിക ബ്രൌസറുകളിലും ഇപ്പോൾ നിങ്ങളുടെ എല്ലാ ചിത്രങ്ങളും റൊട്ടേറ്റ്, വക്രമാക്കൽ, അല്ലെങ്കിൽ നീക്കുന്നതിന് ഫോട്ടോകൾ, ഡ്രോപ്പ് ഷാഡോകൾ, വൃത്താകാരമായ കോണുകൾ, പരിവർത്തനങ്ങൾ എന്നിവ പോലുള്ള കാര്യങ്ങൾ. തുടർന്ന് നിങ്ങൾക്ക് ഒരു പരിധി വരെ, അല്ലെങ്കിൽ ക്ലിക്കുചെയ്താൽ, അല്ലെങ്കിൽ ക്ലിക്കുചെയ്താൽ ചിത്രങ്ങൾ മാറാൻ CSS സംക്രമണങ്ങൾ ഉപയോഗിക്കാം.

പശ്ചാത്തലങ്ങളായ ഇമേജുകൾ ഉപയോഗിക്കുന്നു

നിങ്ങളുടെ ഇമേജുകൾ ഉപയോഗിച്ച് ഫാൻസി പശ്ചാത്തലങ്ങൾ സൃഷ്ടിക്കാൻ CSS എളുപ്പമാക്കുന്നു.

മുഴുവൻ പേജിലേക്കോ അല്ലെങ്കിൽ ഒരു നിർദ്ദിഷ്ട ഘടകത്തിലേക്കോ നിങ്ങൾക്ക് പശ്ചാത്തലങ്ങൾ ചേർക്കാൻ കഴിയും. പശ്ചാത്തല-ഇമേജ് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് പേജിൽ ഒരു പശ്ചാത്തല ചിത്രം സൃഷ്ടിക്കുന്നത് എളുപ്പമാണ്:

ശരീരം {
പശ്ചാത്തല-ഇമേജ്: url (background.jpg);
}

ഒരൊറ്റ ഘടകത്തിൽ പശ്ചാത്തലം വെക്കാൻ ഒരു പ്രത്യേക ഘടകത്തിലേക്ക് ബോഡ് സെലക്ടർ മാറ്റുക.

ചിത്രങ്ങളുമായി നിങ്ങൾക്ക് ചെയ്യാൻ കഴിയുന്ന മറ്റൊരു രസകരമായ ചിത്രം, ബാക്കി പേജിൽ സ്ക്രോൾ ചെയ്യാത്ത ഒരു പശ്ചാത്തല ഇമേജ് സൃഷ്ടിക്കുകയാണ് - വാട്ടർമാർക്ക് പോലെ. സ്റ്റൈൽ പശ്ചാത്തല അറ്റാച്ച്മെന്റ് നിങ്ങൾ ഉപയോഗിക്കുന്നു: ഫിക്സ്ഡ്; നിങ്ങളുടെ പശ്ചാത്തല ചിത്രത്തോടൊപ്പം. പശ്ചാത്തല-ആവർത്തന സ്വഭാവം ഉപയോഗിച്ച് തിരശ്ചീനമായോ ലംബമായിട്ടോ ടൈൽ ചെയ്തുകൊണ്ട് നിങ്ങളുടെ പശ്ചാത്തലങ്ങൾക്കായുള്ള മറ്റ് ഓപ്ഷനുകൾ ഉൾപ്പെടുന്നു.

പശ്ചാത്തലം-ആവർത്തിക്കുക: repeat-x; ചിത്രം തിരശ്ചീനമായും പശ്ചാത്തല-ആവർത്തിക്കുന്നതിനും: repeat-y; ലംബമായി ടൈൽ ചെയ്യുക. പശ്ചാത്തല-സ്ഥാന ആസ്തി ഉപയോഗിച്ച് നിങ്ങൾക്ക് പശ്ചാത്തല ചിത്രം സ്ഥാപിക്കാൻ കഴിയും.

കൂടാതെ CSS3 നിങ്ങളുടെ പശ്ചാത്തലങ്ങൾക്കും കൂടുതൽ ശൈലികൾ ചേർക്കുന്നു. വലുപ്പത്തിലുള്ള ഏതെങ്കിലും പശ്ചാത്തലത്തിന് അനുയോജ്യമായ ഇമേജുകൾ നിങ്ങൾക്ക് വിപുലീകരിക്കാം അല്ലെങ്കിൽ വിൻഡോ വലുപ്പത്തോടുകൂടിയ സ്കേലിലേക്ക് പശ്ചാത്തല ഇമേജ് സജ്ജമാക്കുക . നിങ്ങൾക്ക് സ്ഥാനം മാറ്റുകയും പശ്ചാത്തല ചിത്രം ക്ലിപ്പുചെയ്യുകയും ചെയ്യാം. പക്ഷെ, CSS3- ന്റെ ഏറ്റവും നല്ല കാര്യങ്ങളിൽ ഒന്ന്, ഇപ്പോൾ നിങ്ങൾക്ക് കൂടുതൽ സങ്കീർണ്ണമായ ഇമേജുകൾ സൃഷ്ടിക്കാൻ ഒന്നിലധികം പശ്ചാത്തല ഇമേജുകൾ പാളി ചെയ്യാം.

HTML5 ശൈലി ചിത്രങ്ങൾ സഹായിക്കുന്നു

HTML5- ലെ FIGURE എലമെൻറ് പ്രമാണത്തിനകത്ത് നിൽക്കാൻ കഴിയുന്ന ഏതെങ്കിലും ചിത്രങ്ങൾ ചുറ്റിക്കറങ്ങണം. ചിത്രം ഒരു അനുബന്ധത്തിൽ പ്രത്യക്ഷപ്പെടുമെങ്കിൽ, അത് FIGURE എലമെന്റിനുള്ളിൽ ആയിരിക്കണം. നിങ്ങളുടെ ഇമേജുകളിൽ സ്റ്റൈലുകൾ ചേർക്കാൻ ആ ഘടകം കൂടാതെ FIGCAPTION ഘടകം ഉപയോഗിക്കാം.