ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированная рамка с градиентом на CSS

Анимированная рамка с градиентом на CSS

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

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

Также остается доступ под редактирование цвета, где существует много анимированных свойств, что используется для градиентов в background-image, где присутствует несколько оттенков.

Первый вариант:

Рамка с CSS градиентом

HTML

Код
<div class="pisodican-gaminas">
  ZORNET.RU<br>
  Сайт вебмастера
</div>

CSS

Код
.pisodican-gaminas {
  font-size: 2.5em;
  width: 9.8em;
  height: 5.9em;
  background-color: #353333;
  border-radius: 0.1em;
  text-align: center;
  line-height: 1.3em;
  font-family: sans-serif;
  position: relative;
  animation: animate_text 3s linear infinite alternate;
}

.pisodican-gaminas::before {
  content: '';
  position: absolute;
  width: calc(100% + 5%);
  height: calc(100% + 7%);
  border-radius: 0.1em;
  z-index: -1;
  background-image: linear-gradient(60deg, #72f5c9, #538bf1, #ecaf14, #f772b4, #f79185, #a8f9a8, #f5bb8b, #fb9efb);
}
  background-size: 300%;
  animation: animate_bg 3s infinite;
}

@keyframes animate_bg {
  0%, 100% {
  background-position: 0%, 50%;
  }

  50% {
  background-position: 100%, 50%;
  }
}

@keyframes animate_text {
  from {
  color: lime;
  }

  to {
  color: yellow;
  }
}

Основные границы не поддерживают фоновую картинку, где как раз будет воспроизводиться анимация.

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

Градиентная анимированная рамка на CSS


Градиентная анимированная рамка с помощью CSS

Второй вариант:

Здесь по конструкций все аналогично первому материалу, только вот под анимацию идет не описание, а как раз стороны, что также выстроенные на цветовой палитре. Все сделана на градиентах и также в стилистике задана скорость. что будет определять смену оттенка. Этим безусловно привлекает, так как здесь все мигает. если поставить на яркую гамму цвета.

HTML

Код
<div class="sardware-sincemid vered">
  <h1>ZorNet - портал</h1>
  <p>Интересные решения вебмастеру для создания</p>
</div>

CSS

Код
.sardware-sincemid {
  font-family: 'Lato';
  color: #f3f3f3;
  padding: 28px;
  text-align: center;
  border-radius: 4px;
  text-shadow: 0 1px 0 #2b2929;
}

.animated-box h1 {
  font-weight: 198;
  font-size: 38px;
  text-transform: uppercase;
}

.sardware-sincemid p {
  font-weight: 200;
}

.sardware-sincemid {
  position: relative;
}

.sardware-sincemid:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  background: linear-gradient(120deg, #1af370, #258af1, #13f36c);
  background-size: 300% 300%;
  clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}

.sardware-sincemid.vered:after {
  animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}

@keyframes gradient-animation {
  0% {
  background-position: 15% 0%;
  }
  50% {
  background-position: 85% 100%;
  }
  100% {
  background-position: 15% 0%;
  }
}

@keyframes frame-enter {
  0% {
  clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
  clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
  clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
  }
  75% {
  -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
  }
  100% {
  -webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
  }
}

Решили изменить по дизайн, то все нужно производить в CSS, который закреплен под оба материала.

Демонстрация
02 Октября 2018 Просмотров: 3446 Комментариев: (15)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 15
noavatar
Qwazor 03 Октября 2018 22:241
0
К сожалению не на всех браузерах работает 53a
Kosten
Kosten 03 Октября 2018 22:312
0
Вероятно наступило, то время, когда нужно обновить браузер. Так как эффекты и анимация на обновленных версиях корректно показывает.
CbIPoK2513
CbIPoK2513 03 Октября 2018 22:473
0
Не вижу смысла сидеть на старых браузерах.

