سایه متن (Text Shadow) در CSS

در این بخش با «سایه متن (Text Shadow)» آشنا می شوید؛ ویژگی ای که به نوشته ها عمق و خوانایی می دهد. با استفاده از آن می توانید جابه جایی افقی/عمودی، رنگ و محو شدن را تعیین کنید.

معرفی ویژگی سایه متن

ویژگی text-shadow به متن سایه اضافه می کند. ساده ترین حالت فقط افست افقی و عمودی است؛ سپس می توانید رنگ و میزان محوشدگی را بیفزایید.

سایه ساده: فقط افست ها

در نمونه زیر یک سایه ساده با افست افقی و عمودی تنظیم شده است:

h1 { text-shadow: 2px 2px; }

سایه با رنگ

علاوه بر افست ها، می توانید رنگ سایه را نیز مشخص کنید:

h1 { text-shadow: 2px 2px red; }

سایه با محوشدگی (Blur)

برای طبیعی تر شدن، شعاع محوشدگی را اضافه کنید:

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

نمونه های بیشتر سایه متن

می توانید روی متن سفید، سایه تیره اعمال کنید تا کنتراست بهتر شود:

h1 { color: white; text-shadow: 2px 2px 4px #000000; }

همچنین جلوه نئون با محوشدگی صفر و افست صفر ایجاد می شود:

h1 { text-shadow: 0 0 3px #ff0000; }

نکته: از سایه لطیف برای بهبود خوانایی روی پس زمینه های شلوغ استفاده کنید.

سایه های چندگانه

ویژگی text-shadow از چند سایه هم زمان پشتیبانی می کند. سایه ها را با ویرگول جدا کنید:

h1 { text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff; }

ترکیب چند رنگ متفاوت روی متن سفید:

h1 { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red; }

هشدار: زیاده روی در محوشدگی یا کنتراست بالا می تواند دسترس پذیری را کاهش دهد.

سایه متن و تایپوگرافی

برای نتیجه بهتر، سایه متن را همراه با تنظیمات فونت و فاصله گذاری بررسی کنید؛ به عنوان نمونه صفحه فونت ها و فاصله گذاری متن را ببینید. همچنین برای جلوه های دیگر متن می توانید به تزئینات متن مراجعه کنید.