Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430

XF 2.2 Баннер сияющий

Версия XenForo
2.2.0
Fera

Fera

Участники
Сообщения
92
Решения
4
Реакции
0
Баллы
23
Здравствуйте, кто подскажет как сделать сияющий баннер переливающийся? Я поискал и не нашёл, вот такой
Screenshot_20250601-001906~2.jpg
Вот это белое просто двигается вправо и так кажды раз
 
Решение
Flopper
Вот полный код:
Код: 
.userBanner.test {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: 65%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 6px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background-size: 600% 600%;
    position: relative;
    overflow: hidden;
    animation: AnimBanner 10s ease infinite
}
.userBanner.test:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2.5s infinite
}
@keyframes...
Сортировка по дате Сортировка по голосам
extra.less:

Код: 
.userBanner {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: 65%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 6px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background-size: 600% 600%;
    position: relative;
    overflow: hidden;
    animation: AnimBanner 10s ease infinite
}
.userBanner:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2.5s infinite
}
@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

    100% {
        background-position: 0% 50%
    }
}

Это для всех баннеров, свои добавляй отдельно, советую указывать только цвет баннера и больше ничего, так как параметры уже стоят
 
Последнее редактирование:
Позитивный голос 0 Негативный голос
Flopper написал(а):
extra.less:

Код: 
.userBanner {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: 65%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 6px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background-size: 600% 600%;
    position: relative;
    overflow: hidden;
    animation: AnimBanner 10s ease infinite
}
.userBanner:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2.5s infinite
}
@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

    100% {
        background-position: 0% 50%
    }
}

Это для всех баннеров, свои добавляй отдельно, советую указывать только цвет баннера и больше ничего, так как параметры уже стоят
Нажмите для раскрытия...
Изменил
 
Позитивный голос 0 Негативный голос
Flopper написал(а):
extra.less:

Код: 
.userBanner {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: 65%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 6px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background-size: 600% 600%;
    position: relative;
    overflow: hidden;
    animation: AnimBanner 10s ease infinite
}
.userBanner:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2.5s infinite
}
@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

    100% {
        background-position: 0% 50%
    }
}

Это для всех баннеров, свои добавляй отдельно, советую указывать только цвет баннера и больше ничего, так как параметры уже стоят
Нажмите для раскрытия...
А как сделать чтоб не для всех было
 
Позитивный голос 0 Негативный голос
Fera написал(а):
А как сделать чтоб не для всех было
Нажмите для раскрытия...
Код: 
.userBanner.test {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: 65%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 6px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background-size: 600% 600%;
    position: relative;
    overflow: hidden;
    animation: AnimBanner 10s ease infinite
}
.userBanner.test:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2.5s infinite
}
@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

    100% {
        background-position: 0% 50%
    }
}

Где test, пишешь любое название, можешь оставить так. Потом заходишь в группу пользователя которая нужна и тут пишешь "test":
изображение_2025-06-01_003120256.png
 
Позитивный голос 0 Негативный голос
Flopper написал(а):
Код: 
.userBanner.test {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: 65%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 6px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background-size: 600% 600%;
    position: relative;
    overflow: hidden;
    animation: AnimBanner 10s ease infinite
}
.userBanner.test:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2.5s infinite
}
@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

    100% {
        background-position: 0% 50%
    }
}

Где test, пишешь любое название, можешь оставить так. Потом заходишь в группу пользователя которая нужна и тут пишешь "test":
Посмотреть вложение 158325
Нажмите для раскрытия...
Я что-то не догоняю, сделал все как сказано но у меня там просто жирным написан текст баннера без краски и переливания
 
Последнее редактирование:
Позитивный голос 0 Негативный голос
Позитивный голос 0 Негативный голос
Вот полный код:
Код: 
.userBanner.test {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: 65%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 6px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background-size: 600% 600%;
    position: relative;
    overflow: hidden;
    animation: AnimBanner 10s ease infinite
}
.userBanner.test:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2.5s infinite
}
@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

    100% {
        background-position: 0% 50%
    }
}
@keyframes light {
    0% {
        left: -80%
    }

    100% {
        left: 80%
    }
}
.userBanner.test {
    background-image: linear-gradient(80deg, #9a36b3, #9a36b3)
}
 
Позитивный голос 0 Негативный голос
Решение
Flopper написал(а):
Вот полный код:
Код: 
.userBanner.test {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: 65%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 6px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background-size: 600% 600%;
    position: relative;
    overflow: hidden;
    animation: AnimBanner 10s ease infinite
}
.userBanner.test:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2.5s infinite
}
@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

    100% {
        background-position: 0% 50%
    }
}
@keyframes light {
    0% {
        left: -80%
    }

    100% {
        left: 80%
    }
}
.userBanner.test {
    background-image: linear-gradient(80deg, #9a36b3, #9a36b3)
}
Нажмите для раскрытия...
Спасибо большое, только вот ещё 2 вопроса
Как сделать чтоб текст баннера был по середине и не капсом? Я подредактировал но не нашел
 
Позитивный голос 0 Негативный голос
Fera написал(а):
Спасибо большое, только вот ещё 2 вопроса
Как сделать чтоб текст баннера был по середине и не капсом? Я подредактировал но не нашел
Нажмите для раскрытия...
Капс:
text-transform: none;
Текст:
text-align: left, right, center (полноту информации ищи в интернете)
Эти параметры заменять в баннере
 
Позитивный голос 0 Негативный голос
Войдите или зарегистрируйтесь для ответа.
Современный облачный хостинг провайдер | Aéza
Контакты
ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430 г. Краснодар, ул. Маяковского 160, офис 2.4

Похожие темы

Xayrush_11
  • Вопрос
XF 2.2 Как сделать радужно переливающийся баннеры
2
Ответы
21
Просмотры
1K
Skaiman
Skaiman
K
  • Вопрос
XF 2.2 как сделать баннер
Ответы
3
Просмотры
390
molfar
M
Vadimka1116
  • Вопрос
XF 2.2 Баннер с логотипом
Ответы
11
Просмотры
693
Skaiman
Skaiman
Vadimka1116
  • Вопрос
XF 2.2 Баннер с своим логитипом
Ответы
4
Просмотры
533
Skaiman
Skaiman
Mirzaev2301
  • Вопрос
XF 2.2 Как добавить цвет баннера
Ответы
8
Просмотры
570
Atikin
Atikin
Назад
Сверху Снизу