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

[stralis]

Заходим в шаблон 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

 

[Ronix]

А как сделать чтобы ник тоже так переливалось

 

[Akashi_Wildberries]

Заходим в шаблон 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

@stralis, Всё работает. Спасибо.

 

[stralis]

А как сделать чтобы ник тоже так переливалось

click.

 

[Travma]

можно както баннер сделать по больше?

 

[sanyacoder]

Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.

можно както баннер сделать по больше?

Меняйте эти строчки на сколько вы хотите.

 

[Nesquik XF]

А можно как то поменять форму баннеру не квадратный а к примеру такой

 

['vanik 'parlament]

А можно как то поменять форму баннеру не квадратный а к примеру такойПосмотреть вложение 3054

border-radius: 50px 0 0 50px;

 

[Macalister_Sliv]

я спиздил форум матреш...

 

['vanik 'parlament]

Посмотреть вложение 3081я спиздил форум матреш...

OFFTOP

спасибо за такую важную информацию

 

[grigg]

border-radius: 50px 0 0 50px;

А где эти настройки. В екстра лесс пусто вообще. Стиль другой. А в твоем списке не нашел.

 

[Kolpak]

А где эти настройки. В екстра лесс пусто вообще. Стиль другой. А в твоем списке не нашел.

В код баннера добавить, твой вопрос немного непонятен

 

[grigg]

В код баннера добавить, твой вопрос немного непонятен

спс я просто новичок

 

[Fernando]

А как сделать сияющий баннер прям как тут?

 

[Kolpak]

А как сделать сияющий баннер прям как тут?

Анимированный баннер с эффектом.

Заходим в шаблоны стиля - extra.less Вставляем код: .userBannerLight, .userBanner--adminsforum{ display: inline-block; text-align: center; font-size: .7em; padding: .7em 1em; font-weight: 600; color: #fff; background: #FF0000; text-transform: uppercase...

pawno-help.ru