പുതിയ വഴി: ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ CSS3-ൽ

മൂൺ സൈറ്റിൽ ഉപയോഗിച്ചിരിക്കുന്ന ബഹിരാകാശ പശ്ചാത്തലം സൃഷ്ടിക്കാൻ ഞാൻ നാല് അർദ്ധസുതാര്യമായ PNG ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നു. ഉപയോക്താവ് ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുന്നതിനനുസരിച്ച് അവയെല്ലാം ബോഡി എലമെൻ്റിൻ്റെ മുകളിൽ, ഒന്നിനുപുറകെ ഒന്നായി ലേയർ ചെയ്‌തിരിക്കുന്നു.

ചിത്രത്തിൽ. 5.03 ഉപയോഗിച്ച എല്ലാ ചിത്രങ്ങളും കാണിക്കുന്നു:

1) പൊടിപടലങ്ങൾ (clouds.png);

2) നീല-പിങ്ക് ഗ്രേഡിയൻ്റ് (സ്പേസ്-bg.png);

3) നക്ഷത്ര പാളി (നക്ഷത്രങ്ങൾ-1.png);

4) ക്രമരഹിതമായി ചിതറിക്കിടക്കുന്ന നക്ഷത്രങ്ങളുടെ മറ്റൊരു പാളി(നക്ഷത്രങ്ങൾ-2.png).

അരി. 5.03. ചന്ദ്രനൊപ്പം വെബ്‌സൈറ്റിൻ്റെ പശ്ചാത്തലത്തിൽ സ്ഥിതി ചെയ്യുന്ന നാല് അർദ്ധസുതാര്യ പശ്ചാത്തല PNG ചിത്രങ്ങൾ

ഒന്നിലധികം പശ്ചാത്തല വാക്യഘടന

പുതിയ CSS3 വാക്യഘടന ഉപയോഗിച്ച് ബോഡി എലമെൻ്റിൻ്റെ പശ്ചാത്തലമായി ഈ നാല് ചിത്രങ്ങൾ ഇടുന്നത് വളരെ എളുപ്പമാണ്:

ശരീരം (പശ്ചാത്തലം:

ഡി. സൈഡർഹോം. "വെബ് ഡിസൈനർമാർക്കുള്ള CSS3"

കോമയാൽ വേർതിരിച്ച ലിസ്റ്റിൽ നാല് ചിത്രങ്ങളും ലേയേർഡ് ആണ്-ചുവടെ മേഘങ്ങൾ, മുകളിൽ നക്ഷത്രങ്ങൾ-ഉപയോക്താവിന് "അടുത്തുള്ള" ഇമേജിൽ നിന്നാണ് ലിസ്റ്റിംഗ് ആരംഭിക്കുന്നത് എന്ന് ശ്രദ്ധിക്കുക). ഓരോ ചിത്രവും തിരശ്ചീനമായി ഡ്യൂപ്ലിക്കേറ്റ് ചെയ്യുകയും വ്യത്യസ്ത തിരശ്ചീന സ്ഥാനങ്ങളിലേക്ക് (പോസിറ്റീവ്, നെഗറ്റീവ് മൂല്യങ്ങൾ ഉപയോഗിച്ച്) സജ്ജമാക്കുകയും ചെയ്യുന്നു, അങ്ങനെ ബ്രൗസർ വിൻഡോയുടെ വലുപ്പം മാറ്റുമ്പോൾ ഓരോ ലെയറും അതിൻ്റേതായ വേഗതയിൽ നീങ്ങുന്നു. അവസാനമായി, നിശ്ചിത മൂല്യം ഉപയോഗിച്ച് പേജിലെ അവരുടെ സ്ഥാനം നിശ്ചയിച്ചിരിക്കുന്നു.

ഏതാണ്ട് കറുത്ത നിറം #1a1a1a ഒരു പ്രത്യേക പശ്ചാത്തല-വർണ്ണ നിയമമായി അവസാനം ചേർത്തിരിക്കുന്നു.

അത്രയേയുള്ളൂ (ചിത്രം 5.04). അനാവശ്യമായ അടയാളപ്പെടുത്തലുകളില്ലാതെ ഞങ്ങൾക്ക് ചെയ്യാൻ കഴിഞ്ഞത് വളരെ മികച്ചതാണ്. ഈ ചിത്രങ്ങളെല്ലാം ബോഡി എലമെൻ്റിൽ തുറന്നുകാട്ടപ്പെടുന്നു, അതിനാൽ അവ പേജ് ഉള്ളടക്കത്തിന് പിന്നിൽ ഇരിക്കും, എന്നാൽ അധിക സഹായ പാളികളിൽ അവയെ പൊതിയേണ്ട ആവശ്യമില്ല.

അരി. 5.04. നാല് പിഎൻജി ചിത്രങ്ങൾ ഇരുട്ടിൽ പോലെ പരസ്‌പരം മുകളിലായി അടുക്കിയിരിക്കുന്നു ചാരനിറംപശ്ചാത്തലം

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

ആദ്യ അധ്യായത്തിൽ സൂചിപ്പിച്ചതുപോലെ, Safari 1.3+, Chrome 2+, Firefox 3.6+, Opera 10.5+, IE9 Beta എന്നിവയിൽ ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ പിന്തുണയ്ക്കുന്നു. അതിനാൽ ഈ പുസ്തകത്തിൽ ഞങ്ങൾ ഉപയോഗിച്ചിട്ടുള്ള മറ്റ് പല CSS പ്രോപ്പർട്ടികൾക്കൊപ്പം അവ തുല്യമാണ്.

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

എല്ലാ ബ്രൗസറുകൾക്കുമായി ഫാൾബാക്ക്

ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ ഇതുവരെ പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾ പശ്ചാത്തല പ്രോപ്പർട്ടി പൂർണ്ണമായും അവഗണിക്കും. അതുകൊണ്ടാണ് ഞങ്ങൾ പശ്ചാത്തല കളർ പ്രോപ്പർട്ടി പ്രത്യേകം നിർവചിച്ചത്.

ഡി. സൈഡർഹോം. "വെബ് ഡിസൈനർമാർക്കുള്ള CSS3"

ചിത്രത്തിൽ. IE7-ൽ സൈറ്റ് എങ്ങനെ കാണപ്പെടുന്നുവെന്ന് 5.05 കാണിക്കുന്നു: ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ അവഗണിക്കപ്പെടുകയും വ്യക്തമാക്കിയ ഇരുണ്ട ചാരനിറത്തിലുള്ള പശ്ചാത്തലം മാത്രം പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു പശ്ചാത്തല സ്വത്ത്- നിറം.

അരി. 5.05. ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ നിർവചിക്കുന്ന ഒരു പ്രോപ്പർട്ടിയെ IE7 അവഗണിക്കുകയും പശ്ചാത്തല-വർണ്ണ പ്രോപ്പർട്ടി വ്യക്തമാക്കിയ ഇരുണ്ട ചാര പശ്ചാത്തലം മാത്രം കാണിക്കുകയും ചെയ്യുന്നു

തീർച്ചയായും, എല്ലാം പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നു, എന്നാൽ വോള്യൂമെട്രിക് പശ്ചാത്തലം നഷ്ടപ്പെട്ടുവെന്നത് നല്ലതല്ല. ഒന്നിലധികം പശ്ചാത്തലങ്ങളെ പിന്തുണയ്‌ക്കാത്ത ബ്രൗസറുകൾക്ക് (IE7, 8 എന്നിവ പോലുള്ളവ) - ആദ്യം ഒരൊറ്റ ഫാൾബാക്ക് പശ്ചാത്തലം സജ്ജമാക്കുക എന്നതാണ് പരിഹാരം. നിങ്ങൾക്ക് ഈ പ്രോപ്പർട്ടി വീണ്ടും പ്രഖ്യാപിക്കാം - ഇത്തവണ ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ (IE ഇത് അവഗണിക്കും).

