Кастомные баннеры

[hdtd yh gf]

.userBanner {
    display: inline-block;
    padding: 6px 20px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
    text-align: center;
    border: 2px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    background-image: linear-gradient(
            90deg,
            #2c2c2c 0%,
            #4C4C4C 50%,
            #2c2c2c 100%
        ),
        linear-gradient(90deg, #444, #444);
}

.userBanner.red {
    background-image: linear-gradient(
            90deg,
            #2c2c2c 0%,
            #4C4C4C 50%,
            #2c2c2c 100%
        ),
        linear-gradient(90deg, #FF0000, #B20000);
}

.userBanner.blue {
    background-image: linear-gradient(
            90deg,
            #2c2c2c 0%,
            #4C4C4C 50%,
            #2c2c2c 100%
        ),
        linear-gradient(90deg, #00BFFF, #0000FF);
}

.userBanner.green {
    background-image: linear-gradient(
            90deg,
            #2c2c2c 0%,
            #4C4C4C 50%,
            #2c2c2c 100%
        ),
        linear-gradient(90deg, #00FF00, #008000);
}

.userBanner.yellow {
    background-image: linear-gradient(
            90deg,
            #2c2c2c 0%,
            #4C4C4C 50%,
            #2c2c2c 100%
        ),
        linear-gradient(90deg, #FFFF00, #FFD700);
}

.userBanner.gold {
    background-image: linear-gradient(
            90deg,
            #2c2c2c 0%,
            #4C4C4C 50%,
            #2c2c2c 100%
        ),
        linear-gradient(90deg, #FFD700, #FFA500);
}

.userBanner.userBanner--staff {
    background-image: linear-gradient(
            90deg,
            #2c2c2c 0%,
            #4C4C4C 50%,
            #2c2c2c 100%
        ),
        linear-gradient(90deg, #7D7D7D, #6F6F6F);
    Color: #fff;
}

ЭТОТ КОД ДЕЛАЕТ ТАКИЕ КАСТОМНЫЕ БАННЕРЫ
Посмотреть в живую:

https://test-7kvstudio.hgweb.ru/index.php?members/admin.1/

​

 

[🦅Seryw🦅]

Крутые