- سوالی دارید ؟
- 9113530397
- [email protected]
ایجاد سایه در css توسط box-shadow
کار با فایلهای فشرده – ZIP – RAR
مارس 4, 2020ساخت ابر در css-html
مارس 11, 2020در این ویدئو میخواهیم در محیط 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;
}
