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

Main Page Tutorial
موارد آموزشی
CSS پیشرفته
۱	گوشه‌های گرد
۲	کادر تصاویر
۳	پس‌زمینه‌ها
۴	رنگ‌ها
۵	Gradientها
۶	سایه‌ها
۷	افکت‌های متن
۸	قلم‌های وب
۹	2D Transforms
۱۰	3D Transforms
۱۱	Transitions
۱۲	انیمیشن‌ها
۱۳	Tooltip
۱۴	استایل‌دهی تصاویر
۱۵	ویژگی object-fit
۱۶	دکمه‌ها
۱۷	مثال‌های صفحه‌بندی (Pagination)
۱۸	ستون‌های متعدد
۱۹	رابط کاربری
۲۰	متغیرها
۲۱	Box Sizing
۲۲	Flexbox
۲۳	Media Queries
۲۴	مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

سایهٔ جعبه

نشانه‌گر موس را روی من قرار دهید!

حالت های سایه در 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;
}

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

سایه های گوناگون

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

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

مثال

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

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

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

مثال

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

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

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

مثال

1 h1 {
2   color: yellow;
3   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
4 }

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

[[رده:]]

ویژگی 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، برای ساخت یک جلوه جذاب اضافه کنید:

مثال

 1 #boxshadow {
 2   position: relative;
 3   box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
 4   padding: 10px;
 5   background: white;
 6 }
 7 
 8 #boxshadow img {
 9   width: 100%;
10   border: 1px solid #8a4419;
11   border-style: inset;
12 }
13 
14 #boxshadow::after {
15   content: '';
16   position: absolute;
17   z-index: -1; /* hide shadow behind image */
18   box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
19   width: 70%;
20   left: 15%; /* one half of the remaining 30% */
21   height: 100px;
22   bottom: 0;
23 }

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

کارت ها

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

مثال

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

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

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

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

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

صفحهٔ بعد»

«صفحهٔ قبل