പശ്ചാത്തലം: url(../img/space-bg.png) ആവർത്തിക്കുക-x ഫിക്സഡ് -80% 0;പശ്ചാത്തലം:

url(../img/stars-1.png) repeat-x fixed -130% 0, url(../img/stars-2.png) repeat-x ഫിക്സഡ് 40% 0, url(../img/ space-bg.png) ആവർത്തിക്കുക-x ഫിക്സഡ് -80% 0, url(../img/clouds.png) ആവർത്തിക്കുക-x ഫിക്സഡ് 100% 0; പശ്ചാത്തല നിറം: #1a1a1a;

ഒരൊറ്റ ഇമേജ് ഫാൾബാക്കിനായി, ഒന്നിലധികം പരസ്യങ്ങളിൽ ഉപയോഗിച്ചിരിക്കുന്ന ചിത്രങ്ങളിൽ ഒന്ന് നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം, അല്ലെങ്കിൽ നിങ്ങൾക്ക് മുന്നോട്ട് പോയി നാല് ചിത്രങ്ങളും സംയോജിപ്പിച്ച് ഒരൊറ്റ ചിത്രം സൃഷ്ടിക്കാം.

മൂൺ സൈറ്റിനായി, സ്പേസ്-bg.png - ഒരു വർണ്ണ ഗ്രേഡിയൻ്റ് (ചിത്രം 5.06) ഉപയോഗിക്കാൻ ഞാൻ തീരുമാനിച്ചു, അങ്ങനെ ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകളിൽ നക്ഷത്രങ്ങളും മേഘങ്ങളും ഇല്ലാതെ ഒരു പശ്ചാത്തല ഓപ്ഷൻ കാണിക്കുന്നു. വളരെ ഉചിതം.

ഡി. സൈഡർഹോം. "വെബ് ഡിസൈനർമാർക്കുള്ള CSS3"

അരി. 5.06. IE7-ലെ പശ്ചാത്തലത്തിലുള്ള ഫാൾബാക്ക് ഇമേജിന് നന്ദി, സ്ഥലബോധം ഭാഗികമായി പുനഃസ്ഥാപിക്കപ്പെട്ടു

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

ഉദാഹരണം 1. മൂന്ന് പശ്ചാത്തലങ്ങൾ

മുകളിലെ ഉദാഹരണത്തിലെന്നപോലെ, പശ്ചാത്തല വലുപ്പം പോലെ, പശ്ചാത്തലത്തിനായി ചില ശൈലി പ്രോപ്പർട്ടി വെവ്വേറെ സജ്ജമാക്കണമെങ്കിൽ, ഓരോ പശ്ചാത്തലത്തിനുമുള്ള പാരാമീറ്ററുകൾ കോമകളാൽ വേർതിരിച്ചിരിക്കുന്നു. ഈ ഉദാഹരണത്തിൻ്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 1.

അരി. 1. മൂന്ന് ചിത്രങ്ങളുള്ള പശ്ചാത്തലം

ഉദാഹരണം 2 ൽ കാണിച്ചിരിക്കുന്നതുപോലെ വ്യക്തിഗത പശ്ചാത്തല ചിത്രങ്ങൾ അവയുടെ സ്ഥാനം മാറ്റാനും അവയെ ആനിമേറ്റ് ചെയ്യാനും നിങ്ങളെ അനുവദിക്കുന്നു.

ഉദാഹരണം 2. ആനിമേറ്റഡ് പശ്ചാത്തലം

ഒരു ഫ്രെയിം ഉപയോഗിച്ച് ഒരു ബ്ലോക്ക് സൃഷ്ടിക്കാൻ ഒരു ചിത്രം എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ഇപ്പോൾ നോക്കാം (ചിത്രം 2). ബ്ലോക്കിൻ്റെ വീതി നിശ്ചയിച്ചിരിക്കുന്നു, ബ്ലോക്കിൻ്റെ ഉള്ളടക്കത്തിൻ്റെ അളവ് അനുസരിച്ച് ഉയരം വ്യത്യാസപ്പെടുന്നു.

അരി. 2. കൈകൊണ്ട് വരച്ച ഫ്രെയിം

മുറിക്കേണ്ട മുകളിലും താഴെയുമുള്ള ഭാഗങ്ങൾ ചിത്രം വ്യക്തമായി കാണിക്കുന്നു ഗ്രാഫിക് എഡിറ്റർഅത് തിരശ്ചീനമായി സ്ഥാപിക്കുക. മധ്യഭാഗം തിരഞ്ഞെടുത്തിരിക്കുന്നതിനാൽ അത് സെമുകളില്ലാതെ ലംബമായി ആവർത്തിക്കുന്നു. ചിത്രത്തിന് വ്യക്തമായ ആവർത്തന പാറ്റേൺ ഉണ്ട്, അതിനാൽ അത് ഹൈലൈറ്റ് ചെയ്യുന്നതിൽ ബുദ്ധിമുട്ട് ഉണ്ടാകരുത്. ഫലം തയ്യാറാക്കിയ ചിത്രം (ചിത്രം 3) ആയിരിക്കും. ചെക്കർഡ് ഫീൽഡ് സുതാര്യതയെ സൂചിപ്പിക്കുന്നു; ചിത്രങ്ങളോടൊപ്പം ഒരു നിറമുള്ള പശ്ചാത്തലം സജ്ജീകരിക്കാനും ശൈലികളിലൂടെ എളുപ്പത്തിൽ മാറ്റാനും ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

അരി. 3. പശ്ചാത്തലത്തിനായി തയ്യാറാക്കിയ ചിത്രം

പശ്ചാത്തല പ്രോപ്പർട്ടി തന്നെ പശ്ചാത്തലം പ്രദർശിപ്പിക്കുന്നു, അത് കോർഡിനേറ്റുകളും വ്യക്തമാക്കുന്നു ആവശ്യമുള്ള ശകലം. ഓരോ പശ്ചാത്തലത്തിൻ്റെയും പാരാമീറ്ററുകൾ കോമകളാൽ വേർതിരിച്ചിരിക്കുന്നു ഈ സാഹചര്യത്തിൽഅവരുടെ ഓർഡർ പ്രധാനമാണ്. ബ്ലോക്കിൻ്റെ മുകളിലും താഴെയും ഓവർലാപ്പ് ചെയ്യരുതെന്ന് ഞങ്ങൾ ആഗ്രഹിക്കുന്നു, അതിനാൽ ഞങ്ങൾ അവയെ ഒന്നാമതായി വെക്കുന്നു (ഉദാഹരണം 3). പശ്ചാത്തല നിറം അവസാനമായി വ്യക്തമാക്കിയിരിക്കുന്നു.

ഉദാഹരണം 3. നിരവധി പശ്ചാത്തല ചിത്രങ്ങൾ

ആദ്യ പശ്ചാത്തലം ബ്ലോക്കിൻ്റെ മുകളിലെ ബോർഡർ പ്രദർശിപ്പിക്കുന്നു, രണ്ടാമത്തെ പശ്ചാത്തലം - താഴെ, മൂന്നാമത്തേത് - ലംബ ബോർഡറുകൾ. അവസാനത്തേത് ബ്ലോക്കിൻ്റെ സുതാര്യമായ മധ്യഭാഗത്ത് ദൃശ്യമാകുന്ന നിറമാണ് (ചിത്രം 4).

• ട്യൂട്ടോറിയൽ

