ویژگی text-shadow در CSS

text-shadow Property

ویژگی text-shadow در CSS به متن اِفکت اضافه می کند. این ویژگی سایه را در دو محور عمودی و افقی و با تنظیم شعاع تاری و رنگ اعمال می کند.

نحوه نوشتار

text-shadow: 0 4px 4px yellow;
text-shadow: -1rem 0.3rem red;

text-shadows: offset-x | offset-y | blur-radius | color;

مقادیر

محور افقی و محور عمودی

این مقدار ضروری است. مقدار ثابت برای محور افقی و عمودی برای مشخص کردن فاصله سایه از متن بکار می رود. مقادیر منفی نیز قابل استفاده هستند. مقدار منفی در محور افقی سایه را به چپ و در محور عمودی به بالای متن انتقال می دهد.

شعاع تاری یا blur-radius​

این مقدار اختیاری است. هرچه مقدار بیشتر باشد شعاع تاری سایه بزرگتر و روشنتر خواهد شد. اگر مقداری داده نشود مقدار پیشفرض ۰ در نظر گرفته می شود.

رنگ​

این مقدار اختیاری است. رنگ سایه را مشخص می کند و میتواند در ابتدا یا انتهای سری مقادیر استفاده شده در ویژگی text-shaodw بیاید.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<p class="p1">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</p>
<hr />
<p class="p2">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</p>

css

p {
   direction: rtl;
   font: bold 21px calibri;
}
.p1 { 
   color: orangered;
   text-shadow: 0 1px 0.1rem black; 
}
.p2 {
   color: white;
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.