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

کار با فایلهای فشرده – ZIP – RAR
اسفند ۲۱, ۱۳۹۸
ساخت ابر در css-html
اسفند ۲۱, ۱۳۹۸

در این ویدئو میخواهیم در محیط 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;
}

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

نشانی ایمیل شما منتشر نخواهد شد.

تماس با ما