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

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
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 یک یا چند سایه به متن اضافه می‌کند


منابع آموزشی