ഷാഡോകൾ (ബോക്സ്-ഷാഡോ) ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നത് നോക്കി, CSS3 ബാക്ക്ഗ്രൗണ്ട്സ് ആൻഡ് ബോർഡേഴ്സ് മൊഡ്യൂളിൻ്റെ കഴിവുകൾ ഞങ്ങൾ ഇതിനകം സ്പർശിച്ചിട്ടുണ്ട്. ഇന്ന് നമ്മൾ മറ്റൊന്നിനെക്കുറിച്ച് കുറച്ച് സംസാരിക്കും രസകരമായ അവസരം- പശ്ചാത്തലത്തിൽ ഒന്നിലധികം ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നു.

പശ്ചാത്തല രചന

നിങ്ങൾ പശ്ചാത്തലത്തിൽ ഒന്നിലധികം ചിത്രങ്ങൾ രചിക്കാൻ ആഗ്രഹിക്കുന്നതിന് നിരവധി കാരണങ്ങളുണ്ട്, അവയിൽ ഏറ്റവും പ്രധാനപ്പെട്ടത്:

• ഇമേജ് വലുപ്പത്തിൽ ട്രാഫിക് ലാഭിക്കുകയാണെങ്കിൽ വ്യക്തിഗത ചിത്രങ്ങൾമൊത്തത്തിൽ പരന്ന പാളികളുള്ള ഒരു ചിത്രത്തേക്കാൾ ഭാരം കുറവാണ്, കൂടാതെ
• വ്യക്തിഗത പാളികളുടെ സ്വതന്ത്ര സ്വഭാവത്തിൻ്റെ ആവശ്യകത, ഉദാഹരണത്തിന്, പാരലാക്സ് ഇഫക്റ്റുകൾ നടപ്പിലാക്കുമ്പോൾ.

മറ്റ് ന്യായമായ കാരണങ്ങളുണ്ടാകാം :)

ക്ലാസിക് സമീപനം

അതിനാൽ നമ്മൾ ഒന്നിന് മുകളിൽ ഒന്നായി നിരവധി പശ്ചാത്തല ചിത്രങ്ങൾ സ്ഥാപിക്കേണ്ടതുണ്ട്. ഈ പ്രശ്നം സാധാരണയായി എങ്ങനെ പരിഹരിക്കപ്പെടും? ഇത് വളരെ ലളിതമാണ്: ഓരോ പശ്ചാത്തല ചിത്രത്തിനും, ഒരു ബ്ലോക്ക് സൃഷ്ടിക്കപ്പെടുന്നു, അതിന് അനുബന്ധ പശ്ചാത്തല ചിത്രം നൽകിയിരിക്കുന്നു. ബ്ലോക്കുകൾ ഒന്നുകിൽ പരസ്പരം കൂടുകൂട്ടിയിരിക്കുന്നു അല്ലെങ്കിൽ ഉചിതമായ സ്ഥാനനിർണ്ണയ നിയമങ്ങളോടെ ഒരു നിരയിൽ സ്ഥാപിക്കുന്നു. ഒരു ലളിതമായ ഉദാഹരണം ഇതാ:

"മത്സ്യകന്യക" എന്നതിനുള്ളിൽ "മത്സ്യബന്ധനം" എന്ന ക്ലാസ് ഉള്ള ഒരു ബ്ലോക്ക് പ്രദർശന ആവശ്യങ്ങൾക്ക് മാത്രമുള്ളതാണ്.

ഇപ്പോൾ ചില ശൈലികൾ:
.സാമ്പിൾ1 .കടൽ, .സാമ്പിൾ1 .മെർമെയ്ഡ്, .സാമ്പിൾ1 .മത്സ്യബന്ധനം (ഉയരം:300px; വീതി:480px; സ്ഥാനം: ബന്ധു; ) .സാമ്പിൾ1 .കടൽ (പശ്ചാത്തലം: url(media/sea.png) repeat-x മുകളിൽ ഇടത്; ) .sample1 .mermaid (പശ്ചാത്തലം: url(media/mermaid.svg) ആവർത്തിക്കുക-x താഴെ ഇടത്; ) .sample1 .fish (പശ്ചാത്തലം: url(media/fish.svg) നോ-ആവർത്തനം; ഉയരം:70px; വീതി:100px; ഇടത് : 30px; മുകളിൽ: 90px; സ്ഥാനം: സമ്പൂർണ്ണ ) .സാമ്പിൾ1 .മത്സ്യബന്ധനം (പശ്ചാത്തലം: url(media/fishing.svg) ഇല്ല-മുകളിൽ വലത് 10px; )

ഫലം:

IN ഈ ഉദാഹരണത്തിൽമൂന്ന് നെസ്റ്റഡ് പശ്ചാത്തലങ്ങളും "പശ്ചാത്തല" ബ്ലോക്കുകൾക്ക് അടുത്തായി മത്സ്യമുള്ള ഒരു ബ്ലോക്കും. സിദ്ധാന്തത്തിൽ, മത്സ്യം നീക്കാൻ കഴിയും, ഉദാഹരണത്തിന്, കൂടെ JavaScript ഉപയോഗിക്കുന്നുഅല്ലെങ്കിൽ CSS3 സംക്രമണങ്ങൾ/ആനിമേഷനുകൾ.

വഴിയിൽ, ".fishing" എന്നതിനായുള്ള ഈ ഉദാഹരണം CSS3-ലും നിർവചിച്ചിരിക്കുന്ന പശ്ചാത്തല സ്ഥാനനിർണ്ണയത്തിനായി പുതിയ വാക്യഘടന ഉപയോഗിക്കുന്നു:
പശ്ചാത്തലം: url(media/fishing.svg) ആവർത്തിക്കരുത് മുകളിൽ വലത് 10px;
ഓൺ നിലവിലെ നിമിഷംഇത് IE9+, Opera 11+ എന്നിവയിൽ പിന്തുണയ്‌ക്കുന്നു, പക്ഷേ Firefox 10, Chrome 16 എന്നിവയിൽ പിന്തുണയ്‌ക്കുന്നില്ല. അതിനാൽ അവസാന രണ്ട് ബ്രൗസറുകളിലെ ഉപയോക്താക്കൾക്ക് ഇതുവരെ മത്സ്യത്തെ പിടിക്കാൻ കഴിയില്ല.

ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ

രക്ഷാപ്രവർത്തനത്തിന് വരുന്നു പുതിയ ഓപ്ഷൻ, CSS3-ലേക്ക് ചേർത്തത്, ഒരു ഘടകത്തിന് ഒന്നിലധികം പശ്ചാത്തല ചിത്രങ്ങൾ നിർവചിക്കാനുള്ള കഴിവാണ്. ഇത് ഇതുപോലെ കാണപ്പെടുന്നു:

ഒപ്പം അനുബന്ധ ശൈലികളും:
.സാമ്പിൾ2 .കടൽ (ഉയരം:300px; വീതി:480px; സ്ഥാനം: ബന്ധു; പശ്ചാത്തല-ചിത്രം: url("media/mermaid.svg"), url("media/mermaid.svg"), url("media/sea. png"); പശ്ചാത്തല-സ്ഥാനം: മുകളിൽ വലത് 10px, താഴെ ഇടത്, മുകളിൽ ഇടത്; പശ്ചാത്തലം-ആവർത്തനം: ആവർത്തിക്കരുത്, ആവർത്തിക്കുക-x, ആവർത്തിക്കുക-x ; ) .സാമ്പിൾ2 .ഫിഷ് (പശ്ചാത്തലം: url("media/fish.svg ") ആവർത്തിക്കരുത്; ഉയരം:70px; വീതി:100px; ഇടത്: 30px; മുകളിൽ: 90px; സ്ഥാനം: കേവലം; )
ഒന്നിലധികം ഇമേജുകൾ നിർവചിക്കുന്നതിന്, നിങ്ങൾ കോമകളാൽ വേർതിരിച്ച വ്യക്തിഗത ഇമേജുകൾ ലിസ്റ്റുചെയ്യുന്ന പശ്ചാത്തല-ചിത്ര നിയമം ഉപയോഗിക്കണം. അധിക നിയമങ്ങൾ, ഒരു ലിസ്റ്റായി, നിങ്ങൾക്ക് ഓരോ ചിത്രത്തിനും പൊസിഷനിംഗ്, ആവർത്തനങ്ങൾ, മറ്റ് പാരാമീറ്ററുകൾ എന്നിവ സജ്ജമാക്കാൻ കഴിയും. ചിത്രങ്ങൾ ലിസ്‌റ്റ് ചെയ്‌തിരിക്കുന്ന ക്രമം ശ്രദ്ധിക്കുക: ലെയറുകൾ ഇടത്തുനിന്ന് വലത്തോട്ട് മുകളിൽ നിന്ന് താഴെയായി പട്ടികപ്പെടുത്തിയിരിക്കുന്നു.

