text-shadow

از ویژگی text-shadow برای اضافه کردن سایه به متن استفاده می شود.

می توان به متن یک عنصر چندین سایه اضافه کرد, که در این صورت اولین سایه در بالا و بقیه به ترتیب زیر آن قرار می گیرند. اگر متنی همراه با خط هم باشد (مثلا زیر خط دار باشد) سایه به آن خط هم اعمال می شود.

همانطور که در شکل مشخص شده است اولین مقدار فاصله سایه با متن را در راستای محور X مشخص می کند, که اگر این مقدار مثبت باشد سایه به سمت راست حرکت دارد و اگر منفی باشد سایه به سمت چپ حرکت می کند.

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

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

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

.multiple-shadows {
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1), 10px 10px 10px rgba(0, 0, 0, 0.2);
}

در دموی زیر هفت نوع سایه به نمایش گذاشته شده است حتما تمام آنها را بررسی کرده تا با کارهایی که می توانید با این ویژگی انجام دهید آشنا شوید:

See the Pen text-shadow by Mojtaba Seyedi (@seyedi) on CodePen.

text-shadow می تواند به first-line:: و first-letter:: نیز اعمال شود.

به عنوان یک قانون عمومی بهتر است سایه به متن پاراگراف اعمال نشود چون خوانایی را پایین می آورد. بهتر است برای عناوین و غیره استفاده شود.

اگر می خواهید سایه حالت واقعی داشته باشد بهتر است در زمان اعمال سایه به یک متن به نکات زیر حتما توجه داشته باشید:

• یک سایه هیچوقت نباید یک رنگ یکدست و سالید داشته باشد حتما باید کمی حالت شفافیت و پشت نمایی داشته باشد مگر اینکه روی کره ماه باشیم! پس همیشه بهتر است برای رنگ سایه از مقدار آلفا بهره برد. ()rgba(), hsla
• همینطور یک سایه هیچوقت لبه تیز ندارد پس بهتر چند پیکسل مات شود.

با استفاده از این ویژگی کارهای جالبی بر روی منوها و عناوین می توان انجام داد. مثال های زیر را بررسی کنید:

See the Pen Horizontal Reverse-Focus Navigation by Dudley Storey (@dudleystorey) on CodePen.

See the Pen 3d text-shadow by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگر ها