Welcome!

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

SignUp Now!

Как исправить проблему

Окт
627
138
Пользователь
CSS:
USER BANNERS — DELORE RP (FULL PACK + NEW ROLES)
 ====================================================== */



/* ===== БАЗОВАЯ ФОРМА ===== */

.userBanner,
.userBannerLight,
.userBanner--staff {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 85%;
    font-weight: 700;
    text-align: center;
    color: #fff;
    border-radius: 6px;
    border: none;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}


.userBanner:hover,
.userBannerLight:hover,
.userBanner--staff:hover {
    transform: translateY(-2px);
}


/* ===== БЛИК ===== */
.userBanner::before,
.userBannerLight::before,
.userBanner--staff::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, transparent 30%,  rgba(255,255,255,.7) 50%, transparent 70%, transparent 100%);
animation: light 2.5s infinite;
pointer-events: none;
}


@keyframes light {
    0% { left: -80%; }
    100% { left: 80%; }
}


/* ======================================================
   ВЫСШАЯ АДМИНИСТРАЦИЯ (ЗЕЛЁНЫЕ)
   ====================================================== */
.userBanner.ga {
    background: linear-gradient(135deg, #0b7d2c, #19b45b);
    box-shadow: 0 0 8px rgba(25,180,91,.7), 0 0 14px rgba(25,180,91,.5);
}

.userBanner.zga {
    background: linear-gradient(135deg, #0f8f3a, #2ed573);
    box-shadow: 0 0 8px rgba(46,213,115,.7), 0 0 14px rgba(46,213,115,.5);
}


/* ======================================================
   КРАСНЫЕ (РУКОВОДИТЕЛЬ / СПЕЦ ЗРП)
   ====================================================== */
.userBanner.rukovod {
    background: linear-gradient(135deg, #7a0000, #e60000);
    box-shadow: 0 0 10px rgba(230,0,0,.9), 0 0 18px rgba(230,0,0,.6);
}
.userBanner.specrp {
    background: linear-gradient(135deg, #b00000, #ff2e2e);
    box-shadow: 0 0 8px rgba(255,46,46,.8), 0 0 14px rgba(255,46,46,.6);
}



/* ======================================================
   АДМИНИСТРАЦИЯ
   ====================================================== */
.userBanner.adm {
    background: linear-gradient(135deg, #0047ff, #2f6bff);
    box-shadow: 0 0 8px rgba(47,107,255,.7), 0 0 14px rgba(47,107,255,.5);
}

.userBanner.mladm {
    background: linear-gradient(135deg, #d4a700, #ffcc00);
    box-shadow: 0 0 8px rgba(255,204,0,.8), 0 0 14px rgba(255,204,0,.6);
}

.userBanner.moder {
    background: linear-gradient(135deg, #4b6cb7, #182848);
    box-shadow: 0 0 8px rgba(75,108,183,.7), 0 0 14px rgba(75,108,183,.5);
}


/* ======================================================
   РУКОВОДСТВО ФРАКЦИЙ / ПРОЕКТА
   ====================================================== */
.userBanner.kurator,
.userBanner.editor {
    background: linear-gradient(135deg, #5f2cff, #9b59ff);
    box-shadow: 0 0 8px rgba(155,89,255,.7), 0 0 14px rgba(155,89,255,.5);
}

.userBanner.leader {
    background: linear-gradient(135deg, #0a3cff, #3f6bff);
    box-shadow: 0 0 8px rgba(63,107,255,.7), 0 0 14px rgba(63,107,255,.5);
}

.userBanner.server01 {
    background: linear-gradient(135deg, #caa400, #ffdd00);
    box-shadow: 0 0 8px rgba(255,221,0,.8), 0 0 14px rgba(255,221,0,.6);
}


/* ======================================================
   ИГРОВЫЕ / СТАТУСНЫЕ
   ====================================================== */
.userBanner.user {
    background: linear-gradient(135deg, #7a7a7a, #9a9a9a);
    box-shadow: 0 0 6px rgba(160,160,160,.6), 0 0 12px rgba(160,160,160,.4);
}

.userBanner.readOnly {
    background: linear-gradient(135deg, #333, #4d4d4d);
    box-shadow: 0 0 6px rgba(80,80,80,.6), 0 0 12px rgba(80,80,80,.4);
}

.userBanner.banned {
    background: linear-gradient(135deg, #777, #555);
    box-shadow: 0 0 6px rgba(120,120,120,.6), 0 0 12px rgba(120,120,120,.4);
}

.userBanner.active {
    background: linear-gradient(135deg, #0033ff, #3366ff);
    box-shadow: 0 0 8px rgba(51,102,255,.6), 0 0 14px rgba(51,102,255,.5);
}

.userBanner.professional {
    background: linear-gradient(135deg, #008000, #00b300);
    box-shadow: 0 0 8px rgba(0,179,0,.6), 0 0 14px rgba(0,179,0,.5);
}

.userBanner.legend {
    background: linear-gradient(135deg, #ccad00, #ffd700);
    color: #000;
    box-shadow: 0 0 10px rgba(255,215,0,.8), 0 0 18px rgba(255,215,0,.6);
}

.userBanner.seller {
    background: linear-gradient(135deg, #ff294d, #ff5c77);
    box-shadow: 0 0 8px rgba(255,92,119,.6), 0 0 14px rgba(255,92,119,.4);
}


/* ======================================================
   НОВЫЕ РОЛИ
   ====================================================== */

/* Тех */
.userBanner.tech {
    background: linear-gradient(135deg, #ff6600, #ff9933);
    box-shadow: 0 0 8px rgba(255,102,0,.7), 0 0 14px rgba(255,102,0,.5);
}

/* Почетный пользователь — радуга */
.userBanner.honor {
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
    box-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 14px rgba(255,255,255,.5);
    color: #fff;
}


/* ======================================================
   STAFF (если используется)
   ====================================================== */

.userBanner--staff {
    background: #1ba39c !important;
    box-shadow: 0 0 8px rgba(27,163,156,.7), 0 0 14px rgba(27,163,156,.5);
}


/* ======================================================
   АДАПТАЦИЯ ДЛЯ СООБЩЕНИЙ
   ====================================================== */

.message-userBanner.userBanner {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #fff;              /* белый текст */
    background: transparent;   /* сохраняем фон баннера */
    border-radius: inherit;
    padding: 0;
    text-align: center;
}


@media (max-width: 650px) {
    .message-userBanner.userBanner,
    .message-userBanner.userBannerLight,
    .message-userBanner.userBanner--staff {
        display: inline-block;
        margin: 2px 0;
        text-align: left;
    }

}
сохраняем фон баннера */
    border-radius: inherit;
    padding: 0;
    text-align: center;
}

@media (max-width: 650px) {
    .message-userBanner.userBanner,
    .message-userBanner.userBannerLight,
    .message-userBanner.userBanner--staff {
        display: inline-block;
        margin: 2px 0;
        text-align: left;
    }
}
 
Последнее редактирование модератором:
Сен
228
87
Пользователь
Сен
228
87
Пользователь
Да я всё пробую не роботает
OFFTOP

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

 
Окт
627
138
Пользователь
sss:
.userBanner {
    position: relative;
    padding: 1px 5px 1px 32px;
    font-size: 85%;
    font-weight: bold;
    text-align: center;
    border: 1px solid transparent;
    display: inline-block;
    color: #fff;
    border-radius: 3px;
    transition: box-shadow .3s ease,transform .3s ease
}

.userBanner:hover {
    transform: translateY(-2px)
}

.memberHeader-banners .userBanner {
    margin-left: 4px
}

.userBanner:before {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    padding: 2px 4px 0px 4px;
    min-width: 20px;
    background-color: rgba(0,0,0,0.2);
    font-family: "Font Awesome 5 Pro";
    font-weight: bold;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased
}

.userBanner.spec {
    background-image: url(https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExOXh6eWo2MGxnazJ6MDFicTNwOHlmMTJkOTA3eHVzdnVsdmJoMWY3bSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/0SGAnlGx6r4kGExPsg/giphy.gif);
    background-position: center;
    color: #fff;
    box-shadow: 0 0 8px rgba(255,0,0,0.6),0 0 14px rgba(255,0,0,0.5);
    border: none;
    width: 165px;
    height: 21px
}

.userBanner.spec:before {
    content: "\f521"
}

.userBanner.red {
    background: #d80000;
    box-shadow: 0 0 8px rgba(216,0,0,0.7),0 0 14px rgba(216,0,0,0.5);
    width: 170px;
    height: 21px
}

.userBanner.red:before {
    content: "\f521"
}

.userBanner.kurator {
    background: #b22222;
    box-shadow: 0 0 8px rgba(178,34,34,0.7),0 0 14px rgba(178,34,34,0.5);
    width: 170px;
    height: 21px
}

.userBanner.kurator:before {
    content: "\f19d"
}

.userBanner.pga {
    background: #8A2BE2;
    box-shadow: 0 0 8px rgba(138,43,226,0.7),0 0 14px rgba(138,43,226,0.5);
    width: 165px;
    height: 22px
}

.userBanner.pga:before {
    content: "\f0eb"
}

.userBanner.omp {
    background: #ffa500;
    box-shadow: 0 0 8px rgba(255,165,0,0.7),0 0 14px rgba(255,165,0,0.5)
}

.userBanner.omp:before {
    content: "\f005"
}

.userBanner.spons {
    background: #9b2d30;
    box-shadow: 0 0 8px rgba(155,45,48,0.7),0 0 14px rgba(155,45,48,0.5)
}

.userBanner.spons:before {
    content: "\f3a5"
}

.userBanner.stadm {
    background: #51bc34;
    box-shadow: 0 0 8px rgba(81,188,52,0.7),0 0 14px rgba(81,188,52,0.5)
}

.userBanner.stadm:before {
    content: "\f508"
}

.userBanner.gs {
    background: #018520;
    box-shadow: 0 0 8px rgba(1,133,32,0.7),0 0 14px rgba(1,133,32,0.5);
    width: 170px;
    height: 38px
}

.userBanner.gs:before {
    content: "\f007"
}

.userBanner.zgs {
    background: #038c5a;
    box-shadow: 0 0 8px rgba(3,140,90,0.7),0 0 14px rgba(3,140,90,0.5)
}

.userBanner.zgs:before {
    content: "\f21b"
}

.userBanner.adm {
    background: #0008e3;
    box-shadow: 0 0 8px rgba(0,8,227,0.7),0 0 14px rgba(0,8,227,0.5);
    width: 170px;
    height: 21px
}

.userBanner.adm:before {
    content: "\f0e3"
}

.userBanner.mladm {
    background: #02ccc2;
    box-shadow: 0 0 8px rgba(2,204,194,0.7),0 0 14px rgba(2,204,194,0.5);
    width: 175px;
    height: 35px
}

.userBanner.mladm:before {
    content: "\f2b5"
}

.userBanner.ga {
    background: #d80000;
    box-shadow: 0 0 8px rgba(216,0,0,0.7),0 0 14px rgba(216,0,0,0.5);
    width: 152px;
    height: 38px
}

.userBanner.ga:before {
    content: "\f521"
}

.userBanner.user {
    background: #919191;
    box-shadow: 0 0 8px rgba(145,145,145,0.7),0 0 14px rgba(145,145,145,0.5);
    width: 166px;
    height: 22px
}

.userBanner.user:before {
    content: "\f2bd"
}

.userBanner.pa {
    background: #ff4500;
    box-shadow: 0 0 8px rgba(255,69,0,0.7),0 0 14px rgba(255,69,0,0.5)
}

.userBanner.pa:before {
    content: "\f0c0"
}

.userBanner.leader {
    background: #ffcb00;
    box-shadow: 0 0 8px rgba(255,203,0,0.7),0 0 14px rgba(255,203,0,0.5)
}

.userBanner.leader:before {
    content: "\f091"
}

.userBanner.bloger {
    background: #ff0040;
    box-shadow: 0 0 8px rgba(255,0,64,0.7),0 0 14px rgba(255,0,64,0.5)
}

.userBanner.bloger:before {
    content: "\f075"
}

.userBanner--staff {
    background: #1ba39c !important;
    color: #fff !important
}

@keyframes light {
    0% {
        left: -80%
    }

    100% {
        left: 80%
    }
}
 
Сверху