ഫലം കൃത്യമായി സമാനമാണ്:

ഒരു നിയമം

തുടർന്നുള്ള കൃത്രിമത്വങ്ങൾക്കായി മത്സ്യത്തെ ഒരു പ്രത്യേക ബ്ലോക്കായി വേർതിരിക്കേണ്ടതില്ലെങ്കിൽ, മുഴുവൻ ചിത്രവും ഒന്ന് ഉപയോഗിച്ച് മാറ്റിയെഴുതാം. ലളിതമായ നിയമം:

ശൈലികൾ:
.സാമ്പിൾ3 .കടൽ (ഉയരം:300px; വീതി:480px; സ്ഥാനം: ബന്ധു; പശ്ചാത്തല-ചിത്രം: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); പശ്ചാത്തല-സ്ഥാനം: മുകളിൽ വലത് 10px, താഴെ ഇടത്, 30px 90px, മുകളിൽ ഇടത്; പശ്ചാത്തലം-ആവർത്തനം: ആവർത്തിക്കരുത്, ആവർത്തിക്കുക-x ; )

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

ഈ സാഹചര്യത്തിൽ, ഇത് ഈ വിവരണത്തിന് തുല്യമാണ്:
പശ്ചാത്തലം-ആവർത്തനം: ആവർത്തനമില്ല, ആവർത്തിക്കുക-x, ആവർത്തനമില്ല, ആവർത്തിക്കുക-x;

അതിലും ചെറുത്

നിങ്ങൾ CSS 2.1 ഓർക്കുന്നുവെങ്കിൽ, പശ്ചാത്തല ചിത്രങ്ങൾ ഒരു ചെറിയ രൂപത്തിൽ വിവരിക്കുന്നതിനുള്ള കഴിവ് അത് നിർവ്വചിക്കുന്നു. ഒന്നിലധികം ചിത്രങ്ങൾ എങ്ങനെ? ഇതും സാധ്യമാണ്:

സാമ്പിൾ4 .കടൽ (ഉയരം:300px; വീതി:480px; സ്ഥാനം: ബന്ധു; പശ്ചാത്തലം: url("media/fishing.svg") മുകളിൽ വലത് 10px നോ-ആവർത്തനം, url("media/mermaid.svg") താഴെ ഇടതുവശത്ത് ആവർത്തിക്കുക-x , url("media/fish.svg") 30px 90px നോ-ആവർത്തനം, url("media/sea.png") repeat-x )

എന്നാൽ ഇപ്പോൾ നിങ്ങൾക്ക് മൂല്യങ്ങൾ ഒഴിവാക്കാനാകില്ല (അവ സ്ഥിര മൂല്യവുമായി പൊരുത്തപ്പെടുന്നില്ലെങ്കിൽ). വഴിയിൽ, നിങ്ങൾക്ക് പശ്ചാത്തല ചിത്രത്തിൻ്റെ നിറം സജ്ജീകരിക്കണമെങ്കിൽ, ഇത് അവസാന പാളിയിൽ ചെയ്യണം.

ചലനാത്മക ചിത്രങ്ങൾ

കണ്ടെയ്‌നറിൻ്റെ വലുപ്പത്തെ ആശ്രയിച്ച് ഘടന സ്ഥിരമോ ചലനാത്മകമോ ആണെങ്കിൽ, ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ പേജ് രൂപകൽപ്പനയെ ലളിതമാക്കുന്നു. ജാവാസ്ക്രിപ്റ്റിൽ നിന്ന് സ്വതന്ത്രമായി കോമ്പോസിഷൻ്റെ വ്യക്തിഗത ഘടകങ്ങളുമായി നിങ്ങൾക്ക് പ്രവർത്തിക്കണമെങ്കിൽ (നീക്കുക, സ്ക്രോൾ ചെയ്യുക മുതലായവ) എന്തുചെയ്യും?

വഴിയിൽ, ജീവിതത്തിൽ നിന്നുള്ള ഒരു ഉദാഹരണം ഇതാ - Yandex-ൽ ഒരു ഡാൻഡെലിയോൺ ഉള്ള ഒരു തീം:


നിങ്ങൾ കോഡിലേക്ക് നോക്കുകയാണെങ്കിൽ, ഇതുപോലുള്ള ഒന്ന് നിങ്ങൾ കാണും:

...

"b-fluff-bg", "b-fluff__cloud", "b-fluff__item" എന്നീ ക്ലാസുകളുള്ള ബ്ലോക്കുകളിൽ പരസ്പരം ഓവർലാപ്പ് ചെയ്യുന്ന പശ്ചാത്തല ചിത്രങ്ങൾ അടങ്ങിയിരിക്കുന്നു. മാത്രമല്ല, മേഘങ്ങളുള്ള പശ്ചാത്തലം നിരന്തരം സ്ക്രോൾ ചെയ്യുന്നു, ഡാൻഡെലിയോൺസ് സ്ക്രീനിന് കുറുകെ പറക്കുന്നു.

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

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

ഞങ്ങളുടെ മത്സ്യ പശ്ചാത്തലത്തിലേക്ക് ആനിമേഷൻ ചേർക്കുന്നതിന്, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന കോഡ് ഉപയോഗിക്കാം:
$(രേഖ).റെഡി(ഫംഗ്ഷൻ() (var sea = $(".സാമ്പിൾ5 .കടൽ"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; ഫംഗ്‌ഷൻ ആനിമേഷൻ ലൂപ്പ്() ( fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) mermaidX = 0;
fishY = -10 + (10 * Math.cos(t * 0.091));
fishX = 10 + (5 * Math.sin (t * 0.07));

sea.style.backgroundPosition = "top" + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, മുകളിൽ ഇടത്";

window.requestAnimFrame(animationLoop);

) animationLoop(); ));

എവിടെ window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (window.webkitRequestAnimationFrame / (1callTback0) ഔട്ട് (1callTback0) ));കൂടാതെ, CSS3 സംക്രമണങ്ങൾ/ആനിമേഷനുകൾ ഉപയോഗിച്ച് ആനിമേഷനുകളും ചെയ്യാവുന്നതാണ്, എന്നാൽ ഇത് ഒരു പ്രത്യേക ചർച്ചയ്ക്കുള്ള വിഷയമാണ്.

Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px, " + mermaidX + "px താഴെ," + fishesX + "px " + fishesY + "px, മുകളിൽ ഇടത്";

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

അനുയോജ്യതയുടെ കാര്യമോ?

എല്ലാം ആധുനിക പതിപ്പുകൾ ജനപ്രിയ ബ്രൗസറുകൾ, IE9+ ഉൾപ്പെടെ, ഒന്നിലധികം ചിത്രങ്ങൾ പിന്തുണയ്ക്കുന്നു (ഉദാഹരണത്തിന്, caniuse ഉപയോഗിച്ച് നിങ്ങൾക്ക് പരിശോധിക്കാം).

ഒന്നിലധികം പശ്ചാത്തലങ്ങളെ പിന്തുണയ്‌ക്കാത്ത ബ്രൗസറുകൾ നൽകാൻ നിങ്ങൾക്ക് Modernizr ഉപയോഗിക്കാനും കഴിയും ഇതര പരിഹാരങ്ങൾ. ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ ഉപയോഗിക്കുമ്പോൾ ലെയർ ഓർഡറിനെക്കുറിച്ച് ക്രിസ് കോയർ തൻ്റെ പോസ്റ്റിൽ എഴുതിയതുപോലെ, ഇതുപോലൊന്ന് ചെയ്യുക:

Multiplebgs ബോഡി ( /* യാഥാർത്ഥ്യത്തെ മറികടക്കുന്ന അതിശയകരമായ ഒന്നിലധികം BG പ്രഖ്യാപനങ്ങളും കുഞ്ഞുങ്ങളെ ഇംസോഴ്‌സസ് ചെയ്യുന്നു */ ) .no-multiplebgs ബോഡി ( /* laaaaaame ഫാൾബാക്ക് */ )
നൽകുന്നതിന് JS ഉപയോഗിക്കുന്നതിനെക്കുറിച്ച് നിങ്ങൾക്ക് ആശയക്കുഴപ്പമുണ്ടെങ്കിൽ പിന്നോക്ക അനുയോജ്യത, നിങ്ങൾക്ക് രണ്ട് തവണ പശ്ചാത്തലം പ്രഖ്യാപിക്കാൻ കഴിയും, എന്നിരുന്നാലും, ഇതിന് സാധ്യമായ രൂപത്തിൽ അതിൻ്റെ ദോഷങ്ങളുമുണ്ട് ഡ്യുവൽ ബൂട്ട്വിഭവങ്ങൾ (ഇത് നടപ്പിലാക്കുന്നതിനെ ആശ്രയിച്ചിരിക്കുന്നു css പ്രോസസ്സിംഗ്ഒരു പ്രത്യേക ബ്രൗസറിൽ):

/* ഒന്നിലധികം ബിജി ഫാൾബാക്ക് */ പശ്ചാത്തലം: #000 url(...) ...; /* യാഥാർത്ഥ്യത്തെ മറികടക്കുന്ന ആകർഷകമായ ഒന്നിലധികം ബിജി ഡിക്ലറേഷനുകൾ, കുഞ്ഞുങ്ങളെ */ പശ്ചാത്തല url(...), url(...), url(...), #000 url(...);

നിങ്ങൾ ഇതിനകം വിൻഡോസ് 8 നെ കുറിച്ച് ചിന്തിച്ചു തുടങ്ങിയിട്ടുണ്ടെങ്കിൽ, മെട്രോ സ്റ്റൈൽ ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുമ്പോൾ നിങ്ങൾക്ക് ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ ഉപയോഗിക്കാമെന്നത് ഓർക്കുക, കാരണം ഇത് IE10-ൻ്റെ അതേ എഞ്ചിൻ തന്നെയാണ് ഉപയോഗിക്കുന്നത്.

പി.എസ്. വിഷയത്തിൽ: സിക്കാഡ തത്വത്തെക്കുറിച്ചുള്ള അസാധാരണമായ ലേഖനം ഓർക്കാതിരിക്കാൻ എനിക്ക് കഴിയില്ല.

ടാഗുകൾ: ടാഗുകൾ ചേർക്കുക

CSS 2.1 കപട ഘടകങ്ങൾ ഉപയോഗിക്കുന്നത് പശ്ചാത്തലത്തിനായി 3 ലെവലുകൾ, നിശ്ചിത അളവുകളുള്ള 2 ചിത്രങ്ങൾ, ഒന്നിന് ഒന്നിലധികം സങ്കീർണ്ണമായ സ്ട്രോക്കുകൾ എന്നിവ നിങ്ങളെ അനുവദിക്കുന്നു. HTML ഘടകം. ഈ രീതിപൊസിഷനിംഗിനൊപ്പം CSS 2.1 വ്യാജ ഘടകങ്ങളെ പിന്തുണയ്ക്കുന്ന എല്ലാ ബ്രൗസറുകൾക്കുമായി വെബ് പേജുകളുടെ ഡിസൈൻ കഴിവുകൾ ഗണ്യമായി വികസിപ്പിക്കുന്നു. CSS3 പിന്തുണ ആവശ്യമില്ല.

അടിസ്ഥാനപരമായി, ഒരു ടാർഗെറ്റ് എലമെൻ്റിനുള്ളിലെ നെസ്റ്റഡ് HTML ഘടകങ്ങളുമായി നിങ്ങൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിന് സമാനമാണ് CSS കപട ഘടകങ്ങൾ (: മുമ്പും: ശേഷവും) സൃഷ്‌ടിക്കുകയും പ്രവർത്തിക്കുകയും ചെയ്യുന്നത്. എന്നാൽ ഒരു പ്രധാന നേട്ടത്തോടെ - നെസ്റ്റഡ് HTML ഘടകങ്ങൾ ഉപയോഗിക്കാതെ എല്ലാം സെമാൻ്റിക്‌സിന് പുറത്താണ് ചെയ്യുന്നത്.

ഒന്നിലധികം പശ്ചാത്തലങ്ങളും കൂടാതെ/അല്ലെങ്കിൽ സ്‌ട്രോക്കുകളും സൃഷ്‌ടിക്കുന്നതിന്, കപട ഘടകങ്ങൾ ഉള്ളടക്കത്തിന് പിന്നിലേക്ക് നീക്കി അറ്റാച്ചുചെയ്യുന്നു ശരിയായ പോയിൻ്റ്കേവല സ്ഥാനനിർണ്ണയം ഉപയോഗിക്കുന്ന HTML ഘടകം.

കപട ഘടകത്തിൽ യഥാർത്ഥ ഉള്ളടക്കം അടങ്ങിയിട്ടില്ല, അത് പൂർണ്ണമായും സ്ഥാനം പിടിച്ചിരിക്കുന്നു. ഈ രീതിയിൽ, ഉള്ളടക്കത്തെ ബാധിക്കാതെ "മാതൃ" ഘടകത്തിൻ്റെ ഏത് മേഖലയിലും ഇത് നീട്ടാൻ കഴിയും. ഇത് ചെയ്യുന്നതിന്, നിങ്ങൾക്ക് മുകളിൽ, വലത്, താഴെ, ഇടത്, വീതി, ഉയരം എന്നിവയുടെ സംയോജനം ഉപയോഗിക്കാം.

നിങ്ങൾക്ക് എന്ത് ഫലങ്ങൾ ലഭിക്കും?

ഒരു ഘടകം മാത്രം ഉപയോഗിച്ച് നിങ്ങൾക്ക് പാരലാക്സ്, ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ (നിറങ്ങളും ചിത്രങ്ങളും), ക്രോപ്പ് ചെയ്‌ത പശ്ചാത്തല ചിത്രങ്ങൾ, ഇമേജ് മാറ്റിസ്ഥാപിക്കൽ, ചിത്രങ്ങൾ ഉപയോഗിച്ച് വികസിപ്പിക്കാവുന്ന ഘടകങ്ങൾ, വഴക്കമുള്ള കൃത്രിമ നിരകൾ, മൂലകത്തിൻ്റെ അതിരുകൾക്കപ്പുറത്തേക്ക് നീളുന്ന ചിത്രങ്ങൾ, ഒന്നിലധികം സ്‌ട്രോക്കുകൾ എന്നിവയും മറ്റും ലഭിക്കും. ഇമേജ് ടാഗുകളും കൂടാതെ/അല്ലെങ്കിൽ അധിക HTML മാർക്ക്അപ്പും സാധാരണയായി ഉപയോഗിക്കുന്ന ജനപ്രിയ ഇഫക്റ്റുകൾ.

