Решено Дайте пожалуйста код на эти роли

[Ladno Solova]

Ссылка на форум - https://forum.flinrp.ru/

 

[igoresha]

Спойлер: Кликабельно

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

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

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

.userBannerProjectTeam {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 70%;
    padding: 6px 10px 4px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    background: linear-gradient(270deg, #00b9ff, #d104ff, #2800ff);
    background-size: 900% 900%;
    animation: AnimBanner 8s ease infinite;
    text-shadow: 1px 0 1px #000,0 1px 1px #000,-1px 0 1px #000,0 -1px 1px #000;
    border: 1px solid transparent;
    box-shadow: inset 0 0 3px rgba(255,255,255,0.1)
}

.userBanner {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 70%;
    padding: 6px 10px 4px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
    background-size: 900% 900%;
    text-shadow: 1px 0 1px #000,0 1px 1px #000,-1px 0 1px #000,0 -1px 1px #000;
    border: 1px solid transparent;
    box-shadow: inset 0 0 3px rgba(255,255,255,0.1)
}

.user {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #7e7f82;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.Komanda-proekt {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #690d0d;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.Komanda-proekt::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0
}

.Komanda-proekt {
    position: relative;
    z-index: 1
}

@keyframes shineBanner {
    0% {
        left: -50%
    }

    66.7% {
        left: 100%
    }

    100% {
        left: 100%
    }
}

.razrab {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #8c10eb;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.razrab::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0
}

.razrab {
    position: relative;
    z-index: 1
}

.gl-adm {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #015900;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.gl-adm::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0
}

.gl-adm {
    position: relative;
    z-index: 1
}

.zam-gl-adm {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #027315;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.zam-gl-adm::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0
}

.zam-gl-adm {
    position: relative;
    z-index: 1
}

.kurat {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #421be0;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.kurat::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0
}

.kurat {
    position: relative;
    z-index: 1
}

.glgs {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #f28b16;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.glgs::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0
}

.glgs {
    position: relative;
    z-index: 1
}

.zam-glgs {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #b36a17;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.zam-glgs::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0
}

.zam-glgs {
    position: relative;
    z-index: 1
}

.adm {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #1a43d9;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.adm::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0
}

.adm {
    position: relative;
    z-index: 1
}

.maf {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #750d0d;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.maf::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.maf {
    position: relative;
    z-index: 1
}

.ball {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #b5109a;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.ball::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.ball {
    position: relative;
    z-index: 1
}

.national-g {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #0e4d04;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.national-g::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.national-g {
    position: relative;
    z-index: 1
}

.hospit {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #e5097f;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.hospit::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.hospit {
    position: relative;
    z-index: 1
}

.prav {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #b5cc1f;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.prav::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.prav {
    position: relative;
    z-index: 1
}

.FBI {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #0f0e0e;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.FBI::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.FBI {
    position: relative;
    z-index: 1
}

.SMI {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #c2a2da;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.SMI::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.SMO {
    position: relative;
    z-index: 1
}

.grove {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #0a9421;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.grove::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.grove {
    position: relative;
    z-index: 1
}

.turm {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #090b47;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.turm::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.turm {
    position: relative;
    z-index: 1
}

.azt {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #1ed4b2;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.azt::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.azt {
    position: relative;
    z-index: 1
}

.rif {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #17afd1;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.rif::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.rif {
    position: relative;
    z-index: 1
}

.vag {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #aba616;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.vag::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.vag {
    position: relative;
    z-index: 1
}

.auto {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #1d93ad;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.auto::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.auto {
    position: relative;
    z-index: 1
}

.polic {
    --highlight-color: rgba(255,80,80,0.7);
    color: #ff;
    font-weight: bold;
    font-size: 70%;
    text-transform: uppercase;
    padding: 4px 10px;
    display: inline-block;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #1647a8;
    text-shadow: 0 0 1px rgba(0,0,0,0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.2)
}

.polic::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, var(--highlight-color) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: shineBanner 3s linear infinite;
    pointer-events: none;
    z-index: 0;
    width: var(--stripe-width, 50%)
}

.polic {
    position: relative;
    z-index: 1
}