Баннеры Hype Russia

Alexander_Solovyov · Пятница в 14:44

Дайте такие баннеры с значками.

Форум:http://forum.hype-russia.ru

KeoFox · Пятница в 14:49

RP баннеры групп с логотипом

Моя вариация баннеров на CSS без фотошопа. Во-первых, структура кода сохраняет синтаксис LESS для лучшей работы и удобности. Во-вторых, чистый CSS и не нужно каждый раз закидывать баннер в фотошоп что бы отредактировать логотип или название...

pawno-help.ru

иконка:

background: url(https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg) no-repeat center / 22px, linear-gradient(to top, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0.2) 100%);

Alexander_Solovyov · Пятница в 15:00

KeoFox написал(а):
RP баннеры групп с логотипом

Моя вариация баннеров на CSS без фотошопа. Во-первых, структура кода сохраняет синтаксис LESS для лучшей работы и удобности. Во-вторых, чистый CSS и не нужно каждый раз закидывать баннер в фотошоп что бы отредактировать логотип или название...

pawno-help.ru

иконка:

background: url(https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg) no-repeat center / 22px, linear-gradient(to top, rgba(0, 0, 0, 0.8) 10%, rgba(0, 0, 0, 0.2) 100%);

-

KeoFox · Пятница в 15:01

Alexander_Solovyov написал(а):
-

что "-"?
Ну да, не фулл копия. В целом если пораскинуть руками и чем не будь ещё можно сделать тоже самое используя это за основу.
Что не так?

Alexander_Solovyov · Пятница в 15:02

Alexander_Solovyov написал(а):
Дайте такие баннеры с значками.

Форум:http://forum.hype-russia.ru

Посмотреть вложение 9870

Kolpak

pawno-help.ru

Nikita_FullMaster · Пятница в 16:04

Alexander_Solovyov написал(а):
Kolpak

pawno-help.ru

Щас найду стиль, и посмотрю там лесс, если будет, скину))

Mortis_Panarenka · Пятница в 21:12

Смотри это баннеры crmp.online просто переделать border-radius

Mortis_Panarenka · Пятница в 22:26

вот их extra.less

kod:

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local(''),url('/styles/role-play/fonts/montserrat-400.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-400.woff') format('woff')
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: local(''),url('/styles/role-play/fonts/montserrat-500.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-500.woff') format('woff')
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: local(''),url('/styles/role-play/fonts/montserrat-600.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-600.woff') format('woff')
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local(''),url('/styles/role-play/fonts/montserrat-700.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-700.woff') format('woff')
}

.userBanner {
    text-transform: uppercase;
    font-weight: 800;
    padding: 4px 6px 4px 4px;
    border: 1px solid transparent;
    border-radius: 11px;
    text-align: center;
    display: inline-flex;
    justify-content: space-between;
    background-size: 500% 500%;
    animation: AnimBanner 10s ease infinite;
    align-items: center;
    align-content: center;
    position: relative
}

.userBanner strong {
    font-size: 85%;
    font-family: 'Montserrat',sans-serif;
    font-weight: 800;
    padding-left: 3px;
    line-height: .95;
    text-shadow: 1px 0 1px rgba(0,0,0,0.5),0 1px 1px rgba(0,0,0,0.5),-1px 0 1px rgba(0,0,0,0.5),0 -1px 1px rgba(0,0,0,0.5)
}

.message-userBanner.userBanner {
    display: flex
}

@media (max-width: 750px) {
    .message:not(.message--forceColumns) .message-userTitle,.message:not(.message--forceColumns) .message-userBanner.userBanner {
        display:inline-flex
    }
}

