آموزش افکت های سایه در CSS

با استفاده از CSS می توانیم به متن ها و به عناصر سایه(shadow) اضافه کنیم.در این مقاله، در مورد ویژگی های زیر نکاتی را خواهید آموخت:

1. text-shadow
2. box-shadow

ایجاد سایه برای متن در CSS

با استفاده از ویژگی text-shadow می توانیم به یک متن، سایه اضافه کنیم. در ساده ترین حالت، می توانیم به مقدار 2px سایه  افقی(horizontal) و به مقدار 2px سایه ی عمودی(vertical) ایجاد کنیم، مانند زیر:

آموزش افکت سایه برای متن

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 برای ایجاد یک کادر(border) ساده به دور یک متن(بدون سایه)، استفاده کنیم:

آموزش افکت سایه برای متن

h1 {
  color: coral;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}