Как сделать баннер на GetCourse?

Установим классный баннер на страницу тренингов/подтренингов в GetCourse.

Мы часто в работе применяем баннеры, можно сказать во всех наших проектах они присутствуют, именно поэтому мы решили помочь разнообразить ваш GetCourse и поделиться крутым решением с анимированным фоном.

Установка происходит в несколько кликов, а вам стоит лишь повторить все как в видео и применить у себя.

HTML

<div class="bunner">
  <p>
    Крутой баннер на чистом CSS
    <span>
      Переливается
    </span>
    — И никакого JavaScript —
  </p>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neuton:wght@400&family=Oswald:wght@700&display=swap');

/* Определяем корневые переменные для удобства управления стилями */
:root {
  --font-base: 1em; /* Базовый размер шрифта, используем em для масштабируемости */
  --color-text: rgba(255, 255, 255, 0.25); /* Полупрозрачный белый цвет текста */
  --background-color: #090d00; /* Темный цвет фона */
  --banner-height: 400px; /* Высота баннера */
  --big-font: 700 4em/1 "Oswald", sans-serif; /* Наш большой жирный текст, Oswald можно заменить на свой из Google Fonts */
  --small-font: 400 var(--font-base)/1.5 "Neuton"; /* Наш маленький шрифт */
  --banner-radius: 10px; /* Cкругление углов баннера */
  --animation-background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
}

/* Используем em вместо px для адаптивности */
/* em зависит от родительского элемента, поэтому размеры шрифтов и отступов масштабируются */
.bunner {
  font: var(--small-font); /* Используем относительный размер шрифта для адаптивности */
  background: var(--background-color); /* Цвет фона баннера */
  color: var(--color-text); /* Цвет текста */
  text-align: center; /* Выравнивание текста по центру */
  margin: 0; /* Убираем внешние отступы */
  width: 100%; /* Ширина на всю страницу */
  height: var(--banner-height); /* Высота баннера */
  display: flex; /* Используем flexbox для центрирования */
  align-items: center; /* Выравнивание по вертикали */
  justify-content: center; /* Выравнивание по горизонтали */
  border-radius: var(--banner-radius);
}

.bunner p {
  text-transform: uppercase; /* Преобразование текста в верхний регистр */
  letter-spacing: 0.5em; /* Интервал между буквами */
  display: inline-block; /* Блочный элемент с возможностью настройки размеров */
  border: 4px double var(--color-text); /* Двойная граница */
  border-width: 4px 0; /* Верхняя и нижняя граница */
  padding: 1.5em 0em; /* Внутренние отступы */
  position: relative; /* Позиционирование внутри блока */
  width: 40em; /* Ширина в относительных единицах */
  margin: 0 auto; /* Центрируем по горизонтали */
}

.bunner p span {
  font: var(--big-font); /* Жирный крупный текст */
  letter-spacing: 0; /* Убираем межбуквенное расстояние */
  padding: 0.25em 0 0.325em; /* Внутренние отступы */
  display: block; /* Отображение как блочного элемента */
  margin: 0 auto; /* Центрирование по горизонтали */
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5); /* Тень текста */
  
  /* Clip Background Image */
  background: var(--animation-background); /* Фоновое изображение */
  -webkit-background-clip: text; /* Обрезка фона по тексту */
  background-clip: text; /* Обрезка для других браузеров */
  
  /* Анимируем фоновое изображение */
  -webkit-text-fill-color: transparent; /* Прозрачный текст для отображения фона */
  -webkit-animation: aitf 80s linear infinite; /* Анимация движения фона */
  
  /* Ускоряем обработку для браузера */
  -webkit-transform: translate3d(0, 0, 0); /* Оптимизация рендеринга */
  -webkit-backface-visibility: hidden; /* Улучшение производительности */
}

/* Анимация */
@-webkit-keyframes aitf {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Адаптивный дизайн */
@media (max-width: 1200px) {
  .bunner p { width: 30em; margin: 0 auto; }
  .bunner p span { font-size: 3em; }
}

@media (max-width: 768px) {
  .bunner p { width: 20em; letter-spacing: 0.3em; }
  .bunner p span { font-size: 2.5em; }
}

@media (max-width: 480px) {
  .bunner p { width: 15em; letter-spacing: 0.2em; padding: 1em 0; }
  .bunner p span { font-size: 2em; }
}

Фон для урока для баннера с анимацией