.userBanner.userBanner--staff {
    color: #fff;
    background-color: #5c97bf;
    border: none;
    background: linear-gradient(270deg, #3cfd0f, #fd0fde, #f07c00);
    background-size: 900% 900%
}

.userBanner.userBanner--staff .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--admin {
    color: #fff;
    background-color: #7fff00;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--admin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--stadm {
    color: #fff;
    background-color: #32cd32;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--stadm .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--mladm {
    color: #fff;
    background-color: #0f0;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--mladm .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--newmember {
    color: #fff;
    background-color: #6c7a89;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--newmember .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--verified {
    color: #fff;
    background-color: #446cb3;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--verified .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--proveren {
    color: #fff;
    background-color: #3c7a9c;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--proveren .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--hassle {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #ffd700, #ffa500, #ff8c00)
}

.userBanner.userBanner--hassle .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--black {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #1628ca, #2ad4f6, #185941)
}

.userBanner.userBanner--black .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--sponsor {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #6a5acd, #4b0082, #8a2be2)
}

.userBanner.userBanner--sponsor .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--osnov {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #feea10, #ff931e, #feea10)
}

.userBanner.userBanner--osnov .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--tehh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #ff4500, #b0284d)
}

.userBanner.userBanner--tehh .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--user {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #bcbbbb, #515151)
}

.userBanner.userBanner--user .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--proh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #d600c1, #ba00d6, #9d00d6)
}

.userBanner.userBanner--proh .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--remka {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-color: #009c82
}

.userBanner.userBanner--remka .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--kur {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #f73ee8, #f73ed4)
}

.userBanner.userBanner--kur .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--adm {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #6b8e23, #82f358, #49cc2c)
}

.userBanner.userBanner--adm .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--teh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #ff4500, #b50, #c00)
}

.userBanner.userBanner--teh .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--lider {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #da0, #f08b9a)
}

.userBanner.userBanner--lider .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--soskazgs {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #06f, #ba55d3)
}

.userBanner.userBanner--soskazgs .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--soskags {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #49cc2c, #00ced1)
}

.userBanner.userBanner--soskags .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--Gladmin {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #5ade21, #008000, #5ade21)
}

.userBanner.userBanner--Gladmin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--ZGadmin {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #4bb524, #26e0af, #4bb524)
}

.userBanner.userBanner--ZGadmin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--admforum {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #0ff, #008080, #0ff)
}

.userBanner.userBanner--admforum .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--rykproekta {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #8b006d, #f00)
}

.userBanner.userBanner--rykproekta .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--redadmin {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #b22222, #dc143c, #8b0000)
}

.userBanner.userBanner--redadmin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--razrab {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #f819a7, #4619f8)
}

.userBanner.userBanner--razrab .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--admforum {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #7900ff, #7900ff 0%, #8b00ff 100%);
    background-image: linear-gradient(270deg, #7900ff, #8b00ff)
}

.userBanner.userBanner--admforum .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--super {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00)
}

.userBanner.userBanner--super .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

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


}

kxixidkdhdjdj · Вчера в 23:23

Норм

Drake_Fernando · Сегодня в 03:04

Mortis_Panarenka написал(а):

вот их extra.less

kod:

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local(''),url('/styles/role-play/fonts/montserrat-400.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-400.woff') format('woff')
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: local(''),url('/styles/role-play/fonts/montserrat-500.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-500.woff') format('woff')
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: local(''),url('/styles/role-play/fonts/montserrat-600.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-600.woff') format('woff')
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local(''),url('/styles/role-play/fonts/montserrat-700.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-700.woff') format('woff')
}

.userBanner {
    text-transform: uppercase;
    font-weight: 800;
    padding: 4px 6px 4px 4px;
    border: 1px solid transparent;
    border-radius: 11px;
    text-align: center;
    display: inline-flex;
    justify-content: space-between;
    background-size: 500% 500%;
    animation: AnimBanner 10s ease infinite;
    align-items: center;
    align-content: center;
    position: relative
}

.userBanner strong {
    font-size: 85%;
    font-family: 'Montserrat',sans-serif;
    font-weight: 800;
    padding-left: 3px;
    line-height: .95;
    text-shadow: 1px 0 1px rgba(0,0,0,0.5),0 1px 1px rgba(0,0,0,0.5),-1px 0 1px rgba(0,0,0,0.5),0 -1px 1px rgba(0,0,0,0.5)
}

.message-userBanner.userBanner {
    display: flex
}

@media (max-width: 750px) {
    .message:not(.message--forceColumns) .message-userTitle,.message:not(.message--forceColumns) .message-userBanner.userBanner {
        display:inline-flex
    }
}

