اضافه کردن سایه به متن در CSS – ویژگی text-shadow

ویژگی text-shadow در CSS برای اضافه کردن سایه به متن و تعیین جزئیات ظاهری آن مورد استفاده قرار می‌گیرد.

نحوه افزودن سایه به متن با کمک ویژگی text-shadow در CSS

برای درج سایه با کمک ویژگی text-shadow در CSS می‌توانید علاوه بر فاصله افقی و عمودی از محل متن، شعاع محوشدگی (blur radius) و رنگ سایه را هم مشخص کنید. در ساده‌ترین حالت، سایه‌ای که توسط ویژگی text-shadow تعریف می‌شود شامل دو مقدار برای تعیین فاصله افقی و عمودی سایه از متن می‌باشد.

مثال زیر نحوه افزودن سایه به متن با کمک این ویژگی را نمایش می‌دهد:

h1 {
  text-shadow: 2px 5px 6px blue;
}

مقادیر 2px و 5px در مثال بالا به ترتیب میزان فاصله افقی و عمودی سایه از متن را مشخص می‌کنند. مقدار 6px نیز شعاع محوشدگی یا تارشدگی سایه را مشخص می‌کند و مقدار blue رنگ آبی را برای سایه انتخاب می‌کند. تصویر زیر نتیجه قانون CSS فوق را روی یک هدینگ سطح اول (یا المان <h1>) نمایش می‌دهد:

ویژگی text-shadow می‌تواند لیستی از سایه‌ها را دربربگیرد. در صورتی که می‌خواهید چند سایه را به طور همزمان به متن اضافه کنید می‌توانید مقادیر سایه ها را با یک علامت کاما (یا ,) از یکدیگر جدا کنید. در این حالت سایه اول روی سایه‌های دیگر قرار می‌گیرد. به همین ترتیب سایه دوم نیز روی سایه‌های پس از آن در لیست ظاهر می‌شود و الی آخر. مثال زیر نمونه افزودن دو سایه با رنگ های آبی و قرمز و فاصله های افقی و عمودی متفاوت را نمایش می‌دهد:

h1 {
  text-shadow: 2px 5px 6px blue, -2px -5px 6px red;
}

تصویر زیر نتیجه قانون فوق را روی یک هدینگ سطح اول نمایش می‌دهد:

جزئیات بخش های مختلف سایه متن و مقادیر متداول

مقدار پیشفرض برای ویژگی text-shadow به صورت none (بدون سایه) است. شما می‌توانید بخش‌های مختلف سایه ها در این ویژگی را متناسب با موارد زیر مقداردهی کنید:

• میزان فاصله افقی: این مقدار به صورت یک مقدار از نوع طول مشخص می‌شود و میزان فاصله افقی سایه از متن المان را تعیین می‌کند. برای مثال، مقدار 2px برای این بخش باعث می‌شود سایه با فاصله 2 پیکسل در جهت افقی و به سمت راست متن جابجا شود. فراموش نکنید درج این مقدار اجباری است. به علاوه برای این بخش می‌توانید از مقادیر منفی هم استفاده کنید. مقدار منفی باعث می‌شود سایه به سمت چپ متن منتقل شود.
• میزان فاصله عمودی: این مقدار به صورت یک مقدار از نوع طول مشخص می‌شود و میزان فاصله عمودی سایه از متن المان را تعیین می‌کند. برای مثال، مقدار 5px برای این بخش باعث می‌شود سایه با فاصله 5 پیکسل در جهت عمودی و به سمت پایین متن جابجا شود. فراموش نکنید درج این مقدار اجباری است. به علاوه برای این بخش می‌توانید از مقادیر منفی هم استفاده کنید. مقدار منفی باعث می‌شود سایه به سمت بالای متن منتقل شود.
• شعاع محوشدگی (یا blur-radius): این مقدار، شعاع محوشدگی یا تارشدگی سایه را به صورت یک مقدار از نوع طول مشخص می‌کند. هرچه این شعاع بیشتر باشد سایه با گستره پهن‌تر و میزان روشنایی بیشتر ظاهر می‌شود. درج مقدار برای این بخش اختیاری است و مقدار پیشفرض برای آن، 0 است.
• رنگ سایه: درج مقدار رنگ در ویژگی text-shadow، رنگ سایه را مشخص می‌کند. مقدار رنگ را می‌توانید قبل از مقادیر بخش‌های دیگر یا پس از آن‌ها درج کنید. درج مقدار برای این بخش اختیاری است و مقدار پیشفرض آن به عامل کاربری (مثل مرورگر وب کاربر) بستگی دارد.

در تصویر زیر می‌توانید مثال‌های دیگری از مقادیر مختلف ویژگی text-shadow و نتیجه آن را مشاهده کنید:

بازگشت به فهرست مجموعه آموزشی CSS