سایه در css | آموزش نحوه ایجاد سایه و معرفی انواع shadow در css3

shadow یا سایه در css

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

text-shadow
box-shadow

خاصیت text-shadow

خاصیت text-shadow به متن ها سایه اضافه می کند و حالت های مختلفی دارد اما در ساده ترین حالت آن باید یک سایه ی افقی و یک سایه ی عمودی تعیین کنید. من این کار را برایتان انجام داده ام و به سایه های افقی و عمودی 2 پیکسل داده ام:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

<p dir='rtl'><b>هشدار:</b>Internet Explorer 9 و نسخه های قبل تر آن از قابلیت سایه پشتیبانی نمی کنند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا می توانیم کد را کمی پیشرفته تر کنیم و به سایه رنگ بدهیم:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

<p dir='rtl'><b>هشدار:</b>Internet Explorer 9 و نسخه های قبل تر آن از قابلیت سایه پشتیبانی نمی کنند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همچنین می توانیم یک حالت تار بودن و پخش شدگی به سایه بدهیم:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

<p dir='rtl'><b>هشدار:</b>Internet Explorer 9 و نسخه های قبل تر آن از قابلیت سایه پشتیبانی نمی کنند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

میتوان متن را سفید کرد تا سایه ی سیاهی پشت آن ایجاد کرده تا افکت شیشه مانندی به خود بگیرد:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

<p dir='rtl'><b>هشدار:</b>Internet Explorer 9 و نسخه های قبل تر آن از قابلیت سایه پشتیبانی نمی کنند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

و یا اینکه مانند چراغ های نئون یک رنگ را دور و پشت کل متن ایجاد کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

<p dir='rtl'><b>هشدار:</b>Internet Explorer 9 و نسخه های قبل تر آن از قابلیت سایه پشتیبانی نمی کنند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

سایه های چند لایه

اگر می خواهید چندین سایه را به یک عنصر اضافه کنید، می توانید از علامت ویرگول استفاده کنید. به طور مثال در کد زیر یک رنگ آبی و یک رنگ قرمز را به صورت نئونی به متن خود اضافه کرده ایم که باعث ایجاد رنگ بنفش شده است:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

<p dir='rtl'><b>هشدار:</b>Internet Explorer 9 و نسخه های قبل تر آن از قابلیت سایه پشتیبانی نمی کنند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

<p dir='rtl'><b>هشدار:</b>Internet Explorer 9 و نسخه های قبل تر آن از قابلیت سایه پشتیبانی نمی کنند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همچنین می توانید پخش شدگی سایه را ایجاد نکنید و در عوض آن را آنقدر فشرده کنید که در ظاهر تبدیل به یک border شود:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: yellow;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
</style>
</head>
<body>

<h1>Border around text!</h1>

<p dir='rtl'><b>هشدار:</b>Internet Explorer 9 و نسخه های قبل تر آن از قابلیت سایه پشتیبانی نمی کنند.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

هشدار: Internet Explorer 9 و نسخه های قبل تر آن از قابلیت سایه در متون (یعنی text-shadow) پشتیبانی نمی کنند.

خصوصیت box-shadow

خصوصیت box-shadow به عناصر (و نه متن ها) سایه اضافه می کند. ساده ترین حالت استفاده از آن این است که سایه های افقی و عمودی را برایش تعیین کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا می توانیم به سایه رنگ بدهیم:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px grey;
}
</style>
</head>
<body>

<div>This is a div element with a box-shadow</div>

</body>
</html>

مشاهده ی خروجی در JSBin

و حالت تار بودن و پخش شدگی را نیز اضافه می کنیم:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>

<div>This is a div element with a box-shadow</div>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا اگر این سایه را با استفاده از شبه عناصر before:: و after:: به عنصری اضافه کنیم، افکت جالبی ایجاد می شود:

<!DOCTYPE html>
<html>
<head>
<style> 
#boxshadow {
  position: relative;
  -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
  -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  padding: 10px;
  background: white;
}

/* Make the image fit the box */
#boxshadow img {
  width: 100%;
  border: 1px solid #8a4419;
  border-style: inset;
}

#boxshadow::after {
  content: '';
  position: absolute;
  z-index: -1; /* hide shadow behind image */
  -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
  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;
}
</style>
</head>
<body>

<div id="boxshadow">
  <img src="https://www.w3schools.com/css/rock600x400.jpg" alt="Norway" width="600" height="400">
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

همچنین قابلیت ایجاد عناصری به شکل کارت را هم داریم:

<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
  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;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h2>Polaroid Images / Cards</h2>

<p>The box-shadow property can be used to create paper-like cards:</p>

<div class="polaroid">
  <img src="https://www.w3schools.com/css/rock600x400.jpg" alt="Norway" style="width:100%">
  <div class="container">
    <p>Hardanger, Norway</p>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ولی زیباترین حالت سایه ها را می توان در دکمه ها (button) پیدا کرد. به کد زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
}

.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  width: 140px;
  height: 45px;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

.button:hover {
  background-color: #2EE59D;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}
</style>
</head>
<body>

<div class="wrap">
  <button class="button">Submit</button>
</div>
  
</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال علاوه بر بالا بردن دکمه هنگام hover شدن، یک سایه ی سبز نیز به آن اضافه می شود تا به چشم ما اینطور دیده شود که رنگ سبزِ دکمه، محیط اطراف را نیز سبز می کند!

سایه ها (shadows) در زبان CSS

shadow یا سایه در css

خاصیت text-shadow

سایه های چند لایه

خصوصیت box-shadow