.userBanner.userBanner--staff {
    color: #fff;
    background-color: #5c97bf;
    border: none;
    background: linear-gradient(270deg, #3cfd0f, #fd0fde, #f07c00);
    background-size: 900% 900%
}

.userBanner.userBanner--staff .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--admin {
    color: #fff;
    background-color: #7fff00;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--admin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--stadm {
    color: #fff;
    background-color: #32cd32;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--stadm .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--mladm {
    color: #fff;
    background-color: #0f0;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--mladm .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--newmember {
    color: #fff;
    background-color: #6c7a89;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--newmember .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--verified {
    color: #fff;
    background-color: #446cb3;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--verified .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--proveren {
    color: #fff;
    background-color: #3c7a9c;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--proveren .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--hassle {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #ffd700, #ffa500, #ff8c00)
}

.userBanner.userBanner--hassle .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--black {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #1628ca, #2ad4f6, #185941)
}

.userBanner.userBanner--black .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--sponsor {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #6a5acd, #4b0082, #8a2be2)
}

.userBanner.userBanner--sponsor .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--osnov {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #feea10, #ff931e, #feea10)
}

.userBanner.userBanner--osnov .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--tehh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #ff4500, #b0284d)
}

.userBanner.userBanner--tehh .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--user {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #bcbbbb, #515151)
}

.userBanner.userBanner--user .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--proh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #d600c1, #ba00d6, #9d00d6)
}

.userBanner.userBanner--proh .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--remka {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-color: #009c82
}

.userBanner.userBanner--remka .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--kur {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #f73ee8, #f73ed4)
}

.userBanner.userBanner--kur .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--adm {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #6b8e23, #82f358, #49cc2c)
}

.userBanner.userBanner--adm .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--teh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #ff4500, #b50, #c00)
}

.userBanner.userBanner--teh .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--lider {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #da0, #f08b9a)
}

.userBanner.userBanner--lider .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--soskazgs {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #06f, #ba55d3)
}

.userBanner.userBanner--soskazgs .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--soskags {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #49cc2c, #00ced1)
}

.userBanner.userBanner--soskags .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--Gladmin {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #5ade21, #008000, #5ade21)
}

.userBanner.userBanner--Gladmin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--ZGadmin {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #4bb524, #26e0af, #4bb524)
}

.userBanner.userBanner--ZGadmin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--admforum {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #0ff, #008080, #0ff)
}

.userBanner.userBanner--admforum .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--rykproekta {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #8b006d, #f00)
}

.userBanner.userBanner--rykproekta .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--redadmin {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #b22222, #dc143c, #8b0000)
}

.userBanner.userBanner--redadmin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--razrab {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #f819a7, #4619f8)
}

.userBanner.userBanner--razrab .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--admforum {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #7900ff, #7900ff 0%, #8b00ff 100%);
    background-image: linear-gradient(270deg, #7900ff, #8b00ff)
}

.userBanner.userBanner--admforum .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--super {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00)
}

.userBanner.userBanner--super .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

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


}

-

Не работает

KeoFox · Сегодня в 03:24

Так бывает когда звонишь синтаксисам XF и шлёшь их на три буквы.
Пример того почему я делаю less баннеров немного не так если посмотреть отличия как тут и как там.

Может если будет не лень попробую привести эту кашу в порядок

kxixidkdhdjdj · Сегодня в 15:03

CSS:

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local(''),url('/styles/role-play/fonts/montserrat-400.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-400.woff') format('woff')
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: local(''),url('/styles/role-play/fonts/montserrat-500.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-500.woff') format('woff')
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: local(''),url('/styles/role-play/fonts/montserrat-600.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-600.woff') format('woff')
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local(''),url('/styles/role-play/fonts/montserrat-700.woff2') format('woff2'),url('/styles/role-play/fonts/montserrat-700.woff') format('woff')
}

.userBanner {
    text-transform: uppercase;
    font-weight: 800;
    padding: 4px 6px 4px 4px;
    border: 1px solid transparent;
    border-radius: 11px;
    text-align: center;
    display: inline-flex;
    justify-content: space-between;
    background-size: 500% 500%;
    animation: AnimBanner 10s ease infinite;
    align-items: center;
    align-content: center;
    position: relative
}

