تأثیرات سایه CSS

قهوه
Shadows

با استفاده از CSS تأثیرات سایه ایجاد کنید!

بر روی من بالا بیاورید!

تأثیرات سایه CSS

با استفاده از CSS، می‌توانید سایه‌ها را به متن و عناصر اضافه کنید.

در این آموزش، شما خواهید آموخت که چگونه از این ویژگی‌ها استفاده کنید:

  • text-shadow
  • box-shadow

سایه‌های نوشتاری CSS

CSS text-shadow این ویژگی سایه‌ای را به متن اضافه می‌کند.

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

تأثیرات سایه نوشتار!

مثال

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 سیاه، 0 0 25px آبی، 0 0 5px تیره‌آبی;
{}

آزمایش کنید

شما همچنین می‌توانید از ویژگی text-shadow برای ایجاد حاشیه‌های خالص اطراف متن (بدون سایه) استفاده کنید:

حاشیه‌ای دور از متن!

مثال

h1 {
  color: yellow;
  text-shadow: -1px 0 سیاه، 0 1px سیاه، 1px 0 سیاه، 0 -1px سیاه;
{}

آزمایش کنید