Welcome!

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

SignUp Now!

СРОЧНО ОЧЕНЬ НУЖНО

Июн
6
1
Пользователь
Кто нибудь видел такие баннеры групп пользователей, очень понравились 🙏🙏
 

Вложения

  • IMG_20260405_040749.png
    IMG_20260405_040749.png
    84.4 KB · Просмотры: 22
never stress
Дек
612
390
Активный
Кто нибудь видел такие баннеры групп пользователей, очень понравились 🙏🙏
css:
.vlad,.glavsled,.zamglavsled,.lider,.kur,.rykvod,.pomtech,.server2a,.server3l,.server3a,.server4a,.server2l,.ban,.specadm,.moroz,.modr,.vklad,.dima,.legend,.gltest,.sist,.mlmoder,.stmoder,.zgta,.techadm,.adm,.stadm,.razrab,.tpshka,.tester,.forum,.glavadm,.kk,.dir,.gm,.server1a,.server1l,.zga,.prmanager,.stsostav {
    color: #fff;
    border: 1.2px solid;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
    box-shadow: 0 0 6px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.3);
    transition: all .25s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-height: 28px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    margin: 0 2px 3px 0;
    line-height: 1.2
}

.userBanner {
    margin: 0 3px 4px 0 !important
}

.server4a,.tpshka,.tester,.kk,.gltest {
    color: #000;
    text-shadow: 0 1px 1px rgba(255,255,255,0.4)
}

.vlad::before,.glavsled::before,.zamglavsled::before,.lider::before,.kur::before,.rykvod::before,.pomtech::before,.server2a::before,.server3l::before,.server3a::before,.server4a::before,.server2l::before,.ban::before,.specadm::before,.moroz::before,.modr::before,.vklad::before,.dima::before,.legend::before,.gltest::before,.sist::before,.mlmoder::before,.stmoder::before,.zgta::before,.techadm::before,.adm::before,.stadm::before,.razrab::before,.tpshka::before,.tester::before,.forum::before,.glavadm::before,.kk::before,.dir::before,.gm::before,.server1a::before,.server1l::before,.zga::before,.prmanager::before,.stsostav::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 35%;
    right: 35%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.7) 70%, transparent 100%);
    border-radius: 1px;
    opacity: 0.7
}

.server4a::before,.tpshka::before,.tester::before,.kk::before,.gltest::before {
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.4) 70%, transparent 100%)
}

.vlad::after,.glavsled::after,.zamglavsled::after,.lider::after,.kur::after,.rykvod::after,.pomtech::after,.server2a::after,.server3l::after,.server3a::after,.server4a::after,.server2l::after,.ban::after,.specadm::after,.moroz::after,.modr::after,.vklad::after,.dima::after,.legend::after,.gltest::after,.sist::after,.mlmoder::after,.stmoder::after,.zgta::after,.techadm::after,.adm::after,.stadm::after,.razrab::after,.tpshka::after,.tester::after,.forum::after,.glavadm::after,.kk::after,.dir::after,.gm::after,.server1a::after,.server1l::after,.zga::after,.prmanager::after,.stsostav::after {
    margin-left: 4px;
    text-shadow: 0 0 3px currentColor;
    font-size: 0.75em;
    animation: subtleTwinkle 2.5s ease-in-out infinite
}

@keyframes subtleTwinkle {
    0%,100% {
        opacity: 0.8;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.1)
    }
}

.vlad:hover,.glavsled:hover,.zamglavsled:hover,.lider:hover,.kur:hover,.rykvod:hover,.pomtech:hover,.server2a:hover,.server3l:hover,.server3a:hover,.server4a:hover,.server2l:hover,.ban:hover,.specadm:hover,.moroz:hover,.modr:hover,.vklad:hover,.dima:hover,.legend:hover,.gltest:hover,.sist:hover,.mlmoder:hover,.stmoder:hover,.zgta:hover,.techadm:hover,.adm:hover,.stadm:hover,.razrab:hover,.tpshka:hover,.tester:hover,.forum:hover,.glavadm:hover,.kk:hover,.dir:hover,.gm:hover,.server1a:hover,.server1l:hover,.zga:hover,.prmanager:hover,.stsostav:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px currentColor,inset 0 1px 0 rgba(255,255,255,0.4);
    filter: brightness(1.08);
    z-index: 1
}

