ZorNet.Ru — сайт для вебмастера » HTML и CSS » Подсветка блока при помощи HTML + CSS

Подсветка блока при помощи HTML + CSS

На сайте всегда найдется тема, которую нужно как можно больше внимание уделить, и здесь идет отличное решение с подсветкой блока на чистом CSS. А все заключается в том, что нам нужно выбрать блок или материал, который представлен виде ссылки или кнопки, и на нем разместить подсветку. Которая не только будет освещать, а также заданной скоростью мигать, что пропустить невозможно.

Она больше подходит, как на светлый формат, где оттенок света идет в светло-синей гамме, так и под темный, что также отлично видно. Применение такого эффекта будет не просто отличным, но и смотрится он оригинально от других. Ведь ниже мы изначально расположили прозрачную кнопку, где немного добавили теней, так, чтоб надпись была видна, и вот по этой ссылке можно перейти на заданную страницу.

Аналогичный эффект подсветки на темном фоне:

Установочный процесс:

HTML

Код

<div class="podsvetka_kadas">
  <div class="nomasion_desanid">
  <p class="podsvetka_fona">Здесь идет название с подсветкой <br>
  Как продолжение</p>
  <div class="knopka_perekhoda">Перейти</div>
  </div>
</div>

CSS

Код

body {
  background: #343c50;
  display: flex;
  height: 100vh;
  justify-content: center;
  background: url(Ссылка на фон) no-repeat
  bottom;
  background-size: cover;
}
.nomasion_desanid {
  margin: auto;
  text-align: center;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fffff;
  font-family: 'Neucha', cursive;
  font-size: 25px;
  position: relative;
  width: 500px;
  height: 200px;
}
.nomasion_desanid:after{
  content: '';
  position: absolute;
  z-index: -2;
  left: 0;
  top: 0;
  width: 100%;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 100%;
  opacity: 1;
  border-radius: 60px;
  filter: blur(60px);
  transform: translate3d(0,0,0);
  background: linear-gradient(-134deg,#0083ff 0,#d582ff 100%);
  animation: glow 3s infinite;
}
.knopka_perekhoda {
  background-color: rgba(14, 13, 13, 0.3);
  display: block;
  width: max-content;
  padding: 14px 24px;
  border-radius: 50px;
  cursor: pointer;
  transition: .3s;
  color: #f7eded;
}
.podsvetka_fona {
  font-size: 39px;
}

@keyframes glow {
  0% {
  opacity: 0;
  width: 100%;
  }
  50% {
  opacity: 1;
  width: 50%;
  }
  100% {
  opacity: 0;
  width: 100%;
  }
}

В стилях закреплен background, что в большинстве не нужен, но если, только вы не собрались устанавливать полноценную или вновь созданную страницу.

Демонстрация

09 Ноября 2019 Загрузок: 3 Просмотров: 2508 Комментариев: (2)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 2
Порядок вывода комментариев: ДабстэпшникZVT 11 Ноября 2019 17:42¹ 0 У Яндекса в футере такая фича используется Kosten 11 Ноября 2019 20:30² 0 С большой вероятностью, что эта фича было создана с яндекс, только немного по направлению другому, ближе к теме, что обратите внимание.