سبد (0)

خصوصیت text-shadow

مثال (خصوصیت text-shadow)

افزودن سایه به متن:

h1
{
text-shadow: 2px 2px #ff0000;
}
خودتان امتحان کنید »

در انتهای این آموزش، مثال های بیشتری را خواهید دید.


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

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت text-shadow را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.


تعریف و کاربرد

با استفاده از خصوصیت text-shadow می توان به متن سایه اضافه کرد.

مقدار پیشفرض none
ارث بری بله
نسخه CSS3
JavaScript ساختار object.style.textShadow="2px 2px #ff0000"

نحوه استفاده

text-shadow: h-shadow v-shadow blur color;

توجه: با استفاده از خصوصیت text-shadow می توان یک سایه یا تعداد بیشتری سایه به متن افزود. می توان مشخصات مربوط به هر سایه را با کاما از یکدیگر جدا کرد و به عبارتی با افزودن کاما و مقادیر مربوط به سایه افقی، عمودی (و احتمالا تیرگی سایه و رنگ آن)  می توان سایه ها را به متن افزود.

مقدارتوضیحاتنمایش دادن
h-shadow

الزامی است. مکان سایه افقی را مشخص می کند. مقادیر منفی نیز قابل قبول است.

نمایش دادن »
v-shadow الزامی است. مکان سایه عمودی را مشخص می کند. مقادیر منفی نیز قابل قبول است. نمایش دادن »
blur

اختیاری است. عمق تیرگی و محو شدگی را مشخص می کند.

نمایش دادن »
color

برای مشاهده مقادیر ممکن برای خصوصیت color لطفا CSS Colors را ملاحظه فرمایید.

نمایش دادن »

مثالs

مثال - خودتان امتحان کنید

Text-shadow with a blur effect
این مثال، ایجاد سایه با میزان محوشدگی نمایش داده شده است.

Text-shadow on white text

این مثال، ایجاد سایه روی متن سفید را نشان می دهد.

Text-shadow with neon glow

این مثال، ایجاد سایه با اثر تابش نئونی را نمایش می دهد.


بیاموزهای مرتبط

CSS3 Text Effect (بیاموز CSS3)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان