Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

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

вернулся или нет
Фев
160
5,801
Профессионал
Заходим в шаблон 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 · Просмотры: 378
Июл
103
123
Пользователь
Заходим в шаблон 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, Всё работает. Спасибо.
 
Дек
286
278
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
можно както баннер сделать по больше?
1727097190280.png

Меняйте эти строчки на сколько вы хотите.
 
Май
68
32
Пользователь
2.14. Запрещено флудить, оффтопить, заниматься флеймом.
1730291929852.pngя спиздил форум матреш...
 
Ноя
1,644
4,328
Команда форума
Администратор
А как сделать сияющий баннер прям как тут?
 
Авг
127
24
Пользователь
А как поменять цвет с красного на другой?
 
Янв
1,412
2,129
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
А как поменять цвет с красного на другой?
background меняете на свой
 
Янв
1,412
2,129
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Оно тогда меняет цвет и на другой роле
так меняйте на той роле которой вам нужно
 
Сверху