Баннеры под ваш проект | #2

[Loveシ︎sʜᴀᴅᴏᴡ꧂]

Всех приветствую!
Вчера сливал свои первые баннеры процесс мне понравился, и я решил зделать сегодня баннеры 2.

.userBanner {
    display: inline-block;
    padding: 6px 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff !important;
    text-align: center;
    min-width: 150px;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    transform: skewX(-15deg);
    border-radius: 8px;
    border: none;
    background-size: 200% 200% !important;
    overflow: hidden;
}

.userBanner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 12px 12px;
    z-index: -1;
}

.userBanner span {
    display: inline-block;
    transform: skewX(15deg);
}

.admin { background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); box-shadow: 0 4px 15px rgba(255, 8, 68, 0.4); }
.developer { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); box-shadow: 0 4px 15px rgba(33, 147, 176, 0.4); }
.moder { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4); }
.support { background: linear-gradient(135deg, #f12711 0%, #f5af19 100%); box-shadow: 0 4px 15px rgba(241, 39, 17, 0.4); }
.user { background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%); box-shadow: 0 4px 15px rgba(248, 87, 166, 0.4); }
.ga { background: linear-gradient(135deg, #f000ff 0%, #7b00ff 100%); box-shadow: 0 4px 15px rgba(240, 0, 255, 0.5); }
.zga { background: linear-gradient(135deg, #ec008c 0%, #fc6767 100%); box-shadow: 0 4px 15px rgba(236, 0, 140, 0.4); }
.leader { background: linear-gradient(135deg, #ffe259 0%, #ffa751 100%); box-shadow: 0 4px 15px rgba(255, 167, 81, 0.4); }
.gs { background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%); box-shadow: 0 4px 15px rgba(11, 163, 96, 0.4); }
.zgs { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4); }
.spec { background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); box-shadow: 0 4px 15px rgba(0, 198, 255, 0.4); }
.helper { background: linear-gradient(135deg, #1d976c 0%, #93f9b9 100%); box-shadow: 0 4px 15px rgba(29, 151, 108, 0.4); }
.bot { background: linear-gradient(135deg, #304352 0%, #d7d2cc 100%); box-shadow: 0 4px 15px rgba(48, 67, 82, 0.3); }

Может солью баннеры Bust Russia (но это только в задумке)

 

[Atarav_Watch]

Всех приветствую!
Вчера сливал свои первые баннеры процесс мне понравился, и я решил зделать сегодня баннеры 2.
Посмотреть вложение 26749

.userBanner {
    display: inline-block;
    padding: 6px 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff !important;
    text-align: center;
    min-width: 150px;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    transform: skewX(-15deg);
    border-radius: 8px;
    border: none;
    background-size: 200% 200% !important;
    overflow: hidden;
}

.userBanner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 12px 12px;
    z-index: -1;
}

.userBanner span {
    display: inline-block;
    transform: skewX(15deg);
}

.admin { background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); box-shadow: 0 4px 15px rgba(255, 8, 68, 0.4); }
.developer { background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%); box-shadow: 0 4px 15px rgba(33, 147, 176, 0.4); }
.moder { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4); }
.support { background: linear-gradient(135deg, #f12711 0%, #f5af19 100%); box-shadow: 0 4px 15px rgba(241, 39, 17, 0.4); }
.user { background: linear-gradient(135deg, #f857a6 0%, #ff5858 100%); box-shadow: 0 4px 15px rgba(248, 87, 166, 0.4); }
.ga { background: linear-gradient(135deg, #f000ff 0%, #7b00ff 100%); box-shadow: 0 4px 15px rgba(240, 0, 255, 0.5); }
.zga { background: linear-gradient(135deg, #ec008c 0%, #fc6767 100%); box-shadow: 0 4px 15px rgba(236, 0, 140, 0.4); }
.leader { background: linear-gradient(135deg, #ffe259 0%, #ffa751 100%); box-shadow: 0 4px 15px rgba(255, 167, 81, 0.4); }
.gs { background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%); box-shadow: 0 4px 15px rgba(11, 163, 96, 0.4); }
.zgs { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4); }
.spec { background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); box-shadow: 0 4px 15px rgba(0, 198, 255, 0.4); }
.helper { background: linear-gradient(135deg, #1d976c 0%, #93f9b9 100%); box-shadow: 0 4px 15px rgba(29, 151, 108, 0.4); }
.bot { background: linear-gradient(135deg, #304352 0%, #d7d2cc 100%); box-shadow: 0 4px 15px rgba(48, 67, 82, 0.3); }

Молодец баннеры прикольные спасибо за баннеры

 

[Atarav_Watch]

OFFTOP

Красавчик