Иногда попадаются вопросы с названием, это как создать динамическую, плюс адаптивную тень с помощью CSS. Давайте разберемся, как все можно сделать, так, чтоб все выглядело красиво. И здесь к заданному элементу, который находится на странице, то есть предложение задействовать фильтры для получения разнообразных и оригинальных эффектов.
Создает тень, подобную box-shadow - но основанную на цветах самого элемента.
HTML
Код
<div class="darmotikop-kadevunag"></div>
CSS
Код
.darmotikop-kadevunag {
position: relative;
width: 9rem;
height: 9rem;
background: linear-gradient(75deg, #4c54b3, #1effc0);
z-index: 1;
}
.darmotikop-kadevunag::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
top: 0.5rem;
filter: blur(0.4rem);
opacity: 0.8;
z-index: -1;
}
Вот и вся установка, далее самостоятельно оформление можно продолжать.
Демонстрация
Второй вариант:
Здесь также задействуем курсор, где при наведение появится эффект.
HTML
Код
<div class="betasdexadun">
<div class="mugsaged-esunipkas"> </div>
<div class="ksavet-upikol-asdulen"></div>
</div>
CSS
Код
.betasdexadun {
position: relative;
height: 285px;
width: 285px;
margin: 30px auto;
cursor:pointer
}
.betasdexadun:hover .ksavet-upikol-asdulen {
opacity: 1;
}
.mugsaged-esunipkas,
.ksavet-upikol-asdulen {
height: 100%;
width: 100%;
border-radius: 23px;
background-image: linear-gradient(rgb(70, 159, 241) 25%, rgb(243, 214, 24) 100%);
}
.ksavet-upikol-asdulen {
filter: blur(20px);
margin-top: -300px;
opacity: 0;
transition: opacity 0.5s;
}
На этом установка завершена.
Объяснение:
position: на элементе устанавливает декартовой контекст позиционирования для элементов.
z-index: 1 устанавливает новый контекст стека.
::after: определяет псевдоэлемент.
position: извлекает элемент из потока документа и размещает его по отношению к родительскому элементу.
width: 100% И height: 100%: размеры псевдоэлемента, чтобы заполнить размеры его родителя, делая его равным по размеру.
background: inherit: заставляет псевдоэлемент наследовать линейный градиент, указанный на элементе.
top: 0.5rem: смещает псевдоэлемент немного вниз от его родителя.
filter: blur(0.4rem): размыт псевдоэлемент, чтобы создать видимость тени снизу.
opacity: 0.7: делает псевдоэлемент частично прозрачным.
z-index: -1: размещает псевдоэлемент позади родителя, но перед фоном.
Поддержка браузера: 94,2%
Демонстрация
