CSS – افکت‌های سایه (Shadow Effects)

با CSS می‌توانید به متن‌ها و عناصر سایه اضافه کنید. دو ویژگی اصلی برای ایجاد سایه‌ها در CSS عبارتند از: text-shadow و box-shadow.

سایه متن (Text Shadow)

ویژگی text-shadow در CSS به متن‌ها سایه اضافه می‌کند. به صورت ساده، شما تنها باید سایه افقی و عمودی را مشخص کنید.

مثال ساده:

در این مثال، سایه‌ای با افست ۲ پیکسل به سمت راست و ۲ پیکسل به سمت پایین اعمال شده است:

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

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

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

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

افزودن افکت بلور به سایه

با افزودن یک مقدار برای بلور، سایه می‌تواند محو شود:

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

سایه سیاه برای متن سفید

این مثال سایه‌ای سیاه برای متنی سفید رنگ ایجاد می‌کند:

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

سایه نئون قرمز

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

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

سایه‌های چندگانه

شما می‌توانید بیش از یک سایه به متن اضافه کنید. برای این کار، از لیست سایه‌های جدا شده با کاما استفاده می‌کنید.

سایه‌های نئون قرمز و آبی:

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

سایه‌های چند رنگ

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

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

ایجاد حاشیه برای متن بدون سایه

با استفاده از ویژگی text-shadow می‌توانید بدون ایجاد سایه، یک حاشیه ساده به متن اضافه کنید:

h1 {
  color: coral;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

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

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