ساخت ابر در css-html

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

استفاده از مدیا کوئری – media only

در این ویدئو میخواهیم توسط box-shadow در html-css یک ابر بسازیم، و در نهایت توسط یک تکه کد جی کوئری ، قابلت جابجایی را به آنها بدهیم. با ما همراه باشید.

مطالبی که در این ویدئو خواهید آموخت

استفاده از border-radius جهت گرد کردن مربع و تبدیل آن به دایره
ساخت چندین سایه گرد و ایجاد سایه برای آنها
افزودن قابلیت جابجایی به ابرهای ایجاد شده
استفاده از اسکریپت کوتاه جی کوئری

کدهای فایل 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"> -->
    <link rel="stylesheet" href="box-shadow.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $(function () {
            $(".squar1").draggable();
        });
    </script>
</head>

<body>
    <div class="squar1"></div>
    <div class="squar1"></div>
    <div class="squar1"></div>
    <div class="squar1"></div>  
</body>
</html>

کدهای استایل دهی استفاده شده

body{
    background-color: skyblue;
}

.squar1{

    width: 100px;
    height: 100px;
    background-color: white;
    margin: 200px auto;
    border-radius: 50%;

    box-shadow: 0 10px 5px -7px gray,
    
    76px 1px 0 -3px #fff,
    79px 4px 5px -5px #666,

    -76px 10px 0 -3px #fff,
    -79px 14px 5px -5px #666,

    -30px -50px 0 10px #fff,
    -33px -54px 5px 7px #666,


    56px -44px 0 -20px #fff,
    58px -47px 5px -21px #666;
}

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

استفاده از مدیا کوئری – media only

arashwand

دیدگاهتان را بنویسید لغو پاسخ