text-shadow ගුණය

text-shadow ගුණය පෙළට සෙවනැල්ලක් නියම කරයි. ගුණාංගයේ අගය ලෙස එය හිස් අවකාශයකින් වෙන් කර ඇති 4 පරාමිතීන් පිළිගනී, නැතහොත් none යන යතුරු වචනය, එය සෙවනැල්ල සම්පූර්ණයෙන්ම අවලංගු කරයි (මෙය පෙරනිමි අගය වේ).

වාක්‍ය රචනා ක්‍රමය

cssතෝරන්නා {
  text-shadow: x_අක්ෂයේ_විස්ථාපනය y_අක්ෂයේ_විස්ථාපනය අස්පෘෂ්ටතාව වර්ණය;
}

cssතෝරන්නා {
  text-shadow: none;
}

පරාමිතීන්

පරාමිතිය	විස්තරය
x අක්ෂයේ විස්ථාපනය	X අක්ෂය ඔස්සේ සෙවනැල්ලේ විස්ථාපනය නියම කරයි. ධන අගයක් දකුණට විස්ථාපනය කරන අතර, ඍණ අගයක් - වමට.
y අක්ෂයේ විස්ථාපනය	Y අක්ෂය ඔස්සේ සෙවනැල්ලේ විස්ථාපනය නියම කරයි. ධන අගයක් පහළට විස්ථාපනය කරන අතර, ඍණ අගයක් - ඉහළට.
අස්පෘෂ්ටතාව	සෙවනැල්ලේ අස්පෘෂ්ටතාව නියම කරයි. අගය විශාල වන තරමට සෙවනැල්ල වඩාත් අස්පෘෂ්ට වේ. විකල්ප පරාමිතියකි. නියම කර නොමැති නම් - සෙවනැල්ල පැහැදිලි වේ.
වර්ණය	ඕනෑම වර්ණ සඳහා ඒකක වලින් සෙවනැල්ලේ වර්ණය නියම කරයි. විකල්ප පරාමිතියකි. නියම කර නොමැති නම් - සෙවනැල්ලේ වර්ණය පෙළේ වර්ණය සමග සමපාත වේ.

අක්ෂ ඔස්සේ විස්ථාපන සහ අස්පෘෂ්ටතාව ඕනෑම ප්‍රමාණ සඳහා ඒකක වලින් නියම කරනු ලැබේ, සියයට අගයන් හැර.

උදාහරණය

අපි සෙවනැල්ල පහළට සහ වමට විස්ථාපනය කර සුළු අස්පෘෂ්ටතාවක් එකතු කරමු:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 5px 5px 3px black;
}

Результат:

උදාහරණය . පැහැදිලි සෙවනැල්ල

දැන් අපි සෙවනැල්ල රතු වර්ණයෙන් කර, එය පහළට සහ වමට විස්ථාපනය කරමු, එහෙත් අස්පෘෂ්ටතාව ඉවත් කරමු - සෙවනැල්ල පැහැදිලි වේ:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 10px 10px red;
}

Результат:

උදාහරණය . සමාන සෙවනැල්ල

දැන් සෙවනැල්ල විස්ථාපනය කර නැත, නමුත් එයට අස්පෘෂ්ටතාව එකතු කර ඇත:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-shadow: 0px 0px 3px black;
}

Результат:

මෙයද බලන්න

box-shadow ගුණය,
එය බහාලුමකට සෙවනැල්ලක් නියම කරයි