آموزش CSS - سایه(shadow)

امکان اضافه کردن سایه به متن یا المان‌ها در CSS3 پشتیبانی می‌شود. ویژگی سایه به دو دسته زیر تقسیم می‌شود:

سایه متن (Text shadow)
سایه جعبه (Box shadow)

سایه متن (Text shadow)

در CSS3 امکان افزودن افکت سایه به متن وجود دارد. مثال زیر نحوه اضافه کردن افکت سایه به متن را نشان می‌دهد:


<html>
   <head>
      <style>
         h1 {
            text-shadow: 2px 2px;
         }
         h2 {
            text-shadow: 2px 2px red;
         }
         h3 {
            text-shadow: 2px 2px 5px red;
         }
         h4 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
         }
         h5 {
            text-shadow: 0 0 3px #FF0000;
         }
         h6 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
         }
         p {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
         }
      </style>
   </head>

   <body>
      <h1>example.com</h1>
      <h2>example.com</h2>
      <h3>example.com</h3>
      <h4>example.com</h4>
      <h5>example.com</h5>
      <h6>example.com</h6>
      <p>example.com</p>
   </body>
</html>

سایه جعبه (box shadow)

برای افزودن افکت سایه به المان‌ها استفاده می‌شود. مثال زیر نحوه اضافه کردن افکت سایه به المان را نشان می‌دهد:


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

   <body>
      <div>این یک عنصر div با یک   box-shadow است</div>
   </body>
</html>

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

گرادیانت‌ - درس قبلی

درس بعدی - فونت های وب (Web Fonts)