CSS – سایه متن (Text Shadow)

ویژگی text-shadow برای افزودن سایه به متن استفاده می‌شود.

مثال ساده سایه متن

در ساده‌ترین حالت، تنها مقدار سایه افقی (2px) و سایه عمودی (2px) را مشخص می‌کنید:

h1 {
  text-shadow: 2px 2px;
}

افزودن رنگ به سایه

می‌توانید به سایه رنگ نیز اضافه کنید، برای مثال رنگ قرمز:

h1 {
  text-shadow: 2px 2px red;
}

افزودن افکت محوشدگی به سایه

برای افزودن افکت محوشدگی به سایه، مقدار محوشدگی (5px) را نیز به ویژگی اضافه کنید:

h1 {
  text-shadow: 2px 2px 5px red;
}

مثال‌های بیشتر از سایه متن

مثال 1: سایه بر روی متن سفید:

h1 {
  color: white;
  text-shadow: 2px 2px 4px 000000;
}

مثال 2: سایه با درخشش نئون قرمز:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

مثال 3: سایه با درخشش نئون قرمز و آبی:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

مثال 4: سایه چندگانه:

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

نکته: برای یادگیری تغییر فونت‌ها، اندازه متن و استایل متن به فصل فونت‌های CSS مراجعه کنید.

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.