Если бы старые автомобили постоянно обновляли, добавляли им комфорта\скорости, уменьшали кол-во поломок и т.п., Вы бы всё равно катались на старом ведре с дырами в полу?
Kosten
Kosten 03 Октября 2018 23:254
0
CbIPoK2513, сейчас эффекты на материалах, но корректно только можно посмотреть на обновленном браузере. Установлен один старый браузер, и на нем зашел на codepen, и что, больше половины не показывает как нужно.
Kosten
Kosten 04 Октября 2018 21:026
0
Здесь 2 варианта, оба не работает, просто на Осле проверить не могу, глючет не по детски.
noavatar
Qwazor 04 Октября 2018 20:225
0
даже на IE не работает как надо
-SAM-
-SAM- 05 Октября 2018 01:577
+1
Как бы я удивился, если бы иначе было (поскольку IE как раз таки пасёт задних в этом плане, что под него и не работает, как правило, не поддерживается - приходиться навешивать всякого рода только этому браузеру ведомые привязки-префиксы, да "костыли" городить поверх, довеском к другим стилям, что большинство современных и, прямо скажем, более популярных браузеров понимают достаточно давно). В таких случаях говорят, что не кроссбраузерное решение. И когда дело касается отдельно взятых параметров, что есть у других браузерах тоже, но они лишь прописываются иначе (аналоги), допустим, кроссбраузерная пропись border-radius делается достаточно просто, а в случае каких-то анимаций - уже дело хуже обстоит (нужно смотреть все свойства стилей, чтобы установить с какими браузерами контачит, их версии). И опять же, что сделано стилем - это значит на более глобальном уровне идёт, что встроено прямо в браузер (исходя из востребованности такого эффекта), вот и на новые версии браузеров переходить приходиться, чтобы этот функционал заработал... что много лет назад работало лишь подключив библиотеки соответствующие, javascript, то уже сейчас идёт встроено в механизмы обработки страницы, её рендеринг (эти новые стили css, что для более старых браузеров как непонятные).
И правильно сказал, что тут не только сам браузер роль играет, а и его версия - нужно смотреть какие стили понимает, а какие - нет (в консоле браузера, да и htmlbook в помощь); в материале же - кроссбраузерность явно не ставили задачи делать.
na3uTuB4uk
na3uTuB4uk 06 Октября 2018 06:0711
0
Даже разрекламированный Microsoft Edge последней версии не отображает, а вы про IE говорите. Я не понимаю для чего вы пользуетесь IE? Это не браузер, а программа для скачивания браузеров.
Зашел через Яндекс Браузер и все отлично работает, даже Tor Browser на движке Firefox как я понимаю тоже нормально все отображает.
Kosten
Kosten 06 Октября 2018 10:1812
0
Добавить не чего, Осел это прога, для того, чтоб скачать другой браузер и забыть про него как страшный сон.
noavatar
Qwazor 05 Октября 2018 17:258
0
на Google Chrome тоже не работает, версия последняя, если что
Kosten
Kosten 05 Октября 2018 18:549
0
На Хроме все корректно выводит, как первый, так и второй вариант.
na3uTuB4uk
na3uTuB4uk 06 Октября 2018 06:0310
0
У меня тоже все отлично отображается. Яндекс браузер
Koneko
Koneko 06 Октября 2018 10:2713
0
Яндекс.Браузер - еще та машина, которая грузит ваш компьютер в раза 4-5, нежели Google Chrome.
Kosten
Kosten 06 Октября 2018 17:4714
0
Иногда в сеть выхожу на яндекс браузере, это только для ютуба, чтоб можно плеер перенести, не заметил, чтоб сильно грузило.
Kosten
Kosten 09 Октября 2018 00:1915
0
Также этот можно поставить материал, что аналогичен другим, по функциям схожий, где меняются градиенты, а по центру можно ключевое слово написать.



HTML

Код
<div class="seruni-hfgdsa" id="zaruniksa">ZorNet - портал <br>для<br>вебмастера</div>


CSS

Код
#zaruniksa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  color: white;
  font-family: 'Raleway';
  font-size: 2.5rem;
}
.seruni-hfgdsa {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var(--borderWidth);
}
.seruni-hfgdsa:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
  0% {
  background-position: 0% 50%;
  }
  50% {
  background-position: 100% 50%;
  }
  100% {
  background-position: 0% 50%;
  }
}


Демонстрация
Войдите:
avatar