text-shadow

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

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

text-shadow-syntax

همانطور که در شکل مشخص شده است اولین مقدار فاصله سایه با متن را در راستای محور 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.


 

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

سوالت رو توی پنل بحث و گفتگو مطرح کن.

3 دیدگاه برای “text-shadow

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *