در گذشته برای سایه دار کردن جعبه و div های html تصویر مربوط به سایه را با استفاده از دستورات css مربوط به تصویر زمینه برای بخش مورد نظر ایجاد می کردند و اصلا چیزی به عنوان سایه متن وجود نداشت اما با آمدن نسخه جدید css قابلیت و خاصیتی به آن افزوده شد تا ایجاد سایه توسط Css برای متن نوشته و Div ها براحتی امکان پذیر شود این خاصیتها box-shadow و text-shadow نام دارند در این مطلب از سایت نحوه سایه دار کردن متن و div با استفاده از این خاصیتها را آموزش می دهیم پس تا پایان همراه ما باشید.
ایجاد سایه توسط Css برای متن نوشته و Div
br /br /
// سایه دار کردن div با کلاس xscriptbr /br /
.xscript{box-shadow: 10px 10px 5px }/pbr /
p// فرمت کلی سایه divbr /br /
box-shadow: none|h-shadow v-shadow fuzz widespread tone |inset|initial/pbr /
p// سایه دار کردن متن هدینگ ۱/pbr /
ph1{text-shadow: 2px 2px }/pbr /
p// فرمت کلی سایت متنbr /br /
text-shadow: h-shadow v-shadow blur-radius color|none|initialbr /br /
به توضیح هر یک از مقادیر اختصاص داده شده به خاصیت های سایه نوشته و سایه جعبه یا div می پردازیم:
h-shadow : با تنظیم این گزینه سایه افقی تنظیم می شود مقدار برحسب پیکسل می باشد.
v-shadow : با تنظیم این گزینه سایه عمودی تنظیم می شود مقدار برحسب پیکسل می باشد.
blur : این گزینه برای میزان بلور و شفایفت سایه به کار می رود هرچقدر مقدار آن بیشتر باشد بلور سایه نیز بیشتر می شود.
spread : این پارامتر اندازه سایه را مشخص می کند.
color : برای انتخاب رنگ سایه کاربرد دارد و رنگ سایه را تعیین می کند.
inset : این گزینه سایه را به جای اینکه به بیرون جعبه ، بخش یا div منتشر کند و نمایش دهد به درون div انتقال می دهد.
اکثر خاصیتهای جدید ازجمله text-shadow و box-shadow در نسخه های قدیمی مرورگرها مخصوصا مرورگر ie از نسخه ۹ به پایین کار نمی کنند.
سایتهای آنلاین ایجاد سایه توسط Css برای متن نوشته و Div
یکی از راحت ترین روش های ایجاد سایه برای متن و جعبه div استفاده از سایتهای آنلاین می باشد عموما این سایتها با دریافت مقادیر مورد نیاز سایه تولید شده را نمایش می دهند و در نهایت کدهای مورد نیاز را در اختیار کاربر قرار می دهند، لیست برخی از سایتها در زیر آورده شده اند.
css3gen.com/text-shadow
cssmatic.com/box-shadow