ഡെമോ പേജുകളിൽ ഈ സാങ്കേതികത ഉപയോഗിച്ച് നിരവധി ജനപ്രിയ വെബ് പേജ് ഡിസൈൻ ഇഫക്റ്റുകൾ നടപ്പിലാക്കുന്നത് നിങ്ങൾക്ക് കാണാൻ കഴിയും.

കൂടാതെ, കൂടുതൽ സങ്കീർണ്ണമായ ഇഫക്റ്റുകൾ നേടാൻ: ഹോവർ എന്നതിനായി നിങ്ങൾക്ക് സ്റ്റൈലിംഗ് മാറ്റങ്ങൾ ഉപയോഗിക്കാം.

മാതൃകാ കോഡ്: ഒന്നിലധികം പശ്ചാത്തല ചിത്രങ്ങൾ

ഈ സാങ്കേതികത ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഒരു HTML ഘടകം മാത്രം ഉപയോഗിച്ച് ഒന്നിലധികം പശ്ചാത്തല ചിത്രങ്ങൾ (സിൽവർബാക്ക് സൈറ്റിൽ ഉപയോഗിക്കുന്നത് പോലെ) ഉപയോഗിച്ച് പാരലാക്സ് ഇഫക്റ്റ് പുനർനിർമ്മിക്കാൻ കഴിയും.

മൂലകത്തിന് അതിൻ്റേതായ പശ്ചാത്തലവും ആവശ്യമായ പാഡിംഗും ലഭിക്കുന്നു. ഒരു മൂലകത്തിൻ്റെ ആപേക്ഷിക സ്ഥാനനിർണ്ണയം കപട മൂലകങ്ങളുടെ കേവല സ്ഥാനനിർണ്ണയത്തിനുള്ള ഒരു റഫറൻസ് പോയിൻ്റായി പ്രവർത്തിക്കുന്നു. z അക്ഷത്തിൽ കപട മൂലകങ്ങളുടെ സ്ഥാനം ക്രമീകരിക്കാൻ പോസിറ്റീവ് z-ഇൻഡക്സ് മൂല്യം നിങ്ങളെ അനുവദിക്കുന്നു.

#silverback (സ്ഥാനം:ബന്ധു; z-സൂചിക:1; മിനിറ്റ്-വീതി:200px; മിനിറ്റ്-ഉയരം:200px; പാഡിംഗ്:120px 200px 50px; പശ്ചാത്തലം:#d3ff99 url(vines-back.png) -10% 0 ആവർത്തന-x ;)

രണ്ട് കപട മൂലകങ്ങളും പൂർണ്ണമായും സ്ഥാനം പിടിക്കുകയും മൂലകത്തിൻ്റെ വശങ്ങളിൽ സ്ഥാപിക്കുകയും ചെയ്യുന്നു. അർത്ഥം z-സൂചിക തുല്യം-1 ലെയറിന് പിന്നിൽ കപട മൂലകം സ്ഥാപിക്കുന്നു ഉള്ളടക്കം. ഈ രീതിയിൽ, കപട ഘടകങ്ങൾ മൂലകത്തിൻ്റെ പശ്ചാത്തലത്തിനും രൂപരേഖയ്ക്കും മുകളിൽ സ്ഥാപിച്ചിരിക്കുന്നു, എന്നാൽ എല്ലാ ഉള്ളടക്കവും തിരഞ്ഞെടുക്കാവുന്നതും മൗസ് ക്ലിക്കുകളോട് സംവേദനക്ഷമതയുള്ളതുമായി തുടരുന്നു.

#സിൽവർബാക്ക്:മുമ്പ്, #സിൽവർബാക്ക്:അതിനുശേഷം (സ്ഥാനം:സമ്പൂർണ; z-സൂചിക:-1; മുകളിൽ:0; ഇടത്:0; വലത്:0; താഴെ:0; പാഡിംഗ്-മുകളിൽ:100px; )

ഓരോ കപട ഘടകത്തിനും പശ്ചാത്തല ഇമേജുകളുടെ ആവർത്തിച്ചുള്ള ഒരു കൂട്ടം ഉണ്ട്. പാരലാക്സ് ഇഫക്റ്റ് പുനർനിർമ്മിക്കുന്നതിന്, നിങ്ങൾക്ക് മറ്റൊന്നും ആവശ്യമില്ല.

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

#silverback:before (content:url(gorilla-1.png); padding-left:3%; text-align:left; പശ്ചാത്തലം:സുതാര്യമായ url(vines-mid.png) 300% 0 repeat-x; ) #silverback :after (content:url(gorilla-2.png); padding-right:3%; text-align:right; background:transparent url(vines-front.png) 70% 0 repeat-x; )

ഉദാഹരണ കോഡ്: വഴക്കമുള്ള കൃത്രിമ നിരകൾ

വിവരിച്ച സാങ്കേതികതയുടെ മറ്റൊരു പ്രയോഗം വഴക്കമുള്ള നിരകളുടെ സൃഷ്ടിയാണ് തുല്യ ഉയരംചിത്രങ്ങളോ അധിക അനുബന്ധ ഘടകങ്ങളോ ഉപയോഗിക്കാതെ.

HTML മാർക്ക്അപ്പ് വളരെ ലളിതമാണ്. ഞങ്ങൾ എല്ലാവർക്കും ക്ലാസുകൾ ഉപയോഗിക്കുന്നു div ഘടകംഇതിനുപകരമായി CSS സെലക്ടർമാർ 2.1, IE6 പിന്തുണയ്ക്കുന്നില്ല. IE6 പിന്തുണയ്‌ക്കേണ്ട ആവശ്യമില്ലെങ്കിൽ, സെലക്ടറുകൾ ഉപയോഗിക്കാം.

കണ്ടെയ്നറിന് ഒരു ശതമാനമായി വ്യക്തമാക്കിയ വീതിയുണ്ട്, ആപേക്ഷിക സ്ഥാനനിർണ്ണയംഒരു പോസിറ്റീവ് z-ഇൻഡക്സ് പ്രോപ്പർട്ടി മൂല്യവും. ഓവർഫ്ലോ:ഹിഡൻ ഉപയോഗിക്കുന്നത് അതിൻ്റെ ഫ്ലോട്ടിംഗ് കുട്ടികളുടെ ഉള്ളടക്കം പൊതിയുന്നതിനും കവിഞ്ഞൊഴുകുന്ന കപട ഘടകങ്ങൾ മറയ്ക്കുന്നതിനും ഒരു മൂലകത്തെ അനുവദിക്കുന്നു. പശ്ചാത്തല നിറം ഒരു നിരയുടെ നിറം നൽകുന്നു.

#faux (സ്ഥാനം:ബന്ധു; z-സൂചിക:1; വീതി:80%; മാർജിൻ:0 സ്വയമേവ; ഓവർഫ്ലോ:മറഞ്ഞിരിക്കുന്നു; പശ്ചാത്തലം:#ffaf00; )

ഡിവിയുടെ ഡിസെൻഡൻ്റ് എലമെൻ്റുകൾക്കായി റിലേറ്റീവ് പൊസിഷനിംഗ് ഉപയോഗിക്കുന്നത്, യഥാർത്ഥ ലേഔട്ടിലെ ഭാവം പരിഗണിക്കാതെ തന്നെ നിരകളുടെ ക്രമം നിയന്ത്രിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

#faux div (സ്ഥാനം:ബന്ധു; ഫ്ലോട്ട്:ഇടത്; വീതി:30%; ) #faux .main (ഇടത്:35%) #faux .supp1 (ഇടത്:-28.5%) #faux .supp2 (ഇടത്:8.5%)

