سایه های متنی CSS

با استفاده از ویژگی سایه های متنی CSS ، می توانید سایه سفارشی شده را به متن اضافه کنید:

h1 {
    text-shadow: 3px 3px #42bff4;
}
/* Gives a shadow for h1 header */

با ترکیب چندین انتخابگر ، می توانید همان نوع سایه را به چندین عنصر اضافه کنید:

h1, p, article {
   text-shadow: 4px 10px 8px pink;
}

بررسی خاصیت سایه های متنی CSS

برای افزودن سایه قلم CSS ، باید از دو تا چهار مقدار تعریف کنید:

text-shadow: h-shadow v-shadow blur-radius color؛

در مثال زیر ، می توانید هر چهار مقدار تعریف شده را مشاهده کنید. همه آن ها در بخش زیر به تفصیل توضیح داده خواهد شد:

h1 {    
    text-shadow: 3px 3px 9px #42bff4;
}

مقادیر موجود

	Description	Value
موقعیت سایه متن CSS افقی	Required	Requiredh-shadow
موقعیت سایه متن CSS عمودی	Required	v-shadow
شعاع تاری (0 به طور پیش فرض)	Optional	blur-radius
رنگ سایه متن	Optional	color

توجه داشته باشید که مقادیر عمودی و افقی می توانند منفی باشند:

h1 {
   text-shadow: 4px -10px 8px pink;
}

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

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.