Куча баннеров для форума

[XenBaza]

.MainAdmin {
    color: #337BFF;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.65em;
    padding: 3px 6px;
    border-radius: 20px;
    border: 2px solid #FF5733;
    background-color: #FFE5E5;
    animation: textPulse 1.5s infinite;
    text-align: center;
}

.TechAdmin {
    color: #337BFF;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.65em;
    padding: 3px 6px;
    border-radius: 20px;
    border: 2px solid #28A745;
    background-color: #E8F5E9;
    animation: textPulse 1.5s infinite;
    text-align: center;
}

.Founder {
    color: #337BFF;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.65em;
    padding: 3px 6px;
    border-radius: 20px;
    border: 2px solid #FFC107;
    background-color: #FFF8E1;
    animation: textPulse 1.5s infinite;
    text-align: center;
}

.Creator {
    color: #337BFF;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.65em;
    padding: 3px 6px;
    border-radius: 20px;
    border: 2px solid #17A2B8;
    background-color: #E0F7FA;
    animation: textPulse 1.5s infinite;
    text-align: center;
}

.Judge {
    color: #337BFF;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.65em;
    padding: 3px 6px;
    border-radius: 20px;
    border: 2px solid #6F42C1;
    background-color: #F3E5F5;
    animation: textPulse 1.5s infinite;
    text-align: center;
}

.NoBlat {
    color: #337BFF;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.65em;
    padding: 3px 6px;
    border-radius: 20px;
    border: 2px solid #DC3545;
    background-color: #FFEBEE;
    animation: textPulse 1.5s infinite;
    text-align: center;
}

.GS {
    color: #337BFF;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.65em;
    padding: 3px 6px;
    border-radius: 20px;
    border: 2px solid #007BFF;
    background-color: #E3F2FD;
    animation: textPulse 1.5s infinite;
    text-align: center;
}

.ByPantsPablo {
    color: #337BFF;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.65em;
    padding: 3px 6px;
    border-radius: 20px;
    border: 2px solid #FF4500;
    background-color: #FFE4E1;
    animation: textPulse 1.5s infinite;
    text-align: center;
}

@keyframes textPulse {
    0%, 100% {
        color: #337BFF;
    }
    50% {
        color: var(--random-color);
    }
}

 

[XenBaza]

