سایه متن (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; }
هشدار: زیاده روی در محوشدگی یا کنتراست بالا می تواند دسترس پذیری را کاهش دهد.
سایه متن و تایپوگرافی
برای نتیجه بهتر، سایه متن را همراه با تنظیمات فونت و فاصله گذاری بررسی کنید؛ به عنوان نمونه صفحه فونت ها و فاصله گذاری متن را ببینید. همچنین برای جلوه های دیگر متن می توانید به تزئینات متن مراجعه کنید.