اعمال سایه به عناصر در CSS

یکی دیگر از افکت های پر استفاده، اعمال shadow (سایه) برای عناصر و متن ها می باشد که توسط دو دستور زیر قابل استفاده می باشد.

Box shadow

از این خاصیت برای اعمال سایه به عناصری مانند div یا img ها می توان استفاده نمود. در ساده ترین حالت استفاده از آن می توان سه پارامتر را برای این استایل اعمال نمود که به ترتیب فاصله از چپ، فاصله از بالا و رنگ سایه می باشد.

box-shadow: 10px 10px navy;

مثال: کادری با عرض 400 و ارتفاع 300 پیکسل طراحی ایجاد کرده و سایه ای بنفش به آن اعمال کنید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      #box {
        width: 400px;
        height: 300px;
        background-color: brown;
        box-shadow: 20px 20px purple;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

در صورتیکه قصد داشته باشید سایه اعمال شده حالت بلورین داشته باشد می توانید برای پارامتر سوم میزان بلور شدن را بر اساس پیکسل تعیین نموده و از پارامتر چهارم برای رنگ استفاده نمایید.

box-shadow: 20px 20px 40px purple;

مثال: کادری با عرض و ارتفاع 300 پیکسل طراحی کنید بطوریکه که با انتقال ماوس بر روی کادر، سایه محو آبی رنگی برای آن نمایش داده شود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      #box {
        width: 400px;
        height: 300px;
        border-radius: 10px;
        background-color: orange;
      }
      #box:hover{
        box-shadow: 0px 0px 10px blue;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

Text shadow

تنظیمات این خاصیت همانند box-shadow می باشد با این تفاوت که سایه مورد نظر را بر روی متن اعمال می نماید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      h1{
        text-shadow: 5px 5px 10px purple;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to Beno Academy</h1>
  </body>
</html>

همچنین این قابلیت وجود دارد که بیش از یک shadow برای متن ها تعیین نمایید. بدین منظور تنظیمات مختلف را می توانید با علامت , از یکدیگر تفکیک کنید.

h1{
   color: white;
   text-shadow: 0px 0px 2px black, 0px 0px 5px darkmagenta, 0px 0px 25px blue;
}

در این مثال سه افکت با میزان بلور متفاوت بر روی متن اعمال شده است که جلوه زیبایی به آن می دهد.