• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Динамическая тень для объектов на CSS (Как сделать динамическую и адаптивную тень CSS на сайте)
Динамическая тень для объектов на CSS
Kosten
Дата: Воскресенье, 2019-04-21, 02:26 | Сообщение 1
Администраторы
Сообщений:23569
Награды: 56


Иногда попадаются вопросы с названием, это как создать динамическую, плюс адаптивную тень с помощью 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%

Демонстрация
Прикрепления: 7741252.png(19.7 Kb) · 8597736.png(8.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Динамическая тень для объектов на CSS (Как сделать динамическую и адаптивную тень CSS на сайте)
  • Страница 1 из 1
  • 1
Поиск: