Extra.less Hype Russia

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

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

Зарегистрироваться!
  • Если Вы желаете помогать развитию проекта, готовы заполнять раздел(-ы) и подсказывать другим пользователям на портале, есть возможность попасть в команду редакторов. Для этого следует обратиться в техническую поддержку
Пользователь
Регистрация
19 Июн 2025
Сообщения
6
Code Css::
.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%
    }
}
 
Сверху