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

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

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

Зарегистрироваться!
вернулся или нет
Профессионал
Регистрация
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 · Просмотры: 307
Пользователь
Регистрация
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
Сообщения
1,028
А как сделать сияющий баннер прям как тут?
 
Пользователь
Регистрация
13 Авг 2025
Сообщения
25
А как поменять цвет с красного на другой?
 
Заблокированный
Регистрация
3 Янв 2025
Сообщения
1,116
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
А как поменять цвет с красного на другой?
background меняете на свой
 
Пользователь
Регистрация
13 Авг 2025
Сообщения
25
Оно тогда меняет цвет и на другой роле
 
Заблокированный
Регистрация
3 Янв 2025
Сообщения
1,116
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Оно тогда меняет цвет и на другой роле
так меняйте на той роле которой вам нужно
 
Сверху