.vlad {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.vlad::after {
    content: '👑';
    color: #FFD700
}

.glavsled {
    background: linear-gradient(135deg, #1878ff, #4d9cff);
    border-color: #0D68EE
}

.glavsled::after {
    content: '🔍';
    color: #FFFFFF
}

.zamglavsled {
    background: linear-gradient(135deg, #1878ff, #4d9cff);
    border-color: #0D68EE
}

.zamglavsled::after {
    content: '🔎';
    color: #FFD700
}

.lider {
    background: linear-gradient(135deg, #ffa500, #ffc966);
    border-color: #E69500
}

.lider::after {
    content: '👑';
    color: #FF5500
}

.kur {
    background: linear-gradient(135deg, #d465f1, #e891ff);
    border-color: #C050E0
}

.kur::after {
    content: '📦';
    color: #FFFFFF
}

.rykvod {
    background: linear-gradient(135deg, #ffcb00, #ffe066);
    border-color: #E6B800
}

.rykvod::after {
    content: '🎖️';
    color: #FF6600
}

.pomtech {
    background: linear-gradient(135deg, #ff4d00, #ff8040);
    border-color: #E64600
}

.pomtech::after {
    content: '🔩';
    color: #FFFFFF
}

.server2a {
    background: linear-gradient(135deg, #008000, #0a0);
    border-color: #006600
}

.server2a::after {
    content: '🟢';
    color: #00FF00
}

.server3l {
    background: linear-gradient(135deg, #004eff, #37f);
    border-color: #003BD6
}

.server3l::after {
    content: '🔷';
    color: #00CCFF
}

.server3a {
    background: linear-gradient(135deg, #004eff, #37f);
    border-color: #003BD6
}

.server3a::after {
    content: '🔶';
    color: #FF9900
}

.server4a {
    background: linear-gradient(135deg, #ffcb00, #ffe066);
    border-color: #E6B800;
    border-radius: 25px
}

.server4a::after {
    content: '💛';
    color: #FF6600
}

.server2l {
    background: linear-gradient(135deg, #008000, #0a0);
    border-color: #006600
}

.server2l::after {
    content: '🟩';
    color: #00FF00
}

.ban {
    background: linear-gradient(135deg, #212428, #3a3f45);
    border-color: #1A1D21
}

.ban::after {
    content: '🚫';
    color: #FF3333
}

.specadm {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.specadm::after {
    content: '🛡️';
    color: #FFD700
}

.moroz {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.moroz::after {
    content: '❄️';
    color: #00CCFF
}

.modr {
    background: linear-gradient(135deg, #abcdef, #cde6ff);
    border-color: #9ABCDE
}

.modr::after {
    content: '🛡️';
    color: #FFFFFF
}

.vklad {
    background: linear-gradient(135deg, #66f, #99f);
    border-color: #33f
}

.vklad::after {
    content: '💰';
    color: #FFD700
}

.dima {
    background: linear-gradient(135deg, #ff5d76, #ff8da1);
    border-color: #FF4466
}

.dima::after {
    content: '🧑‍💻';
    color: #00BFFF
}

.legend {
    background: linear-gradient(135deg, #fc9432, #fc9432);
    border-color: #fc9432
}

.legend::after {
    content: '👑';
    color: #fc9432
}

.gltest {
    background: linear-gradient(135deg, #efef12, #ff6);
    border-color: #DFDF10
}

.gltest::after {
    content: '🧪';
    color: #FF4444
}

.sist {
    background: linear-gradient(135deg, #57cdd6, #7de8f0);
    border-color: #45BCC5
}

.sist::after {
    content: '⚙️';
    color: #FFFFFF
}

.mlmoder {
    background: linear-gradient(135deg, #54d3bf, #7ae8d6);
    border-color: #3AC0AB
}

.mlmoder::after {
    content: '🤖';
    color: #4A90E2
}

.stmoder {
    background: linear-gradient(135deg, #54d3bf, #7ae8d6);
    border-color: #3AC0AB
}

.stmoder::after {
    content: '📊';
    color: #4A90E2
}

.zgta {
    background: linear-gradient(135deg, #ff74a8, #ffa6cc);
    border-color: #FF5C99
}

.zgta::after {
    content: '🎀';
    color: #FFFFFF
}

.techadm {
    background: linear-gradient(135deg, #ff4d00, #ff8040);
    border-color: #E64600
}

.techadm::after {
    content: '🔧';
    color: #FFD700
}

.adm {
    background: linear-gradient(135deg, #fc6, #ffe0a3);
    border-color: #E6B850
}

.adm::after {
    content: '👨‍💼';
    color: #FFFFFF
}

.stadm {
    background: linear-gradient(135deg, #333aff, #666cff);
    border-color: #1F26E6
}

.stadm::after {
    content: '⭐';
    color: #FFD700
}

.razrab {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.razrab::after {
    content: '💻';
    color: #00CCFF
}

.tpshka {
    background: linear-gradient(135deg, #deb887, #f5d4aa);
    border-color: #C9A87A
}

.tpshka::after {
    content: '🛠️';
    color: #8B4513
}

.tester {
    background: linear-gradient(135deg, #8287c1, #a5a9d6);
    border-color: #6A6FB0
}

.tester::after {
    content: '🧪';
    color: #4A4F9E
}

.forum {
    background: linear-gradient(135deg, #a200ff, #c266ff);
    border-color: #8C00E6
}

.forum::after {
    content: '💬';
    color: #E6CCFF
}

.glavadm {
    background: linear-gradient(135deg, #c00, #f33);
    border-color: #B30000
}

.glavadm::after {
    content: '👑';
    color: gold
}

.kk {
    background: linear-gradient(135deg, #88ecdf, #b2f5ea);
    border-color: #66D9C7
}

.kk::after {
    content: '⚡';
    color: #0077cc
}

.dir {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.dir::after {
    content: '🎯';
    color: #ffcc00
}

.gm {
    background: linear-gradient(135deg, #09f, #3bf);
    border-color: #0077cc
}

.gm::after {
    content: '🛡️';
    color: #ffff00
}

.server1a {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.server1a::after {
    content: '🔴';
    color: #ffffff
}

.server1l {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.server1l::after {
    content: '🔺';
    color: #ffffff
}

.zga {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #ff0c0c
}

.zga::after {
    content: '✅';
    color: #00ff00
}

.prmanager {
    background: linear-gradient(135deg, #f07b14, #ff9e40);
    border-color: #D66B10
}

.prmanager::after {
    content: '📢';
    color: #FFD700
}

.stsostav {
    background: #6A5ACD;
    border-color: #6A5ACD
}

.stsostav::after {
    content: '🌟';
    color: #6A5ACD
}

.glavadm,.dir,.prmanager,.techadm,.adm,.stadm,.razrab,.legend,.glavsled,.rykvod,.specadm,.vlad,.dima,.stsostav {
    animation: subtlePulse 4s infinite
}

@keyframes subtlePulse {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.01)
    }
}

@media (max-width: 768px) {
    .vlad,.glavsled,.zamglavsled,.lider,.kur,.rykvod,.pomtech,.server2a,.server3l,.server3a,.server4a,.server2l,.ban,.specadm,.moroz,.modr,.vklad,.dima,.legend,.gltest,.sist,.mlmoder,.stmoder,.zgta,.techadm,.adm,.stadm,.razrab,.tpshka,.tester,.forum,.glavadm,.kk,.dir,.gm,.server1a,.server1l,.zga,.prmanager,.stsostav {
        font-size:0.65rem;
        padding: 4px 10px;
        min-height: 24px;
        border-radius: 20px;
        margin: 0 1px 2px 0
    }

    .vlad::after,.glavsled::after,.zamglavsled::after,.lider::after,.kur::after,.rykvod::after,.pomtech::after,.server2a::after,.server3l::after,.server3a::after,.server4a::after,.server2l::after,.ban::after,.specadm::after,.moroz::after,.modr::after,.vklad::after,.dima::after,.legend::after,.gltest::after,.sist::after,.mlmoder::after,.stmoder::after,.zgta::after,.techadm::after,.adm::after,.stadm::after,.razrab::after,.tpshka::after,.tester::after,.forum::after,.glavadm::after,.kk::after,.dir::after,.gm::after,.server1a::after,.server1l::after,.zga::after,.prmanager::after,.stsostav::after {
        display: none
    }

    .vlad::before,.glavsled::before,.zamglavsled::before,.lider::before,.kur::before,.rykvod::before,.pomtech::before,.server2a::before,.server3l::before,.server3a::before,.server4a::before,.server2l::before,.ban::before,.specadm::before,.moroz::before,.modr::before,.vklad::before,.dima::before,.legend::before,.gltest::before,.sist::before,.mlmoder::before,.stmoder::before,.zgta::before,.techadm::before,.adm::before,.stadm::before,.razrab::before,.tpshka::before,.tester::before,.forum::before,.glavadm::before,.kk::before,.dir::before,.gm::before,.server1a::before,.server1l::before,.zga::before,.prmanager::before,.stsostav::before {
        display: none
    }
}

.message .message-user .userBannerWrapper {
    margin-bottom: 5px !important
}

.message .message-user .userBanner {
    margin: 2px 3px 3px 0 !important
}

@media (prefers-color-scheme: dark) {
    .vlad,.glavsled,.zamglavsled,.lider,.kur,.rykvod,.pomtech,.server2a,.server3l,.server3a,.server4a,.server2l,.ban,.specadm,.moroz,.modr,.vklad,.dima,.legend,.gltest,.sist,.mlmoder,.stmoder,.zgta,.techadm,.adm,.stadm,.razrab,.tpshka,.tester,.forum,.glavadm,.kk,.dir,.gm,.server1a,.server1l,.zga,.prmanager,.stsostav {
        box-shadow:0 0 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2)
    }
}

@-webkit-keyframes wave {
    from {
        -webkit-mask-position: 150%
    }

    to {
        -webkit-mask-position: -50%
    }
}
 
Июн
6
1
Пользователь
Экстра лесс?
css:
.vlad,.glavsled,.zamglavsled,.lider,.kur,.rykvod,.pomtech,.server2a,.server3l,.server3a,.server4a,.server2l,.ban,.specadm,.moroz,.modr,.vklad,.dima,.legend,.gltest,.sist,.mlmoder,.stmoder,.zgta,.techadm,.adm,.stadm,.razrab,.tpshka,.tester,.forum,.glavadm,.kk,.dir,.gm,.server1a,.server1l,.zga,.prmanager,.stsostav {
    color: #fff;
    border: 1.2px solid;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
    box-shadow: 0 0 6px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.3);
    transition: all .25s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-height: 28px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    margin: 0 2px 3px 0;
    line-height: 1.2
}

.userBanner {
    margin: 0 3px 4px 0 !important
}

.server4a,.tpshka,.tester,.kk,.gltest {
    color: #000;
    text-shadow: 0 1px 1px rgba(255,255,255,0.4)
}

.vlad::before,.glavsled::before,.zamglavsled::before,.lider::before,.kur::before,.rykvod::before,.pomtech::before,.server2a::before,.server3l::before,.server3a::before,.server4a::before,.server2l::before,.ban::before,.specadm::before,.moroz::before,.modr::before,.vklad::before,.dima::before,.legend::before,.gltest::before,.sist::before,.mlmoder::before,.stmoder::before,.zgta::before,.techadm::before,.adm::before,.stadm::before,.razrab::before,.tpshka::before,.tester::before,.forum::before,.glavadm::before,.kk::before,.dir::before,.gm::before,.server1a::before,.server1l::before,.zga::before,.prmanager::before,.stsostav::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 35%;
    right: 35%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.7) 70%, transparent 100%);
    border-radius: 1px;
    opacity: 0.7
}

.server4a::before,.tpshka::before,.tester::before,.kk::before,.gltest::before {
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.4) 70%, transparent 100%)
}

.vlad::after,.glavsled::after,.zamglavsled::after,.lider::after,.kur::after,.rykvod::after,.pomtech::after,.server2a::after,.server3l::after,.server3a::after,.server4a::after,.server2l::after,.ban::after,.specadm::after,.moroz::after,.modr::after,.vklad::after,.dima::after,.legend::after,.gltest::after,.sist::after,.mlmoder::after,.stmoder::after,.zgta::after,.techadm::after,.adm::after,.stadm::after,.razrab::after,.tpshka::after,.tester::after,.forum::after,.glavadm::after,.kk::after,.dir::after,.gm::after,.server1a::after,.server1l::after,.zga::after,.prmanager::after,.stsostav::after {
    margin-left: 4px;
    text-shadow: 0 0 3px currentColor;
    font-size: 0.75em;
    animation: subtleTwinkle 2.5s ease-in-out infinite
}

@keyframes subtleTwinkle {
    0%,100% {
        opacity: 0.8;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.1)
    }
}

.vlad:hover,.glavsled:hover,.zamglavsled:hover,.lider:hover,.kur:hover,.rykvod:hover,.pomtech:hover,.server2a:hover,.server3l:hover,.server3a:hover,.server4a:hover,.server2l:hover,.ban:hover,.specadm:hover,.moroz:hover,.modr:hover,.vklad:hover,.dima:hover,.legend:hover,.gltest:hover,.sist:hover,.mlmoder:hover,.stmoder:hover,.zgta:hover,.techadm:hover,.adm:hover,.stadm:hover,.razrab:hover,.tpshka:hover,.tester:hover,.forum:hover,.glavadm:hover,.kk:hover,.dir:hover,.gm:hover,.server1a:hover,.server1l:hover,.zga:hover,.prmanager:hover,.stsostav:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 10px currentColor,inset 0 1px 0 rgba(255,255,255,0.4);
    filter: brightness(1.08);
    z-index: 1
}

.vlad {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.vlad::after {
    content: '👑';
    color: #FFD700
}

.glavsled {
    background: linear-gradient(135deg, #1878ff, #4d9cff);
    border-color: #0D68EE
}

.glavsled::after {
    content: '🔍';
    color: #FFFFFF
}

.zamglavsled {
    background: linear-gradient(135deg, #1878ff, #4d9cff);
    border-color: #0D68EE
}

.zamglavsled::after {
    content: '🔎';
    color: #FFD700
}

.lider {
    background: linear-gradient(135deg, #ffa500, #ffc966);
    border-color: #E69500
}

.lider::after {
    content: '👑';
    color: #FF5500
}

.kur {
    background: linear-gradient(135deg, #d465f1, #e891ff);
    border-color: #C050E0
}

.kur::after {
    content: '📦';
    color: #FFFFFF
}

.rykvod {
    background: linear-gradient(135deg, #ffcb00, #ffe066);
    border-color: #E6B800
}

.rykvod::after {
    content: '🎖️';
    color: #FF6600
}

.pomtech {
    background: linear-gradient(135deg, #ff4d00, #ff8040);
    border-color: #E64600
}

.pomtech::after {
    content: '🔩';
    color: #FFFFFF
}

.server2a {
    background: linear-gradient(135deg, #008000, #0a0);
    border-color: #006600
}

.server2a::after {
    content: '🟢';
    color: #00FF00
}

.server3l {
    background: linear-gradient(135deg, #004eff, #37f);
    border-color: #003BD6
}

.server3l::after {
    content: '🔷';
    color: #00CCFF
}

.server3a {
    background: linear-gradient(135deg, #004eff, #37f);
    border-color: #003BD6
}

.server3a::after {
    content: '🔶';
    color: #FF9900
}

.server4a {
    background: linear-gradient(135deg, #ffcb00, #ffe066);
    border-color: #E6B800;
    border-radius: 25px
}

.server4a::after {
    content: '💛';
    color: #FF6600
}

.server2l {
    background: linear-gradient(135deg, #008000, #0a0);
    border-color: #006600
}

.server2l::after {
    content: '🟩';
    color: #00FF00
}

.ban {
    background: linear-gradient(135deg, #212428, #3a3f45);
    border-color: #1A1D21
}

.ban::after {
    content: '🚫';
    color: #FF3333
}

.specadm {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.specadm::after {
    content: '🛡️';
    color: #FFD700
}

.moroz {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.moroz::after {
    content: '❄️';
    color: #00CCFF
}

.modr {
    background: linear-gradient(135deg, #abcdef, #cde6ff);
    border-color: #9ABCDE
}

.modr::after {
    content: '🛡️';
    color: #FFFFFF
}

.vklad {
    background: linear-gradient(135deg, #66f, #99f);
    border-color: #33f
}

.vklad::after {
    content: '💰';
    color: #FFD700
}

.dima {
    background: linear-gradient(135deg, #ff5d76, #ff8da1);
    border-color: #FF4466
}

.dima::after {
    content: '🧑‍💻';
    color: #00BFFF
}

.legend {
    background: linear-gradient(135deg, #fc9432, #fc9432);
    border-color: #fc9432
}

.legend::after {
    content: '👑';
    color: #fc9432
}

.gltest {
    background: linear-gradient(135deg, #efef12, #ff6);
    border-color: #DFDF10
}

.gltest::after {
    content: '🧪';
    color: #FF4444
}

.sist {
    background: linear-gradient(135deg, #57cdd6, #7de8f0);
    border-color: #45BCC5
}

.sist::after {
    content: '⚙️';
    color: #FFFFFF
}

.mlmoder {
    background: linear-gradient(135deg, #54d3bf, #7ae8d6);
    border-color: #3AC0AB
}

.mlmoder::after {
    content: '🤖';
    color: #4A90E2
}

.stmoder {
    background: linear-gradient(135deg, #54d3bf, #7ae8d6);
    border-color: #3AC0AB
}

.stmoder::after {
    content: '📊';
    color: #4A90E2
}

.zgta {
    background: linear-gradient(135deg, #ff74a8, #ffa6cc);
    border-color: #FF5C99
}

.zgta::after {
    content: '🎀';
    color: #FFFFFF
}

.techadm {
    background: linear-gradient(135deg, #ff4d00, #ff8040);
    border-color: #E64600
}

.techadm::after {
    content: '🔧';
    color: #FFD700
}

.adm {
    background: linear-gradient(135deg, #fc6, #ffe0a3);
    border-color: #E6B850
}

.adm::after {
    content: '👨‍💼';
    color: #FFFFFF
}

.stadm {
    background: linear-gradient(135deg, #333aff, #666cff);
    border-color: #1F26E6
}

.stadm::after {
    content: '⭐';
    color: #FFD700
}

.razrab {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.razrab::after {
    content: '💻';
    color: #00CCFF
}

.tpshka {
    background: linear-gradient(135deg, #deb887, #f5d4aa);
    border-color: #C9A87A
}

.tpshka::after {
    content: '🛠️';
    color: #8B4513
}

.tester {
    background: linear-gradient(135deg, #8287c1, #a5a9d6);
    border-color: #6A6FB0
}

.tester::after {
    content: '🧪';
    color: #4A4F9E
}

.forum {
    background: linear-gradient(135deg, #a200ff, #c266ff);
    border-color: #8C00E6
}

.forum::after {
    content: '💬';
    color: #E6CCFF
}

.glavadm {
    background: linear-gradient(135deg, #c00, #f33);
    border-color: #B30000
}

.glavadm::after {
    content: '👑';
    color: gold
}

.kk {
    background: linear-gradient(135deg, #88ecdf, #b2f5ea);
    border-color: #66D9C7
}

.kk::after {
    content: '⚡';
    color: #0077cc
}

.dir {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.dir::after {
    content: '🎯';
    color: #ffcc00
}

.gm {
    background: linear-gradient(135deg, #09f, #3bf);
    border-color: #0077cc
}

.gm::after {
    content: '🛡️';
    color: #ffff00
}

.server1a {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.server1a::after {
    content: '🔴';
    color: #ffffff
}

.server1l {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #B30000
}

.server1l::after {
    content: '🔺';
    color: #ffffff
}

.zga {
    background: linear-gradient(135deg, #d80000, #f33);
    border-color: #ff0c0c
}

.zga::after {
    content: '✅';
    color: #00ff00
}

.prmanager {
    background: linear-gradient(135deg, #f07b14, #ff9e40);
    border-color: #D66B10
}

.prmanager::after {
    content: '📢';
    color: #FFD700
}

.stsostav {
    background: #6A5ACD;
    border-color: #6A5ACD
}

.stsostav::after {
    content: '🌟';
    color: #6A5ACD
}

.glavadm,.dir,.prmanager,.techadm,.adm,.stadm,.razrab,.legend,.glavsled,.rykvod,.specadm,.vlad,.dima,.stsostav {
    animation: subtlePulse 4s infinite
}

@keyframes subtlePulse {
    0%,100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.01)
    }
}

@media (max-width: 768px) {
    .vlad,.glavsled,.zamglavsled,.lider,.kur,.rykvod,.pomtech,.server2a,.server3l,.server3a,.server4a,.server2l,.ban,.specadm,.moroz,.modr,.vklad,.dima,.legend,.gltest,.sist,.mlmoder,.stmoder,.zgta,.techadm,.adm,.stadm,.razrab,.tpshka,.tester,.forum,.glavadm,.kk,.dir,.gm,.server1a,.server1l,.zga,.prmanager,.stsostav {
        font-size:0.65rem;
        padding: 4px 10px;
        min-height: 24px;
        border-radius: 20px;
        margin: 0 1px 2px 0
    }

    .vlad::after,.glavsled::after,.zamglavsled::after,.lider::after,.kur::after,.rykvod::after,.pomtech::after,.server2a::after,.server3l::after,.server3a::after,.server4a::after,.server2l::after,.ban::after,.specadm::after,.moroz::after,.modr::after,.vklad::after,.dima::after,.legend::after,.gltest::after,.sist::after,.mlmoder::after,.stmoder::after,.zgta::after,.techadm::after,.adm::after,.stadm::after,.razrab::after,.tpshka::after,.tester::after,.forum::after,.glavadm::after,.kk::after,.dir::after,.gm::after,.server1a::after,.server1l::after,.zga::after,.prmanager::after,.stsostav::after {
        display: none
    }

    .vlad::before,.glavsled::before,.zamglavsled::before,.lider::before,.kur::before,.rykvod::before,.pomtech::before,.server2a::before,.server3l::before,.server3a::before,.server4a::before,.server2l::before,.ban::before,.specadm::before,.moroz::before,.modr::before,.vklad::before,.dima::before,.legend::before,.gltest::before,.sist::before,.mlmoder::before,.stmoder::before,.zgta::before,.techadm::before,.adm::before,.stadm::before,.razrab::before,.tpshka::before,.tester::before,.forum::before,.glavadm::before,.kk::before,.dir::before,.gm::before,.server1a::before,.server1l::before,.zga::before,.prmanager::before,.stsostav::before {
        display: none
    }
}

.message .message-user .userBannerWrapper {
    margin-bottom: 5px !important
}

.message .message-user .userBanner {
    margin: 2px 3px 3px 0 !important
}

@media (prefers-color-scheme: dark) {
    .vlad,.glavsled,.zamglavsled,.lider,.kur,.rykvod,.pomtech,.server2a,.server3l,.server3a,.server4a,.server2l,.ban,.specadm,.moroz,.modr,.vklad,.dima,.legend,.gltest,.sist,.mlmoder,.stmoder,.zgta,.techadm,.adm,.stadm,.razrab,.tpshka,.tester,.forum,.glavadm,.kk,.dir,.gm,.server1a,.server1l,.zga,.prmanager,.stsostav {
        box-shadow:0 0 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.2)
    }
}

@-webkit-keyframes wave {
    from {
        -webkit-mask-position: 150%
    }

    to {
        -webkit-mask-position: -50%
    }
}
 
never stress
Дек
612
390
Активный
css:
.pgreen {
    background-image: linear-gradient(150deg, #32cd32, #008000, #32cd32, #228b22);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #32cd32,inset 0 0 10px rgba(50,205,50,0.3);
    position: relative;
    overflow: hidden;
    animation: christmasTree 4s ease infinite
}

@keyframes christmasTree {
    0% {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #32cd32
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0px 0px 12px #32cd32
    }

    100% {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #32cd32
    }
}

.pgreen::before {
    margin-right: 3px;
    animation: treeWobble 2s infinite ease-in-out
}

@keyframes treeWobble {
    0%,100% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(-5deg)
    }

    75% {
        transform: rotate(5deg)
    }
}

.porange {
    background-image: linear-gradient(150deg, #ffbf00, #ff9800, #ffa500, #ff8c00);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #ff9800,inset 0 0 8px rgba(255,152,0,0.3);
    animation: mandarinGlow 3s infinite alternate;
    position: relative
}

@keyframes mandarinGlow {
    from {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #ff9800
    }

    to {
        background-position: 100% 50%;
        box-shadow: 0px 0px 15px #ff9800
    }
}

.porange::after {
    content: '🍊';
    margin-left: 3px;
    animation: fruitBounce 1.5s infinite
}

@keyframes fruitBounce {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-2px)
    }
}

.paqua {
    background-image: linear-gradient(150deg, #03a9f4, #2ebcfc, #00bcd4, #03a9f4);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #03a9f4,inset 0 0 10px rgba(3,169,244,0.2);
    animation: iceFlow 5s linear infinite;
    position: relative
}

@keyframes iceFlow {
    0% {
        background-position: 0% 50%;
        filter: brightness(1)
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.2)
    }

    100% {
        background-position: 0% 50%;
        filter: brightness(1)
    }
}

.paqua::before {
    content: '❄️';
    margin-right: 3px;
    animation: snowflakeSpin 4s infinite linear
}

.pred {
    background-image: linear-gradient(150deg, #f00, #b22222, #f44, #c00, #f00);
    background-size: 400% 400%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #f00,inset 0 0 15px rgba(255,0,0,0.4);
    animation: ballGlow 3s ease-in-out infinite
}

@keyframes ballGlow {
    0%,100% {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #f00
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0px 0px 15px #f00,0px 0px 25px #f44
    }
}

.pred::after {
    content: '🔴';
    margin-left: 3px;
    font-size: 10px;
    animation: shineReflect 2s infinite
}

@keyframes shineReflect {
    0%,100% {
        opacity: 0.7
    }

    50% {
        opacity: 1
    }
}

.ypred {
    background-image: linear-gradient(150deg, #ffe218, #ffc018, #ffd700, #ffa500, #ffc018);
    background-size: 300% 300%;
    color: black;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #ffc018,inset 0 0 10px rgba(255,193,7,0.4);
    animation: goldFire 2s infinite alternate;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5)
}

@keyframes goldFire {
    from {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #ffc018
    }

    to {
        background-position: 100% 50%;
        box-shadow: 0px 0px 12px #ffc018,0px 0px 20px #ffd700
    }
}

.ypred::before {
    content: '✨';
    margin-right: 3px;
    animation: sparkleTwinkle 1s infinite alternate
}

.bpred {
    background-image: linear-gradient(150deg, #1844ff, #186fff, #1e88e5, #0d47a1, #1844ff);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #1844ff,inset 0 0 10px rgba(24,68,255,0.3);
    animation: nightSky 6s ease infinite;
    position: relative;
    overflow: hidden
}

@keyframes nightSky {
    0% {
        background-position: 0% 50%;
        filter: brightness(1)
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.1)
    }

    100% {
        background-position: 0% 50%;
        filter: brightness(1)
    }
}

.bpred::after {
    content: '⭐';
    margin-left: 3px;
    font-size: 10px;
    animation: starTwinkle 1.5s infinite alternate
}

@keyframes starTwinkle {
    from {
        opacity: 0.3;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1.1)
    }
}
 
Июн
6
1
Пользователь
css:
.pgreen {
    background-image: linear-gradient(150deg, #32cd32, #008000, #32cd32, #228b22);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #32cd32,inset 0 0 10px rgba(50,205,50,0.3);
    position: relative;
    overflow: hidden;
    animation: christmasTree 4s ease infinite
}

@keyframes christmasTree {
    0% {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #32cd32
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0px 0px 12px #32cd32
    }

    100% {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #32cd32
    }
}

.pgreen::before {
    margin-right: 3px;
    animation: treeWobble 2s infinite ease-in-out
}

@keyframes treeWobble {
    0%,100% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(-5deg)
    }

    75% {
        transform: rotate(5deg)
    }
}

.porange {
    background-image: linear-gradient(150deg, #ffbf00, #ff9800, #ffa500, #ff8c00);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #ff9800,inset 0 0 8px rgba(255,152,0,0.3);
    animation: mandarinGlow 3s infinite alternate;
    position: relative
}

@keyframes mandarinGlow {
    from {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #ff9800
    }

    to {
        background-position: 100% 50%;
        box-shadow: 0px 0px 15px #ff9800
    }
}

.porange::after {
    content: '🍊';
    margin-left: 3px;
    animation: fruitBounce 1.5s infinite
}

@keyframes fruitBounce {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-2px)
    }
}

.paqua {
    background-image: linear-gradient(150deg, #03a9f4, #2ebcfc, #00bcd4, #03a9f4);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #03a9f4,inset 0 0 10px rgba(3,169,244,0.2);
    animation: iceFlow 5s linear infinite;
    position: relative
}

@keyframes iceFlow {
    0% {
        background-position: 0% 50%;
        filter: brightness(1)
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.2)
    }

    100% {
        background-position: 0% 50%;
        filter: brightness(1)
    }
}

.paqua::before {
    content: '❄️';
    margin-right: 3px;
    animation: snowflakeSpin 4s infinite linear
}

.pred {
    background-image: linear-gradient(150deg, #f00, #b22222, #f44, #c00, #f00);
    background-size: 400% 400%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #f00,inset 0 0 15px rgba(255,0,0,0.4);
    animation: ballGlow 3s ease-in-out infinite
}

@keyframes ballGlow {
    0%,100% {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #f00
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0px 0px 15px #f00,0px 0px 25px #f44
    }
}

.pred::after {
    content: '🔴';
    margin-left: 3px;
    font-size: 10px;
    animation: shineReflect 2s infinite
}

@keyframes shineReflect {
    0%,100% {
        opacity: 0.7
    }

    50% {
        opacity: 1
    }
}

.ypred {
    background-image: linear-gradient(150deg, #ffe218, #ffc018, #ffd700, #ffa500, #ffc018);
    background-size: 300% 300%;
    color: black;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #ffc018,inset 0 0 10px rgba(255,193,7,0.4);
    animation: goldFire 2s infinite alternate;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5)
}

@keyframes goldFire {
    from {
        background-position: 0% 50%;
        box-shadow: 0px 0px 6px #ffc018
    }

    to {
        background-position: 100% 50%;
        box-shadow: 0px 0px 12px #ffc018,0px 0px 20px #ffd700
    }
}

.ypred::before {
    content: '✨';
    margin-right: 3px;
    animation: sparkleTwinkle 1s infinite alternate
}

.bpred {
    background-image: linear-gradient(150deg, #1844ff, #186fff, #1e88e5, #0d47a1, #1844ff);
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 6px #1844ff,inset 0 0 10px rgba(24,68,255,0.3);
    animation: nightSky 6s ease infinite;
    position: relative;
    overflow: hidden
}

@keyframes nightSky {
    0% {
        background-position: 0% 50%;
        filter: brightness(1)
    }

    50% {
        background-position: 100% 50%;
        filter: brightness(1.1)
    }

    100% {
        background-position: 0% 50%;
        filter: brightness(1)
    }
}

.bpred::after {
    content: '⭐';
    margin-left: 3px;
    font-size: 10px;
    animation: starTwinkle 1.5s infinite alternate
}

@keyframes starTwinkle {
    from {
        opacity: 0.3;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1.1)
    }
}
можешь пожалуйста сказать имена классов
 
Сверху