Помещение тени на пользовательские блоки div без использования тени - PullRequest
Новая
       0

Помещение тени на пользовательские блоки div без использования тени

0 голосов
/ 27 мая 2020

Моя цель - получить собственные блоки div с закругленными углами внутри и затем поместить на них тени, потому что мы не можем использовать box-shadow. Я уже сделал эту часть (см. Ниже). Проблема в том, что у меня есть некоторые задержки из-за падающих теней, потому что я использую Skrollr (https://github.com/Prinzhorn/skrollr). Есть ли способ воссоздать эти тени на моих пользовательских div без использования падающих теней?

Вы также можете изменить способ, которым я сделал изогнутый угол, если это помогает.

Спасибо за вашу помощь! 

html, body {
    margin: 0;
    padding: 0;
}

.frame {
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
    margin-top: 12rem;
    
}

.tile1 {
    background-image: radial-gradient(circle at 101.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222,184,135, 0) 105px, coral 105px);
    height: 300px;
}

.tile2 {
    background-image: radial-gradient(circle at -1.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222,184,135, 0) 105px, coral 105px);
    height: 300px;
}
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>custom div</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <div class="frame">
                        <div class="tile1"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="frame">
                        <div class="tile2"></div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.5.0.min.js"   integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="   crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>

1 Ответ

1 голос
/ 28 мая 2020

Может быть, использовать псевдоэлемент вместо тени?

выглядит иначе.

см. Ниже 

    html,
    body {
      margin: 0;
      padding: 0;
      height: 200vh;
    }

    .frame {
      margin-top: 12rem;
      width: 500px;
      margin:100px auto;
    }

    .tile1 {
      background-image: radial-gradient(circle at 101.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222, 184, 135, 0) 105px, coral 105px);
      height: 300px;
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
    }

    .tile2 {
      position: relative;
      background-image: radial-gradient(circle at -1.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222, 184, 135, 0) 105px, coral 105px);
      height: 300px;
    }
    .tile2::after {
      content: '';
      z-index: -1;
      top: 0px;
      left: 8px;
      filter: blur(16px);
      position: absolute;
      background-image: radial-gradient(circle at -1.4% 0px, rgba(0, 0, 0, 0) 0, rgb(222, 184, 135, 0) 105px, rgba(0, 0, 0, 1) 105px);
      height: 100%;
      width: 100%;
    }
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>custom div</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6">
                    <div class="frame">
                        <div class="tile1"></div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="frame">
                        <div class="tile2"></div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.5.0.min.js"   integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="   crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...