افکت‌های سایه

« صفحهٔ قبل

صفحهٔ بعد »

حالت های سایه در CSS

با CSS می‌توانید سایه (shadow) را به متن و عناصر اضافه کنید.

در این فصل شما در مورد ویژگی‌های زیر را خواهید آموخت:

• text-shadow

• box-shadow

سایه متن در CSS

ویژگی text-shadow سایه را به متن اعمال می‌کند.

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

مثال

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

مشاهدهٔ نتیجه

سپس، یک رنگ به سایه اضافه کنید:

مثال

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

مشاهدهٔ نتیجه

سپس، یک حالت مه آلود (Blur) به سایه اضافه کنید:

مثال

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: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

مشاهدهٔ نتیجه

[[رده:]]

ویژگی box-shadow در CSS

ویژگی box-shadow سایه را به عناصر اعمال می‌کند.

در ساده‌ترین حالت این ویژگی، تنها سایه افقی و عمودی را مشخص می‌کنید:

مثال

div {
  box-shadow: 10px 10px;
}

مشاهدهٔ نتیجه

سپس، یک رنگ به سایه اضافه کنید:

مثال

div {
  box-shadow: 10px 10px grey;
}

مشاهدهٔ نتیجه

سپس، یک افکت blur به سایه اضافه کنید.

مثال

div {
  box-shadow: 10px 10px 5px grey;
}

مشاهدهٔ نتیجه

همچنین می‌توانید سایه‌ها را به شبه عناصر ::before و ::after، برای ساخت یک جلوه جذاب اضافه کنید:

مثال

#boxshadow {
  position: relative;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  padding: 10px;
  background: white;
}

#boxshadow img {
  width: 100%;
  border: 1px solid #8a4419;
  border-style: inset;
}

#boxshadow::after {
  content: '';
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  width: 70%;
  left: 15%; /* one half of the remaining 30% */
  height: 100px;
  bottom: 0;
}

مشاهدهٔ نتیجه

کارت ها

مثالی از استفاده از ویژگی box-shadow برای ساخت کارت هایی شبیه کاغذ:

مثال

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

مشاهدهٔ نتیجه

ویژگی‌های سایه در CSS

جدول زیر ویژگی‌های سایه (shadow) در CSS را لیست می‌کند:

ویژگی	توضیحات
box-shadow	یک یا چند سایه به عنصر اضافه می‌کند
text-shadow	یک یا چند سایه به متن اضافه می‌کند

« صفحهٔ قبل

صفحهٔ بعد »