.userBanner strong {
    font-size: 85%;
    font-family: 'Montserrat',sans-serif;
    font-weight: 800;
    padding-left: 3px;
    line-height: .95;
    text-shadow: 1px 0 1px rgba(0,0,0,0.5),0 1px 1px rgba(0,0,0,0.5),-1px 0 1px rgba(0,0,0,0.5),0 -1px 1px rgba(0,0,0,0.5)
}

.message-userBanner.userBanner {
    display: flex
}

@media (max-width: 750px) {
    .message:not(.message--forceColumns) .message-userTitle,.message:not(.message--forceColumns) .message-userBanner.userBanner {
        display:inline-flex
    }
}

.userBanner.userBanner--staff {
    color: #fff;
    background-color: #5c97bf;
    border: none;
    background: linear-gradient(270deg, #3cfd0f, #fd0fde, #f07c00);
    background-size: 900% 900%
}

.userBanner.userBanner--staff .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--admin {
    color: #fff;
    background-color: #7fff00;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--admin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--stadm {
    color: #fff;
    background-color: #32cd32;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--stadm .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--mladm {
    color: #fff;
    background-color: #0f0;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--mladm .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--newmember {
    color: #fff;
    background-color: #6c7a89;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--newmember .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--verified {
    color: #fff;
    background-color: #446cb3;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--verified .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--proveren {
    color: #fff;
    background-color: #3c7a9c;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.userBanner--proveren .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--hassle {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #ffd700, #ffa500, #ff8c00)
}

.userBanner.userBanner--hassle .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--black {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #1628ca, #2ad4f6, #185941)
}

.userBanner.userBanner--black .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--sponsor {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #6a5acd, #4b0082, #8a2be2)
}

.userBanner.userBanner--sponsor .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--osnov {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #feea10, #ff931e, #feea10)
}

.userBanner.userBanner--osnov .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--tehh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #ff4500, #b0284d)
}

.userBanner.userBanner--tehh .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--user {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #bcbbbb, #515151)
}

.userBanner.userBanner--user .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--proh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #d600c1, #ba00d6, #9d00d6)
}

.userBanner.userBanner--proh .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--remka {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-color: #009c82
}

.userBanner.userBanner--remka .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--kur {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #f73ee8, #f73ed4)
}

.userBanner.userBanner--kur .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--adm {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #6b8e23, #82f358, #49cc2c)
}

.userBanner.userBanner--adm .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--teh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #ff4500, #b50, #c00)
}

.userBanner.userBanner--teh .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--lider {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #da0, #f08b9a)
}

.userBanner.userBanner--lider .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--soskazgs {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #06f, #ba55d3)
}

.userBanner.userBanner--soskazgs .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--soskags {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #49cc2c, #00ced1)
}

.userBanner.userBanner--soskags .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--Gladmin {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #5ade21, #008000, #5ade21)
}

.userBanner.userBanner--Gladmin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--ZGadmin {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #4bb524, #26e0af, #4bb524)
}

.userBanner.userBanner--ZGadmin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--admforum {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #0ff, #008080, #0ff)
}

.userBanner.userBanner--admforum .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--rykproekta {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #8b006d, #f00)
}

.userBanner.userBanner--rykproekta .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--redadmin {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #b22222, #dc143c, #8b0000)
}

.userBanner.userBanner--redadmin .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--razrab {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #f819a7, #4619f8)
}

.userBanner.userBanner--razrab .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--admforum {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #7900ff, #7900ff 0%, #8b00ff 100%);
    background-image: linear-gradient(270deg, #7900ff, #8b00ff)
}

.userBanner.userBanner--admforum .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.userBanner--super {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00)
}

.userBanner.userBanner--super .userBanner-before:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

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


}

KeoFox · Сегодня в 15:03

CSS:

