این آموزش در تاریخ ۱۴۰۰/۱۱/۲۵ آپدیت شده است.
آموزش ویژگی text-shadow در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی text-shadow در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی text-shadow در CSS
با استفاده از ویژگی text-shadow در CSS میتوان سایه ( Shadow ) برای متن مشخص و یا تعریف کرد.
اگه میخواهید برای باکس خوده عناصر سایه ایجاد نمایید باید از ویژگی box-shadow استفاده نمایید.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی text-shadow را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 8 9 10 11 |
.Text-1{ text-shadow: 0 5px 2px #d3691f; } .Text-2{ text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15); } .Text-3{ text-shadow: 1px 0px 1px #ccc, 0px 1px 1px #eee,2px 1px 1px #ccc, 1px 2px 1px #eee,3px 2px 1px #ccc, 2px 3px 1px #eee,4px 3px 1px #ccc, 3px 4px 1px #eee,5px 4px 1px #ccc, 4px 5px 1px #eee,6px 5px 1px #ccc, 5px 6px 1px #eee,7px 6px 1px #ccc; } |
Free-Learn
جدول مشخصات ویژگی text-shadow در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | دارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.textShadow=”1px 2px 3px #5db616″; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی text-shadow در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| text-shadow | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
text-shadow: H-Shadow V-Shadow Blur Color|none|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی text-shadow در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| H-Shadow | میزان سایه افقی ( ضروری ) ( مقادیر منفی مجاز است ) ( آموزش واحدهای اندازه گیری ) |
| V-Shadow | میزان سایه عمودی ( ضروری ) ( مقادیر منفی مجاز است ) ( آموزش واحدهای اندازه گیری ) |
| Blur | میزان پخش شدن سایه ( اختیاری ) ( آموزش واحدهای اندازه گیری ) |
| Color | رنگ سایه ( اختیاری ) ( آموزش انواع روش های رنگدهی ) |
| none | مقدار پیش فرض – هیچ سایه ای بروی متن ایجاد نمیشود |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- استفاده از مقادیر منفی در این ویژگی مجاز می باشد، یک مقدار منفی سایه افقی را به سمت چپ میکشد و سایه عمودی را به سمت بالا.
- میتوان از چندین سایه بروی یک عنصر استفاده کرد، برای استفاده همزمان از چندین سایه باید سایه هارو با کاما ( , ) از همدیگر جدا کنید.
