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;
}

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

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