ایجاد سایه در css توسط box-shadow

در این ویدئو میخواهیم در محیط Html به کمک Css برای اشیائ موجود در صفحه، سایه ایجاد کنیم.

مواردی که در این ویدئو آموزش داده شده است :

  • ایجاد سایه توسط box-shadow
  • حرکت سایه در محور افقی و عمودی یا به عبارتی x – y
  • تعین فاصله سایه از شیئ مورد نظر
  • تعیین مقدار محو شوندگی یا پخش شدن سایه ایجاد شده
  • تعین رنگ سایه
  • تعین اندازه سایه، یعنی سایه ایجاد شده از شیئ اصلی بزرگتر باشد و یا کوچکتر باشد
  • و در نهایت ایجاد سایه در زوایای مختلف جهت تسلط به سایه و دو تمرین خواهیم داشت که انتظار میره شما بعد از دیدن این آموزش از عهده آن بر بیایید.

بدنه فایل Html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="box-shadow-style.css">     
</head>
<body>
    <div class="squar1"></div>
</body>
</html>

استایل استفاده شده در این ویدئو

.squar1{
    margin: 200px auto;
    width: 100px;
    height: 100px;
    background-color: red;

    box-shadow: 0px 110px 5px -20px #666, 
    110px 0px 5px -20px #666,
    0px -110px 5px -20px #666,
    -110px 0px 5px -20px #666,

    110px 110px 5px -20px #666,
   inset 0 0 5px 10px blue;
}

مطالب مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

6 + 9 =