സിഎസ്എസ്-നിഴൽ: എങ്ങനെ ഉണ്ടാക്കും

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

താഴെ അവതരിപ്പിച്ച മെറ്റീരിയൽ നിങ്ങൾ തണൽ എങ്ങനെ ഇൻസ്റ്റാൾ അല്ലെങ്കിൽ സി.എസ്.എസ്-കോഡ് ഉപയോഗിച്ച് തടയുക സഹായിക്കും.

സിഎസ്എസ്-നിഴൽ. വാക്യഘടന

യഥാർത്ഥത്തിൽ ബോക്സ്-നിഴൽ, ബോക്സ് എവിടെ - ഒരു ബ്ലോക്ക്, നിഴൽ - ഈ തന്നെ നിഴലിലാണ്.

എസ് എഴുതിയ കോഡ്:

{ബോക്സ്-നിഴൽ: 11px 22px ൩൩പ്ക്സ ൪൪പ്ക്സ # 333333;}.

ലൈൻ യൂണിറ്റ് ഒരു നിഴൽ പിക്സൽ വ്യാസാർദ്ധം സ്റ്റാൻഡേർഡ് സജ്ജമാക്കുമ്പോൾ നമ്മോട് പറയുന്നു. താഴെ പറയുന്നു ഡാറ്റ ഡീക്രിപ്റ്റ് ആണ്:

• 11px - നിഴൽ എക്സ് അച്ചുതണ്ട് (നല്ല മൂല്യം (20px) തടയുക ഓഫ്സെറ്റ് ശരിയായ നിഴൽ, നെഗറ്റീവ് (-൩൭പ്ക്സ) മാറേണ്ടതുണ്ട് ചെയ്യും - ഇടതു);
• 22px - തടയൽ (ഇറങ്ങി നെഗറ്റീവ് (-൧൭പ്ക്സ) തണൽ ഒരു ഷിഫ്റ്റിൽ നല്ല മൂല്യം (൫പ്ക്സ) ലീഡ് - അപ്പ്) എന്ന Y അക്ഷത്തിൽ ബന്ധപ്പെട്ട നിഴൽ ദിസ്പ്ലചെമെംത്സ്;
• ൩൩പ്ക്സ - ഈ മങ്ങൽ പരാമീറ്റർ, പ്രഭാവം കൂടുതൽ എണ്ണം, ശക്തമായ;
• ൪൪പ്ക്സ - നിഴലുകൾ വ്യാസമാണ്, നേരിട്ട് ആനുപാതികമാണ്;
• # 333333 - തണലിൽ ചായം നിറം.

കഴിഞ്ഞ മൂന്ന് ചരങ്ങൾ ആവശ്യമെങ്കിൽ വേണ്ടൂ, സ്ട്രിങിലുള്ള ഒഴിവാക്കി കഴിയും അതായത് {ബോക്സ്-നിഴൽ: 10px 13px; } - .. അത്തരം ഒരു ലൈൻ തെറ്റായ അല്ല (നിഴൽ നിറം തടയൽ വാചകത്തിന്റെ നിറം സമാനമാണ്).

അങ്ങനെ, നിങ്ങളുടെ സൈറ്റിന്റെ താളുകളിൽ നിഴലുകൾ സൃഷ്ടിക്കാത്ത ഒരു ബുദ്ധിമുട്ട്, എന്നാൽ സൃഷ്ടിക്കാനും പല നല്ല തിരയുന്ന ഇഫക്റ്റുകൾ! ഡിസൈൻ പ്രധാനപ്പെട്ട എല്ലാ വിശദമായി, ഓരോ വിശദമായി കാരണം നിങ്ങളുടെ കുട്ടി ഒരു തനതായ സാരോപദേശത്തെ, നിർമ്മിക്കുക. ഇവിടെ, അത്, തോന്നുന്നു പ്രത്യേക ഒന്നും, എന്നാൽ കൂടുതൽ രസകരമായ ആകർഷകമായ ആണ്.

അത് വെല്ലാൻ തക്കവണ്ണം ഒരു നിഴൽ സിഎസ്എസ്-ബ്ലോക്ക് പോലെ കാണപ്പെടുന്നു, ചില ഗണിച്ചു ഉദാഹരണങ്ങൾ നോക്കുക:

1. {ബോക്സ്-നിഴൽ: 25px 25px;} - സി.എസ്.എസ്-നിഴൽ മഴു ഓഫ്സെറ്റ് 25 പിക്സൽ.
2. {ബോക്സ്-നിഴൽ: 25px 25px 10px;} - സി.എസ്.എസ്-നിഴൽ മഴു ഓഫ്സെറ്റ് 25 പിക്സൽ ആൻഡ് മങ്ങിക്കൽ അറ്റങ്ങൾ 10 പിക്സൽ.
3. {ബോക്സ്-നിഴൽ: 25px 25px 10px ൫പ്ക്സ;} - സി.എസ്.എസ്-നിഴൽ മഴു ഓഫ്സെറ്റ് 25 പിക്സൽ, ബ്ലർ 10 പിക്സൽ 5 പിക്സൽ നിശ്ചയിച്ചിട്ടുള്ള ഒരു ആരം അരികുകളും
4. {ബോക്സ്-നിഴൽ: 25px 25px 10px ൫പ്ക്സ # ൯എ൯എ൯എ;} - സി.എസ്.എസ്-നിഴൽ മഴു ഓഫ്സെറ്റ് 25 പിക്സൽ, മങ്ങൽ 10 പിക്സൽ, അറ്റങ്ങൾ 5 പിക്സൽ നിറവും ആരം വ്യക്തമാക്കുക.

ഷാഡോ

കൂടുതൽ, മനോഹരമായ ത്ത യഥാർത്ഥ ഷേഡുകൾ സൃഷ്ടിക്കാൻ വ്യത്യസ്ത ഉണ്ട്. നിങ്ങൾ അകത്തെ നിഴൽ കഴിയും. ഇത് പാരാമീറ്ററുകൾ കൂടുതൽ വിവരണം പോലെ സാധാരണ പോകും, "ഇംസെത്" എന്ന പാരാമീറ്ററുകൾ വ്യക്തമാക്കുന്നതിന് മതി കോഡ്:

{ബോക്സ്-നിഴൽ: ഇംസെത് 4px 2px ൬പ്ക്സ # ൯എ൯എ൯എ;}.

ബ്ളോക്ക് കീഴിൽ അവർ (നിഴലുകൾ) ലിസ്റ്റ് ചെയ്യുന്നു കോമകളാൽ വേർതിരിച്ച കോഡിൽ തികച്ചും വ്യത്യസ്തമായ പരാമീറ്ററുകൾ ചില നിഴലുകൾ ഇട്ടു സാധ്യമാണ്:

{ബോക്സ്-നിഴൽ: -൨൦പ്ക്സ -൧൦പ്ക്സ 11px 15px # 800080, -൫൦പ്ക്സ -൪൦പ്ക്സ ൫പ്ക്സ 10px # ദഅ൫൨൦, 20px 10px 11px 15px # ൦൭൦൦ഫ്൯, 50px- ലും ൪൦പ്ക്സ ൫പ്ക്സ 10px # ഫ്ഫ൫൦൦}.

നിഴൽ ചിത്രങ്ങൾ

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

ഈ പ്രശ്നം ഏറ്റവും ലളിതവും തന്മാത്രകളെ ശരിയായ പരിഹാരം - യൂണിറ്റ് സൃഷ്ടി, നിങ്ങളുടെ ചിത്രത്തിൽ പശ്ചാത്തലത്തിൽ കൊതൊര്മൊ ചെയ്യും. അടുത്തതായി, യൂണിറ്റ് ആവശ്യമായ നിഴലിനെ അവർ പശ്ചാത്തല-ഇമേജ് കാണിക്കുന്നതും:

• .ബ്ലൊച്ക്൧ {ബോക്സ്-നിഴൽ: ഇംസെത് 0 0 11px ൯പ്ക്സ # ൯എ൯എ൯എ; വീതി: ൪൮൦പ്ക്സ; ഉയരം: ൩൬൦പ്ക്സ; പശ്ചാത്തലം: URL (ചിത്രങ്ങൾ / ഛര്ലിജെ_ഥെരൊന്_൨.ജ്പ്ഗ്) 0 0 യാതൊരു ആവർത്തനം;}

ഈ ഉദാഹരണത്തിൽ, നാം അക്ഷങ്ങളുടെ ഓഫ്സെറ്റ് ഇല്ലാത്ത ഒരു അകത്തെ നിഴൽ സൃഷ്ടിക്കുക, മങ്ങൽ വ്യാസാർദ്ധം, തടയൽ നിർവചിക്കപ്പെട്ട നിറം, ഉയരം, വീതി, പശ്ചാത്തല (പശ്ചാത്തലം) കുഅര്തിന്കു നിയമിച്ചു. തൽഫലമായി, ഞങ്ങൾ അകത്തെ നിഴൽ ഒരു ചിത്രം ലഭിക്കും.

ഇതുവരെ ആവേശകരമായ ഇത് തികച്ചും ലളിതമാണ്, ഏറ്റവും പ്രധാനമായി - - ഉപയോഗപ്രദമായ വ്യായാമം സിഎസ്എസ്-കോഡ് ഉപയോഗിച്ച് നിഴലുകൾ സൃഷ്ടിക്കാൻ അംഗീകരിക്കുക.