خصوصیت text-shadow
مثال (خصوصیت text-shadow)
افزودن سایه به متن:
{
text-shadow: 2px 2px #ff0000;
}
در انتهای این آموزش، مثال های بیشتری را خواهید دید.
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت text-shadow را پشتیبانی می کنند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، تنظیم چند پس زمینه برای یک عنصر را پشتیبانی نمی کند.
تعریف و کاربرد
با استفاده از خصوصیت text-shadow می توان به متن سایه اضافه کرد.
| مقدار پیشفرض | none |
|---|---|
| ارث بری | بله |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.textShadow="2px 2px #ff0000" |
نحوه استفاده
توجه: با استفاده از خصوصیت text-shadow می توان یک سایه یا تعداد بیشتری سایه به متن افزود. می توان مشخصات مربوط به هر سایه را با کاما از یکدیگر جدا کرد و به عبارتی با افزودن کاما و مقادیر مربوط به سایه افقی، عمودی (و احتمالا تیرگی سایه و رنگ آن) می توان سایه ها را به متن افزود.
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| h-shadow |
الزامی است. مکان سایه افقی را مشخص می کند. مقادیر منفی نیز قابل قبول است. |
نمایش دادن » |
| v-shadow | الزامی است. مکان سایه عمودی را مشخص می کند. مقادیر منفی نیز قابل قبول است. | نمایش دادن » |
| blur |
اختیاری است. عمق تیرگی و محو شدگی را مشخص می کند. |
نمایش دادن » |
| color |
برای مشاهده مقادیر ممکن برای خصوصیت color لطفا CSS Colors را ملاحظه فرمایید. |
نمایش دادن » |
مثال - خودتان امتحان کنید
Text-shadow with a blur effect
این مثال، ایجاد سایه با میزان محوشدگی نمایش داده شده است.
این مثال، ایجاد سایه روی متن سفید را نشان می دهد.
این مثال، ایجاد سایه با اثر تابش نئونی را نمایش می دهد.
بیاموزهای مرتبط
CSS3 Text Effect (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 8708
