Анимированный градиентный баннер.

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
вернулся или нет
Профессионал
Регистрация
25 Фев 2023
Сообщения
160
Заходим в шаблон extra.less Вашего стиля.
Вставляем код:

Код:
.userBanner {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 65%;
    padding: 3px 6px;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    &.userBanner--staff {
        color: #fff;
        border: none;   
        background: linear-gradient(270deg, #00b9ff, #d104ff, #2800ff);
        background-size: 900% 900%;
    }
    &.admin {
        background-image: linear-gradient(270deg, #ff0000, #dc00ff, #ff9400);
    }
    &.moder {
        background-image: linear-gradient(270deg, #01a72c, #df841a, #468153);
    }
    &.user {
        background-image: linear-gradient(270deg, #878a88, #7b73a5, #648981);
    }
}

@keyframes AnimBanner {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
Заходим в настройку группы, тем которым хотите выдать градиентный баннер.
Вписывайте в "CSS-класс":
Код:
userBanner admin

giphy.gif
 

Вложения

  • 1678540360723.png
    1678540360723.png
    5.1 KB · Просмотры: 299
Пользователь
Регистрация
28 Июл 2024
Сообщения
2
А как сделать чтобы ник тоже так переливалось
 
Пользователь
Регистрация
31 Июл 2024
Сообщения
103
Заходим в шаблон extra.less Вашего стиля.
Вставляем код:

Код:
.userBanner {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 65%;
    padding: 3px 6px;
    background-size: 600% 600%;
    animation: AnimBanner 10s ease infinite;
    &.userBanner--staff {
        color: #fff;
        border: none;  
        background: linear-gradient(270deg, #00b9ff, #d104ff, #2800ff);
        background-size: 900% 900%;
    }
    &.admin {
        background-image: linear-gradient(270deg, #ff0000, #dc00ff, #ff9400);
    }
    &.moder {
        background-image: linear-gradient(270deg, #01a72c, #df841a, #468153);
    }
    &.user {
        background-image: linear-gradient(270deg, #878a88, #7b73a5, #648981);
    }
}

@keyframes AnimBanner {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
Заходим в настройку группы, тем которым хотите выдать градиентный баннер.
Вписывайте в "CSS-класс":
Код:
userBanner admin

giphy.gif
@stralis, Всё работает. Спасибо.
 
Пользователь
Регистрация
22 Сен 2024
Сообщения
96
можно както баннер сделать по больше?
 
Заблокированный
Регистрация
2 Дек 2023
Сообщения
286
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
можно както баннер сделать по больше?
1727097190280.png

Меняйте эти строчки на сколько вы хотите.
 
Пользователь
Регистрация
1 Май 2024
Сообщения
68
2.14. Запрещено флудить, оффтопить, заниматься флеймом.
1730291929852.pngя спиздил форум матреш...
 
Пользователь
Регистрация
14 Июл 2024
Сообщения
1
А как сделать сияющий баннер прям как тут?
 
Команда форума
Модератор
Регистрация
4 Ноя 2024
Сообщения
991
А как сделать сияющий баннер прям как тут?
 
Пользователь
Регистрация
13 Авг 2025
Сообщения
22
А как поменять цвет с красного на другой?
 
Пользователь
Регистрация
13 Авг 2025
Сообщения
22
Оно тогда меняет цвет и на другой роле
 
Сверху