.banner {
background: linear-gradient(45deg, #4CAF50, #81C784, #4CAF50);
color: white;
text-align: center;
padding: 5px 10px;
font-size: 1em;
font-weight: bold;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
animation: gradient-animation 3s ease infinite;
}

@keyframes gradient-animation {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}

 

[XenBaza]

.forumTeamBanner {
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 1.5em;
padding: 10px 20px;
border-radius: 20px;
background: linear-gradient(270deg, #ff007f, #7f00ff, #00ffff, #ff007f);
background-size: 400% 400%;
animation: rainbowAnimation 5s ease infinite;
text-align: center;
}

@keyframes rainbowAnimation {
0% { background-position: 0% 50%; }
25% { background-position: 100% 50%; }
50% { background-position: 0% 50%; }
75% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

 

[XenBaza]

.userBanner {
padding: 2px 3px;
font-size: 11px;
border-radius: 6px;
background: linear-gradient(270deg, #8f8f8f, #bababa);
color: #f5f5f5;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
display: inline-block;
}

 

[XenBaza]

В extra.less добавляем:

.customBanner {
    color: white;
    text-align: center;
    font-size: 87%;
    font-style: normal;
    border: none;
    border-radius: 10px;
    padding: 1px 10px 3px;

    &.banner1 {
        background: linear-gradient(90deg, #191970 25%, #000000 100%, #000000);
    }

    &.banner2 {
        background: linear-gradient(90deg, #C0C0C0 25%, #C0C0C0 100%, #000000);
    }

    &.banner3 {
        background: linear-gradient(90deg, #778899 25%, #778899 100%, #000000);
    }

    &.banner4 {
        background: linear-gradient(90deg, #cb2d3e, #ef473a);
    }

    &.banner5 {
        background: linear-gradient(90deg, #008080, #001a1a);
    }

    &.banner6 {
        background: linear-gradient(90deg, #008000, #001a00);
    }

    &.banner7 {
        background: linear-gradient(90deg, #4b6cb7, #182848);
    }

    &.banner8 {
        background: linear-gradient(90deg, #36f, #09bd72);
    }

    &.banner9 {
        background: linear-gradient(90deg, #DAA520, #300052);
    }

    &.banner10 {
        background: linear-gradient(90deg, #310062, #120a8f);

    }

    &.banner11 {
        background: linear-gradient(90deg, #008080, #004d4d);

    }

    &.banner12 {
        background: linear-gradient(90deg, #DC143C, #4f0716);

    }

    &.banner13 {
        background: linear-gradient(80deg, #f02424, #008f8f);

    }

    &.banner14 {
        background: linear-gradient(80deg, #a30b0b, #050404);

    }

    &.banner15 {
        background: linear-gradient(80deg, #30d5c8, #00a550);

    }

    &.banner16 {
        background: linear-gradient(80deg, #30d5c8, #135e58);

    }

    &.banner17 {
        background: linear-gradient(80deg, #1e5945, #006666);

    }

    &.banner18 {
        background: linear-gradient(80deg, #7442c8, #9400d3);
    }

    &.banner19 {
        background: #7cc3e0;
        border-color: #53b0d6;
    }
}

В настройки группы: customBanner bannerX

 

[XenBaza]

.userBanner.test {
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: 65%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 6px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background-size: 600% 600%;
    position: relative;
    overflow: hidden;
    animation: AnimBanner 10s ease infinite
}
.userBanner.test:before {
    content: "";
    position: absolute;
    background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250,250,250,0.7) 50%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    top: 0px;
    left: -80%;
    width: 100%;
    height: 100%;
    animation: light 2.5s infinite
}
@keyframes AnimBanner {
    0% {
        background-position: 0% 50%
    }

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

    100% {
        background-position: 0% 50%
    }
}
@keyframes light {
    0% {
        left: -80%
    }

    100% {
        left: 80%
    }
}
.userBanner.test {
    background-image: linear-gradient(80deg, #9a36b3, #9a36b3)
}
.memberHeader-banners .userBanner,.memberTooltip-banners .userBanner {
    width: 160px
}

 

[XenBaza]

[XenForo] Баннеры Барвиха РП

.userBanner,.userBanner.userBanner--staff {
    display: inline-block;
    min-height: 20px;
    padding: 1px 7px;
    border-radius: 14px;
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
    margin: 4px 2px;
    background-size: 200% 200%;
    color: white;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
    text-shadow: 0 0 0 transparent,1px 1px 1px #000;
    -webkit-animation: AnimationBanner 5s ease infinite;
    -moz-animation: AnimationBanner 5s ease infinite;
    animation: AnimationBanner 5s ease infinite
}

.userBanner.special {
    background-image: linear-gradient(130deg, #ff3535, #51055a);
    width: 127px
}

.userBanner.ga {
    background-image: linear-gradient(130deg, #ecff00, #f80000, #ff6b00)
}

.userBanner.zga {
    background-image: linear-gradient(130deg, #ecff00, #f80000, #ff6b00)
}

.userBanner.stcurator {
    background-image: linear-gradient(130deg, #0d8cc4, #970d3c)
}

.userBanner.curator {
    background-image: linear-gradient(130deg, #b55acc, #7759cb, #b55acc)
}

.userBanner.admin {
    background-image: linear-gradient(130deg, #0c7708, #5ebe83, #22d312)
}

.userBanner.discord_maker {
    background-image: linear-gradient(130deg, #0053ff, #00589e, #ff00a4)
}

.userBanner.tester {
    background-image: linear-gradient(130deg, #c8e067, #67e0cb)
}

.userBanner.leader {
    background-image: linear-gradient(130deg, #3b45f4, #6fcbfc)
}

.userBanner.player {
    background-image: linear-gradient(130deg, #00e4ff, #4f61fc, #9e00f8)
}

.userBanner.player_two {
    background-image: linear-gradient(130deg, #00e4ff, #4f61fc, #9e00f8)
}

.userBanner.player_three {
    background-image: linear-gradient(130deg, #00e4ff, #4f61fc, #9e00f8)
}

.userBanner.player_four {
    background-image: linear-gradient(130deg, #00e4ff, #4f61fc, #9e00f8)
}

.userBanner.player_five {
    background-image: linear-gradient(130deg, #00e4ff, #4f61fc, #9e00f8)
}

.userBanner.player_six {
    background-image: linear-gradient(130deg, #00e4ff, #4f61fc, #9e00f8)
}

.userBanner.player_seven {
    background-image: linear-gradient(130deg, #00e4ff, #4f61fc, #9e00f8)
}

.userBanner.player_eight {
    background-image: linear-gradient(130deg, #00e4ff, #4f61fc, #9e00f8)
}

.userBanner.player_nine {
    background-image: linear-gradient(130deg, #00e4ff, #4f61fc, #9e00f8)
}

.userBanner.discord_leader {
    background-image: linear-gradient(130deg, #f78b0b, #e10d63, #3d159f)
}

.userBanner.banned {
    background-color: #c0c0c0;
    color: black;
    text-shadow: none;
    font-weight: bold
}

.userBanner.userBanner--staff {
    background-image: linear-gradient(90deg, #0717ed, #ef2525)
}