മറ്റ് രണ്ട് നിരകൾ പശ്ചാത്തലങ്ങളുള്ള കപട ഘടകങ്ങൾ ഉപയോഗിച്ചാണ് സൃഷ്ടിച്ചിരിക്കുന്നത്. ആവശ്യമെങ്കിൽ നിങ്ങൾക്ക് ചിത്രങ്ങൾ പശ്ചാത്തലമായി ഉപയോഗിക്കാം.

#faux:before, #faux:after (content:""; position:absolute; z-index:-1; top:0; right:0; bottom:0; left:33.333%; background:#f9b6ff; ) # faux:after (ഇടത്:66.667%; പശ്ചാത്തലം:#79daff; )

മാതൃകാ കോഡ്: ഒന്നിലധികം സ്ട്രോക്ക്

ഒന്നിലധികം സ്ട്രോക്കുകൾ ഏതാണ്ട് ഒരേ രീതിയിൽ ക്രമീകരിച്ചിരിക്കുന്നു. പ്രഭാവം നിലനിർത്തിക്കൊണ്ട് ചിത്രങ്ങൾ ഉപേക്ഷിക്കാൻ അതിൻ്റെ ഉപയോഗം നിങ്ങളെ അനുവദിക്കുന്നു.

കപട മൂലകങ്ങൾ സൃഷ്‌ടിക്കുന്ന അധിക സ്‌ട്രോക്ക് ഉൾക്കൊള്ളാൻ ആവശ്യമായ ആപേക്ഷിക സ്ഥാനവും പാഡിംഗ് വീതിയും മൂലകത്തിന് ഉണ്ടായിരിക്കണം.

#ബോർഡറുകൾ (സ്ഥാനം:ബന്ധു; z-സൂചിക:1; പാഡിംഗ്:30px; ബോർഡർ:5px സോളിഡ് #f00; പശ്ചാത്തലം:#ff9600; )

കപട-ഘടകം മൂലകത്തിൻ്റെ അതിർത്തിയിൽ നിന്ന് ഉചിതമായ അകലത്തിൽ സ്ഥാപിച്ചിരിക്കുന്നു, ഒരു നെഗറ്റീവ് z- സൂചിക ഉപയോഗിച്ച് ഉള്ളടക്ക പാളിക്ക് താഴെ സ്ഥാപിക്കുകയും അതിന് ആവശ്യമായ സ്ട്രോക്കും പശ്ചാത്തലവും നൽകുകയും ചെയ്യുന്നു.

#ബോർഡറുകൾ:മുമ്പ് (ഉള്ളടക്കം:""; സ്ഥാനം:സമ്പൂർണ; z-സൂചിക:-1; മുകളിൽ:5px; ഇടത്:5px; വലത്:5px; താഴെ:5px; ബോർഡർ:5px സോളിഡ് #ffea00; പശ്ചാത്തലം:#4aa929; ) #ബോർഡറുകൾ:ശേഷം (ഉള്ളടക്കം:""; സ്ഥാനം:സമ്പൂർണ; z-സൂചിക:-1; മുകളിൽ:15px; ഇടത്:15px; വലത്:15px; താഴെ:15px; ബോർഡർ:5px സോളിഡ് #00b4ff; പശ്ചാത്തലം:#fff; )

പുരോഗമന മെച്ചപ്പെടുത്തലുകളും ലെഗസി ബ്രൗസറുകളും

IE6, IE7 എന്നിവ CSS 2.1 വ്യാജ ഘടകങ്ങളെ പിന്തുണയ്‌ക്കുന്നില്ല, പ്രഖ്യാപനങ്ങൾക്ക് മുമ്പും: ശേഷവും എല്ലാം അവഗണിക്കുക. അവർ എല്ലാ മെച്ചപ്പെടുത്തലുകളും കൊണ്ടുവരില്ല, പക്ഷേ പ്രധാന പ്രവർത്തനം നിലനിർത്തും.

ഫയർഫോക്സ് 3.0 ഉപയോഗിക്കുമ്പോൾ ശ്രദ്ധിക്കുക

ഫയർഫോക്സ് 3.0 CSS 2.1 വ്യാജ ഘടകങ്ങളെ പിന്തുണയ്ക്കുന്നു, എന്നാൽ അവയുടെ സ്ഥാനനിർണ്ണയത്തെ പിന്തുണയ്ക്കുന്നില്ല. ഈ ഭാഗിക പിന്തുണ കാരണം, കപട മൂലകങ്ങളുടെ വീതിയെയോ ഉയരത്തെയോ വ്യക്തമായി ആശ്രയിക്കുന്ന ഇഫക്റ്റുകൾ ഭയങ്കരമായി കാണപ്പെടും. ഇല്ല ബദൽ മാർഗംനിങ്ങൾ വീതിയോ ഉയരമോ ഉള്ള പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ Firefox 3.0 ന് വേണ്ടി. കപട ഘടകത്തിൻ്റെ ശൈലികളിലേക്ക് ഡിസ്പ്ലേ:ബ്ലോക്ക് ചേർക്കുന്നതിലൂടെ ചിലപ്പോൾ ചില മെച്ചപ്പെടുത്തലുകൾ നേടാനാകും.

വീതിയോ ഉയരമോ ഉള്ള പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് കപട മൂലകങ്ങൾ പൊസിഷനിംഗ് ആവശ്യമുള്ള ടെക്നിക്കുകൾ ഉപയോഗിക്കുന്നതിന് മുമ്പ്, Firefox 3.0-നെ പിന്തുണയ്‌ക്കുന്നതും ആ ബ്രൗസർ ഉപയോഗിക്കുന്ന നിങ്ങളുടെ ഉപയോക്താക്കളുടെ ശതമാനവും എത്ര പ്രധാനമാണെന്ന് നിങ്ങൾ പരിഗണിക്കേണ്ടതുണ്ട്.

ഉപയോഗിക്കുന്ന ആപ്ലിക്കേഷനുകളിൽ ഈ പ്രശ്നം പൂർണ്ണമായും പരിഹരിച്ചിരിക്കുന്നു കേവല സ്ഥാനനിർണ്ണയം, വീതി അല്ലെങ്കിൽ ഉയരം പ്രോപ്പർട്ടികൾ പകരം.

CSS3 ഉപയോഗിച്ചുള്ള മെച്ചപ്പെടുത്തലുകൾ

ഈ ലേഖനത്തിൽ നടപ്പിലാക്കിയിരിക്കുന്ന എല്ലാ ഉദാഹരണങ്ങളും CSS3 ഉപയോഗിച്ച് മെച്ചപ്പെടുത്താവുന്നതാണ്.

ബോർഡർ-റേഡിയസ് , rgba , ട്രാൻസ്ഫോർമസ് പ്രോപ്പർട്ടികൾ, ഒന്നിലധികം CSS3 പശ്ചാത്തലങ്ങൾ എന്നിവ കപട ഘടകങ്ങളുമായി സംയോജിപ്പിച്ച് കൂടുതൽ സങ്കീർണ്ണമായ ഇഫക്റ്റുകൾ നടപ്പിലാക്കുന്നതിനുള്ള സാധ്യത തുറക്കും. എന്നിരുന്നാലും, നിലവിൽ CSS3 ആനിമേഷനുകളോ കപട ഘടകങ്ങൾക്കായുള്ള പരിവർത്തനങ്ങളോ പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾ ഒന്നുമില്ല.

ഭാവി: CSS3 കപട ഘടകങ്ങൾ