@keyframes normativeAnim {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

.userBanner {
    text-transform: uppercase;
    font-weight: 800;
    padding: 4px 6px 4px 4px;
    border: 1px solid transparent;
    border-radius: 11px;
    text-align: center;
    width: 100%;
    display: inline-flex !important;
    justify-content: space-between;
    background-size: 500% 500%;
    animation: normativeAnim 10s ease infinite;
    align-items: center;
    align-content: center;
    position: relative;
        strong {
            font-size: 85%;
            font-family: 'Montserrat',sans-serif;
            font-weight: 800;
            padding-left: 3px;
            line-height: .95;
            text-shadow: 1px 0 1px rgba(0,0,0,0.5),0 1px 1px rgba(0,0,0,0.5),-1px 0 1px rgba(0,0,0,0.5),0 -1px 1px rgba(0,0,0,0.5);
        }
        &:before {
            content: '';
            display: block;
            width: 18px;
            height: 18px;
            background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,
                linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
            filter: opacity(100%);
            padding: 2px;
            border-radius: 50%;
        }
        &.userBanner--staff {
            color: #fff;
            background-color: #5c97bf;
            background: linear-gradient(270deg, #3cfd0f, #fd0fde, #f07c00);
            background-size: 900% 900% !important;
        }
        &.admin {
            color: #fff;
            background-color: #7fff00;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%);
        }
        &.stadm {
            color: #fff;
            background-color: #32cd32;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.mladm {
            color: #fff;
            background-color: #0f0;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.newmember {
            color: #fff;
            background-color: #6c7a89;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.verified {
            color: #fff;
            background-color: #446cb3;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.proveren {
            color: #fff;
            background-color: #3c7a9c;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.hassle {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #ffd700, #ffa500, #ff8c00)
        }
        &.black {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #1628ca, #2ad4f6, #185941)
        }
        &.sponsor {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #6a5acd, #4b0082, #8a2be2)
        }
        &.osnov {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #feea10, #ff931e, #feea10)
        }
        &.tehh {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #ff4500, #b0284d)
        }
        &.user {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #bcbbbb, #515151)
        }
        &.proh {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #d600c1, #ba00d6, #9d00d6)
        }
        &.remka {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-color: #009c82
        }
        &.kur {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #f73ee8, #f73ed4)
        }
        &.adm {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #6b8e23, #82f358, #49cc2c)
        }
        &.teh {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #ff4500, #b50, #c00)
        }
        &.lider {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #da0, #f08b9a)
        }
        &.soskazgs {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #06f, #ba55d3)
        }
        &.Gladmin {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #5ade21, #008000, #5ade21)
        }
        &.ZGadmin {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #4bb524, #26e0af, #4bb524)
        }
        &.rykproekta {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #8b006d, #f00)
        }
        &.redadmin {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #b22222, #dc143c, #8b0000)
        }
        &.razrab {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #f819a7, #4619f8)
        }
        &.admforum {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #7900ff, #7900ff 0%, #8b00ff 100%);
            background-image: linear-gradient(270deg, #7900ff, #8b00ff)
        }
        &.super {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00)
        }
    }

поправил этот ужас так как это должно быть примерно хотя бы.
сам шрифт на прямую не подключён потому что лень бегать и искать по инету то что там указано.
в настройке группы CSS баннера userBanner admin ну и подставляем свои значения, тут пояснять не буду, кто понял тот понял, кто не понял не надо значит прогуливать уроки информатики.

P.S - warning! данный рефакторинг кода был произведён под пиво!

kxixidkdhdjdj · Сегодня в 15:05

KeoFox написал(а):

CSS:

@keyframes normativeAnim {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

.userBanner {
    text-transform: uppercase;
    font-weight: 800;
    padding: 4px 6px 4px 4px;
    border: 1px solid transparent;
    border-radius: 11px;
    text-align: center;
    width: 100%;
    display: inline-flex !important;
    justify-content: space-between;
    background-size: 500% 500%;
    animation: normativeAnim 10s ease infinite;
    align-items: center;
    align-content: center;
    position: relative;
        strong {
            font-size: 85%;
            font-family: 'Montserrat',sans-serif;
            font-weight: 800;
            padding-left: 3px;
            line-height: .95;
            text-shadow: 1px 0 1px rgba(0,0,0,0.5),0 1px 1px rgba(0,0,0,0.5),-1px 0 1px rgba(0,0,0,0.5),0 -1px 1px rgba(0,0,0,0.5);
        }
        &:before {
            content: '';
            display: block;
            width: 18px;
            height: 18px;
            background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,
                linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
            filter: opacity(100%);
            padding: 2px;
            border-radius: 50%;
        }
        &.userBanner--staff {
            color: #fff;
            background-color: #5c97bf;
            background: linear-gradient(270deg, #3cfd0f, #fd0fde, #f07c00);
            background-size: 900% 900% !important;
        }
        &.admin {
            color: #fff;
            background-color: #7fff00;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%);
        }
        &.stadm {
            color: #fff;
            background-color: #32cd32;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.mladm {
            color: #fff;
            background-color: #0f0;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.newmember {
            color: #fff;
            background-color: #6c7a89;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.verified {
            color: #fff;
            background-color: #446cb3;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.proveren {
            color: #fff;
            background-color: #3c7a9c;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.hassle {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #ffd700, #ffa500, #ff8c00)
        }
        &.black {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #1628ca, #2ad4f6, #185941)
        }
        &.sponsor {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #6a5acd, #4b0082, #8a2be2)
        }
        &.osnov {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #feea10, #ff931e, #feea10)
        }
        &.tehh {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #ff4500, #b0284d)
        }
        &.user {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #bcbbbb, #515151)
        }
        &.proh {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #d600c1, #ba00d6, #9d00d6)
        }
        &.remka {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-color: #009c82
        }
        &.kur {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #f73ee8, #f73ed4)
        }
        &.adm {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #6b8e23, #82f358, #49cc2c)
        }
        &.teh {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #ff4500, #b50, #c00)
        }
        &.lider {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #da0, #f08b9a)
        }
        &.soskazgs {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #06f, #ba55d3)
        }
        &.Gladmin {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #5ade21, #008000, #5ade21)
        }
        &.ZGadmin {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #4bb524, #26e0af, #4bb524)
        }
        &.rykproekta {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #8b006d, #f00)
        }
        &.redadmin {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #b22222, #dc143c, #8b0000)
        }
        &.razrab {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #f819a7, #4619f8)
        }
        &.admforum {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #7900ff, #7900ff 0%, #8b00ff 100%);
            background-image: linear-gradient(270deg, #7900ff, #8b00ff)
        }
        &.super {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00)
        }
    }

поправил этот ужас так как это должно быть примерно хотя бы.
сам шрифт на прямую не подключён потому что лень бегать и искать по инету то что там указано.
в настройке группы CSS баннера userBanner admin ну и подставляем свои значения, тут пояснять не буду, кто понял тот понял, кто не понял не надо значит прогуливать уроки информатики.

Посмотреть вложение 9941

P.S - warning! данный рефакторинг кода был произведён под пиво!

Попробуй мой код должен подойти

KeoFox · Сегодня в 15:09

kxixidkdhdjdj написал(а):
Попробуй мой код должен подойти

Смешно, а что изменилось?

pikamonov · Сегодня в 15:10

KeoFox написал(а):

CSS:

@keyframes normativeAnim {
    0% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
    100% { background-position: 0% 50% }
}

.userBanner {
    text-transform: uppercase;
    font-weight: 800;
    padding: 4px 6px 4px 4px;
    border: 1px solid transparent;
    border-radius: 11px;
    text-align: center;
    width: 100%;
    display: inline-flex !important;
    justify-content: space-between;
    background-size: 500% 500%;
    animation: normativeAnim 10s ease infinite;
    align-items: center;
    align-content: center;
    position: relative;
        strong {
            font-size: 85%;
            font-family: 'Montserrat',sans-serif;
            font-weight: 800;
            padding-left: 3px;
            line-height: .95;
            text-shadow: 1px 0 1px rgba(0,0,0,0.5),0 1px 1px rgba(0,0,0,0.5),-1px 0 1px rgba(0,0,0,0.5),0 -1px 1px rgba(0,0,0,0.5);
        }
        &:before {
            content: '';
            display: block;
            width: 18px;
            height: 18px;
            background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,
                linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
            filter: opacity(100%);
            padding: 2px;
            border-radius: 50%;
        }
        &.userBanner--staff {
            color: #fff;
            background-color: #5c97bf;
            background: linear-gradient(270deg, #3cfd0f, #fd0fde, #f07c00);
            background-size: 900% 900% !important;
        }
        &.admin {
            color: #fff;
            background-color: #7fff00;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%);
        }
        &.stadm {
            color: #fff;
            background-color: #32cd32;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.mladm {
            color: #fff;
            background-color: #0f0;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.newmember {
            color: #fff;
            background-color: #6c7a89;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.verified {
            color: #fff;
            background-color: #446cb3;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.proveren {
            color: #fff;
            background-color: #3c7a9c;
            background-image: linear-gradient(to right, transparent 0%, transparent 100%)
        }
        &.hassle {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #ffd700, #ffa500, #ff8c00)
        }
        &.black {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #1628ca, #2ad4f6, #185941)
        }
        &.sponsor {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #6a5acd, #4b0082, #8a2be2)
        }
        &.osnov {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #feea10, #ff931e, #feea10)
        }
        &.tehh {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #ff4500, #b0284d)
        }
        &.user {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #bcbbbb, #515151)
        }
        &.proh {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #d600c1, #ba00d6, #9d00d6)
        }
        &.remka {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-color: #009c82
        }
        &.kur {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #f73ee8, #f73ed4)
        }
        &.adm {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #6b8e23, #82f358, #49cc2c)
        }
        &.teh {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #ff4500, #b50, #c00)
        }
        &.lider {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #da0, #f08b9a)
        }
        &.soskazgs {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #06f, #ba55d3)
        }
        &.Gladmin {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #5ade21, #008000, #5ade21)
        }
        &.ZGadmin {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #4bb524, #26e0af, #4bb524)
        }
        &.rykproekta {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #8b006d, #f00)
        }
        &.redadmin {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #b22222, #dc143c, #8b0000)
        }
        &.razrab {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #f819a7, #4619f8)
        }
        &.admforum {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #7900ff, #7900ff 0%, #8b00ff 100%);
            background-image: linear-gradient(270deg, #7900ff, #8b00ff)
        }
        &.super {
            color: #fff;
            background-color: #d80000;
            background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
            background-image: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00)
        }
    }

поправил этот ужас так как это должно быть примерно хотя бы.
сам шрифт на прямую не подключён потому что лень бегать и искать по инету то что там указано.
в настройке группы CSS баннера userBanner admin ну и подставляем свои значения, тут пояснять не буду, кто понял тот понял, кто не понял не надо значит прогуливать уроки информатики.

Посмотреть вложение 9941

P.S - warning! данный рефакторинг кода был произведён под пиво!

OFFTOP

Господи, что со вкусом у людей? что с анимациями?

Почему когда был жив Skaiman, делались крутые "баннера", которые почти все использовали на своих говно-копиях. Сейчас все друг за другом воруют, и доедают.

kxixidkdhdjdj · Сегодня в 15:12

pikamonov написал(а):
OFFTOP
Господи, что со вкусом у людей? что с анимациями?

Почему когда был жив Skaiman, делались крутые "баннера", которые почти все использовали на своих говно-копиях. Сейчас все друг за другом воруют, и доедают.

CSS Hype:

.userBanner {
    text-transform: uppercase;
    font-weight: 800;
    padding: 4px 6px 4px 4px;
    border: 1px solid transparent;
    border-radius: 11px;
    margin-right: 5px;
    text-align: center;
    display: inline-flex;
    justify-content: space-between;
    background-size: 500% 500%;
    animation: AnimBanner 10s ease infinite;
    align-items: center;
    align-content: center;
    position: relative
}

.userBanner.userBanner--staff {
    color: #fff;
    background-color: #5c97bf;
    border: none;
    border-radius: 11px;
    background: linear-gradient(270deg, #3cfd0f, #fd0fde, #f07c00);
    background-size: 900% 900%
}

.userBanner.userBanner--staff::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.admin {
    color: #fff;
    background-color: #7fff00;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.admin::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.stadm {
    color: #fff;
    background-color: #32cd32;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.stadm::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.mladm {
    color: #fff;
    background-color: #0f0;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.mladm::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.newmember {
    color: #fff;
    background-color: #6c7a89;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.newmember::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.verified {
    color: #fff;
    background-color: #446cb3;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.verified::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.proveren {
    color: #fff;
    background-color: #3c7a9c;
    border: none;
    background-image: linear-gradient(to right, transparent 0%, transparent 100%)
}

.userBanner.proveren::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.sponsor {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #6a5acd, #4b0082, #8a2be2)
}

.userBanner.sponsor::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.owner {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #feea10, #ff931e, #feea10)
}

.userBanner.owner::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.teh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #ff4500, #b0284d)
}

.userBanner.teh::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.user {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #bcbbbb, #515151)
}

.userBanner.user::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.proh {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #d600c1, #ba00d6, #9d00d6)
}

.userBanner.proh::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.ka {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #f73ee8, #f73ed4)
}

.userBanner.ka::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.lider {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #da0, #f08b9a)
}

.userBanner.lider::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.zgs {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #06f, #ba55d3)
}

.userBanner.zgs::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.gs {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #49cc2c, #00ced1)
}

.userBanner.gs::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.ga {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #5ade21, #008000, #5ade21)
}

.userBanner.ga::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.zga {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #4bb524, #26e0af, #4bb524)
}

.userBanner.zga::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.ryk {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #8b006d, #f00)
}

.userBanner.ryk::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.razrab {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #f819a7, #4619f8)
}

.userBanner.razrab::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

.userBanner.super {
    color: #fff;
    background-color: #d80000;
    border: none;
    background-image: linear-gradient(to #0f0, #0f0 0%, #008000 100%);
    background-image: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00)
}

.userBanner.super::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    background: url('https://i.postimg.cc/FR142yYn/IMG-20250614-144656-186.jpg') no-repeat center / 22px,linear-gradient(to top, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.2) 100%);
    filter: opacity(100%);
    padding: 2px;
    border-radius: 50%
}

@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

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

KeoFox · Сегодня в 15:13

pikamonov написал(а):
OFFTOP
Господи, что со вкусом у людей? что с анимациями?

Почему когда был жив Skaiman, делались крутые "баннера", которые почти все использовали на своих говно-копиях. Сейчас все друг за другом воруют, и доедают.

OFFTOP

у детей нету вкуса и фантазии, баннера калл? согласен, кто хочет тот пусть и пользуется.
для всех остальных существует XFI где над любителями GTA стебутся и насмехаются

UPD. анимации дёрганные на gif получились, на деле гладко

pikamonov · Сегодня в 15:15

KeoFox написал(а):
OFFTOP
у детей нету вкуса и фантазии, баннера калл? согласен, кто хочет тот пусть и пользуется.
для всех остальных существует XFI где над любителями GTA стебутся и насмехаются

OFFTOP

Я зашел на форум одного человека, с нашего форума, это просто ужас.

Стиль переполнен мусором, анимациями, каким то фейерверками. Почему раньше почти все старались, сделать красивый форум, а сейчас всем на это пофиг ?

KeoFox · Сегодня в 15:18

pikamonov написал(а):
OFFTOP
Я зашел на форум одного человека, с нашего форума, это просто ужас.

Стиль переполнен мусором, анимациями, каким то фейерверками. Почему раньше почти все старались, сделать красивый форум, а сейчас всем на это пофиг ?

Посмотреть вложение 9942

OFFTOP

Из своего опыта могу сказать что когда только начал тоже этим заниматься хотелось добавить на свой форум всё и сразу, градиенты, анимации, галочки, иконки и прочий мусор который бесолезен. Со временем "повзрослел". У себя на форумах стал бойкотировал бесполезные галочки и прочий хлам.

Мб у них тот же период что и у меня когда то в начале

LIVE SAMP

Баннеры Hype Russia

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

Alexander_Solovyov

KeoFox

RP баннеры групп с логотипом

Alexander_Solovyov

RP баннеры групп с логотипом

KeoFox

Alexander_Solovyov

Kolpak

Nikita_FullMaster

Kolpak

Mortis_Panarenka

Mortis_Panarenka

kxixidkdhdjdj

Drake_Fernando

KeoFox

kxixidkdhdjdj

KeoFox

kxixidkdhdjdj

KeoFox

pikamonov

Дальше — Больше

kxixidkdhdjdj

KeoFox

pikamonov

Дальше — Больше

KeoFox