ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивый эффект обводки каркаса на CSS

Красивый эффект обводки каркаса на CSS

В данной теме подробно рассмотрим как можно при помощи CSS сделать красивую градиентную обводку каркас или блога на сайте, что идет под темный формат. Можно сказать, что это очередной эффект, который очень красиво смотрится с помощью CSS, но здесь также задействован hover эффект при наведении. А значит по умолчанию мы будим видите простой стиль блока, но при наведении курсора мыши появляется сама обводка, которая ярко переливается, и по центру мы наблюдаем название.

И здесь повторюсь, что все это прекрасно будет смотреться на темном формате сайта или блога. Где вы самостоятельно можете сменить оттенок, но и при небольшом экране, то здесь все корректно подводится под размеры монитора или экранов. Чтоб понять работу, то рекомендую посмотреть в DEMO странице.

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

Установка:

HTML

Код

<div class="dekopsa_lopdtun">
ZORNET.RU
</div>

<a href="ссылка для перехода" target="_blank">ZORNET.RU</a>

CSS

Код

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --card-height: 65vh;
  --card-width: calc(var(--card-height) / 1.5);
}

body {
  min-height: 100vh;
  background: #212534;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  box-sizing: border-box;
}

.dekopsa_lopdtun {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
}

.dekopsa_lopdtun:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}

.dekopsa_lopdtun::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
  var(--rotate)
  , #5ddcff, #3c67e3 43%, #4e00c2);
  position: absolute;
  z-index: -1;
  top: -1%;
  left: -2%;
  animation: spin 2.5s linear infinite;
}

.dekopsa_lopdtun::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
  var(--rotate)
  , #5ddcff, #3c67e3 43%, #4e00c2);
  opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

@keyframes spin {
  0% {
  --rotate: 0deg;
  }
  100% {
  --rotate: 360deg;
  }
}

a {
  color: #212534;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  margin-top: 2rem;
}

Как можно заметить, что все присутствующие здесь эффекты выполнены на чистом CSS, а значит если вам менять цветовую гаму или саму основу, только в стилистике, ведь HTML идет как основа и не более.

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

09 Сентября 2023 Загрузок: 1 Просмотров: 652 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0