CSS3 കപട-ഘടകങ്ങളിലേക്കുള്ള നിർദ്ദേശിത മെച്ചപ്പെടുത്തലുകളിൽ (CSS3 ജനറേറ്റുചെയ്‌തതും മാറ്റിസ്ഥാപിച്ചതുമായ ഉള്ളടക്ക മൊഡ്യൂൾ ഡോക്യുമെൻ്റ് കാണുക) ബന്ധിത കപട ഘടകങ്ങൾ (::before::before), ഒന്നിലധികം വ്യാജ ഘടകങ്ങൾ (:: after(2)), പൊതിയുന്ന വ്യാജ ഘടകങ്ങൾ ( :: പുറത്ത്) കൂടാതെ ഡോക്യുമെൻ്റിൻ്റെ ലോഡ് ചെയ്ത ഭാഗങ്ങൾക്കായി കപട ഘടകങ്ങൾ തിരുകാനുള്ള കഴിവും (:: ഇതര).

അത്തരം മാറ്റങ്ങൾ പ്രായോഗികമായി തുറക്കും പരിധിയില്ലാത്ത സാധ്യതകൾഒരു മൂലകവും ഒരു കൂട്ടം കപട ഘടകങ്ങളും ഉപയോഗിച്ച് എല്ലാത്തരം ഇഫക്റ്റുകളും സൃഷ്ടിക്കാൻ.

CSS 2-ൽ, ഒരേ സമയം ഒരു ഘടകത്തിലേക്ക് രണ്ട് പശ്ചാത്തലങ്ങൾ ചേർക്കുന്നത് അസാധ്യമാണ്, അതിനാൽ നിങ്ങൾ ഒരു ഘടകം മറ്റൊന്നിനുള്ളിൽ നെസ്റ്റ് ചെയ്യുകയും ഓരോന്നിനും അതിൻ്റേതായ പശ്ചാത്തല ചിത്രം നൽകുകയും വേണം. സങ്കീർണ്ണമായ ലേഔട്ടുകൾക്ക്, അത്തരം അറ്റാച്ച്മെൻ്റുകൾ ചിലപ്പോൾ ഒരു ഡസനോളം കണക്കാക്കാം. അത്തരമൊരു കൂമ്പാരം ഒരു നന്മയിലേക്കും നയിക്കില്ലെന്ന് വ്യക്തമാണ്, പക്ഷേ എന്തുചെയ്യണം? എന്തെങ്കിലും ഉണ്ടെന്ന് അത് മാറുന്നു! CSS 3-ൽ, നിങ്ങൾക്ക് ഒരേ സമയം ഏത് ഘടകത്തിലേക്കും ഒന്നിലധികം പശ്ചാത്തല ചിത്രങ്ങൾ ചേർക്കാൻ കഴിയും. അതിനാൽ ഞങ്ങൾ ബ്ലോക്ക് ഡ്രോയിംഗ് (ചിത്രം 1) എടുക്കുന്നു, അതിനെ കഷണങ്ങളായി മുറിച്ച് ബ്രൗസറുകളിൽ പരീക്ഷിക്കാൻ തുടങ്ങുക.

അരി. 1. സൈറ്റിനായി തടയുക

ലാളിത്യത്തിനായി, ഞാൻ ബ്ലോക്കിൻ്റെ വീതി എടുക്കും നിശ്ചിത വലിപ്പം, കൂടാതെ ഉള്ളടക്കത്തെ ആശ്രയിച്ച് ഉയരം നീട്ടും. മുകളിലും താഴെയുമുള്ള ഭാഗങ്ങൾ ഡ്രോയിംഗിൽ വ്യക്തമായി കാണാം; ഞാൻ അവയെ എഡിറ്ററിൽ മുറിച്ച് ഒരു പ്രത്യേക ഫയലിൽ പാളികളാക്കി. മധ്യഭാഗം തിരഞ്ഞെടുക്കണം, അങ്ങനെ അത് സെമുകളില്ലാതെ ലംബമായി ആവർത്തിക്കുന്നു. ഡിസൈനിന് നന്നായി നിർവചിക്കപ്പെട്ട ആവർത്തന പാറ്റേൺ ഉണ്ട്, അതിനാൽ അത് ഹൈലൈറ്റ് ചെയ്യുന്നതിൽ ബുദ്ധിമുട്ട് ഉണ്ടാകരുത്. ഞാൻ മുമ്പത്തെ ശകലങ്ങളിലേക്ക് പകർത്തി ഒട്ടിക്കുന്നു. ഫലം ഇതുപോലുള്ള ഒരു ചിത്രമായിരിക്കും (ചിത്രം 2).

അരി. 2. തയ്യാറാക്കിയ ചിത്രങ്ങൾ

തത്വത്തിൽ, നിങ്ങൾക്ക് ഓരോ ശകലവും ഇതുപോലെ സംരക്ഷിക്കാൻ കഴിയും പ്രത്യേക ഫയൽ, എന്നാൽ CSS സ്‌പ്രൈറ്റുകൾക്ക് (ഒരുപാട് ചിത്രങ്ങൾ ഒന്നിലേക്ക് ഒട്ടിക്കുന്നതിനുള്ള സാങ്കേതികവിദ്യ എന്ന് വിളിക്കപ്പെടുന്നവ) നിരവധി ഗുണങ്ങളുണ്ട്. ഒന്നാമതായി, ഫയലുകളുടെ എണ്ണം കുറയുന്നതിനാൽ സെർവറിലേക്കുള്ള അഭ്യർത്ഥനകളുടെ എണ്ണം കുറയുന്നു, രണ്ടാമതായി, ചിത്രങ്ങൾ ലോഡ് ചെയ്യുകയും മൊത്തത്തിൽ വേഗത്തിൽ പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു.

പശ്ചാത്തല പ്രോപ്പർട്ടി തന്നെ പശ്ചാത്തലം പ്രദർശിപ്പിക്കുന്നു, അത് ആവശ്യമുള്ള ശകലത്തിൻ്റെ കോർഡിനേറ്റുകളും വ്യക്തമാക്കുന്നു. ഓരോ പശ്ചാത്തലത്തിൻ്റെയും പാരാമീറ്ററുകൾ കോമകളാൽ വേർതിരിച്ചിരിക്കുന്നു, ഈ സാഹചര്യത്തിൽ അവയുടെ ക്രമം പ്രധാനമാണ്. ബ്ലോക്കിൻ്റെ മുകളിലും താഴെയും ഓവർലാപ്പ് ചെയ്യരുതെന്ന് ഞാൻ ആഗ്രഹിക്കുന്നു, അതിനാൽ ഞാൻ അവയെ ആദ്യം വെച്ചു (ഉദാഹരണം 1).

ഉദാഹരണം 1. നിരവധി പശ്ചാത്തല ചിത്രങ്ങൾ

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

ആദ്യ പശ്ചാത്തലം ബ്ലോക്കിൻ്റെ മുകളിലെ ബോർഡർ പ്രദർശിപ്പിക്കുന്നു, രണ്ടാമത്തെ പശ്ചാത്തലം - താഴെ, മൂന്നാമത്തേത് - ലംബ ബോർഡറുകൾ.

ഞങ്ങൾ ബ്രൗസറുകൾ പരിശോധിക്കുന്നു. Internet Explorer 8 ചിത്രങ്ങളൊന്നും പ്രദർശിപ്പിച്ചില്ല, മറ്റ് ബ്രൗസറുകൾ (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) ഫ്രെയിം ശരിയായി പ്രദർശിപ്പിച്ചു (ചിത്രം 3).

അരി. 3. സഫാരി ബ്രൗസറിൽ ഫ്രെയിം വ്യൂ

ഒന്നിലധികം പശ്ചാത്തലങ്ങൾ ഉപയോഗിക്കുന്നത് ഡെവലപ്പർമാർക്ക് സാഹചര്യം വളരെ എളുപ്പമാക്കുന്നു, പ്രത്യേകിച്ചും ബ്ലോക്കുകൾ ഇടുമ്പോൾ. ഇനി ഒരു ചെറിയ കാര്യം മാത്രം. IE 6–8 ബ്രൗസർ ഇല്ലാതാകേണ്ടത് അത്യാവശ്യമാണ്.