Welcome!

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

SignUp Now!

Дайте код префиксов.

Решение
css:
.rainbow-prefix {
    display: inline-block;
    padding: 3px 12px;
    font-weight: bold;
    border-radius: 12px;
    position: relative;
    z-index: 0;
    background: #1f1f1f;
    background-image: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 1800% 1800%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowText 6s ease infinite
}

.rainbow-prefix::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size...
never stress
Дек
617
433
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
css:
.userBanner {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 60%;
    padding: 6px 12px;
    background-size: 400% 400% !important;
    animation: AnimBanner 10s ease infinite !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 50px;
    margin: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .3s ease
}

.userBanner.userBanner--staff {
    color: white;
    background: linear-gradient(80deg, #f00, #ff8000, #ff0, #0f0, #0ff, #00f, #f0f);
    font-size: 60%;
    border-radius: 50px;
    text-align: center;
    padding: 6px 12px 3px;
    font-style: normal;
    border: none
}

.userBanner.cosmic {
    background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #f5576c);
    border: 1px solid rgba(255,255,255,0.3);
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.nebula {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #66bb6a, #42a5f5, #ab47bc);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.galaxy {
    background: linear-gradient(270deg, #000428, #004e92, #2c3e50, #3498db);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.quantum {
    background: linear-gradient(270deg, #00b4db, #0083b0, #00f5a0, #00d9f5);
    animation: AnimBanner 5s ease infinite,glowPulse 2.5s ease-in-out infinite !important
}

.userBanner.cyber {
    background: linear-gradient(270deg, #ff0084, #33001b, #ff0084);
    border: 1px solid #ff0084;
    animation: AnimBanner 4s ease infinite,glowPulse 2s ease-in-out infinite !important
}

.userBanner.neon {
    background: linear-gradient(270deg, #00ff87, #60efff, #0061ff);
    color: #000;
    text-shadow: none;
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.hologram {
    background: linear-gradient(270deg, #ff75c3, #ffa647, #ffe83f, #9fff5b, #70e2ff, #cd93ff);
    animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
}

.userBanner.matrix {
    background: linear-gradient(270deg, #0f0, #0c0, #090, #060);
    color: #000;
    animation: AnimBanner 5s ease infinite,matrixGlow 2s ease-in-out infinite !important
}

.userBanner.aurora {
    background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.ocean {
    background: linear-gradient(270deg, #2193b0, #6dd5ed, #6dd5fa, #2193b0);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.forest {
    background: linear-gradient(270deg, #56ab2f, #a8e6cf, #56ab2f, #2c7744);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.sunset {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fad0c4, #ff9a9e);
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.gold {
    background: linear-gradient(270deg, #ffd700, #ffed4e, #ffd700, #daa520);
    color: #000;
    border: 1px solid #ffd700;
    animation: AnimBanner 5s ease infinite,goldPulse 2s ease-in-out infinite !important
}

.userBanner.platinum {
    background: linear-gradient(270deg, #e5e4e2, #b6b6b4, #e5e4e2, #8a8a88);
    color: #000;
    animation: AnimBanner 7s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.diamond {
    background: linear-gradient(270deg, #b9f2ff, #e6f7ff, #b9f2ff, #89cff0);
    color: #0066cc;
    animation: AnimBanner 8s ease infinite,diamondShine 3s ease-in-out infinite !important
}

.userBanner.crystal {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #66bb6a, #42a5f5);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.epic {
    background: linear-gradient(270deg, #8a2be2, #4b0082, #9400d3);
    animation: AnimBanner 6s ease infinite,epicGlow 2.5s ease-in-out infinite !important
}

.userBanner.legendary {
    background: linear-gradient(270deg, #ff8c00, #ff4500, #dc143c);
    animation: AnimBanner 4s ease infinite,legendaryFire 2s ease-in-out infinite !important
}

.userBanner.mythic {
    background: linear-gradient(270deg, #ff1493, #c71585, #8b008b);
    animation: AnimBanner 7s ease infinite,mythicPulse 3s ease-in-out infinite !important
}

.userBanner.heroic {
    background: linear-gradient(270deg, #1e90ff, #00bfff, #1e90ff);
    animation: AnimBanner 8s ease infinite,heroicGlow 4s ease-in-out infinite !important
}

.userBanner.spring {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
    animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
}

.userBanner.summer {
    background: linear-gradient(270deg, #ffecd2, #fcb69f, #ff9a8b);
    color: #000;
    animation: AnimBanner 7s ease infinite,summerGlow 3s ease-in-out infinite !important
}

.userBanner.autumn {
    background: linear-gradient(270deg, #ff9a62, #ff6b6b, #c56c86);
    animation: AnimBanner 8s ease infinite,autumnGlow 4s ease-in-out infinite !important
}

.userBanner.winter {
    background: linear-gradient(270deg, #a1c4fd, #c2e9fb, #a1c4fd);
    color: #2c3e50;
    animation: AnimBanner 9s ease infinite,winterSparkle 5s ease-in-out infinite !important
}

.userBanner.creator {
    background: linear-gradient(270deg, #f00, #ff8000, #ff0, #0f0, #0ff, #00f, #f0f);
    border: 2px solid rgba(255,255,255,0.5);
    font-size: 55%;
    animation: AnimBanner 12s ease infinite,rainbowGlow 6s ease-in-out infinite !important
}

.userBanner.moderator {
    background: linear-gradient(270deg, #4facfe, #00f2fe, #4facfe);
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.administrator {
    background: linear-gradient(270deg, #f00, #ff6b6b, #f00);
    border: 1px solid #f00;
    animation: AnimBanner 5s ease infinite,adminPulse 2s ease-in-out infinite !important
}

.userBanner.developer {
    background: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00);
    color: #000;
    animation: AnimBanner 6s ease infinite,matrixGlow 3s ease-in-out infinite !important
}

.userBanner.designer {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #ffeaa7);
    color: #000;
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.supporter {
    background: linear-gradient(270deg, #fdbb2d, #22c1c3, #fdbb2d);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.vip {
    background: linear-gradient(270deg, #833ab4, #fd1d1d, #fcb045);
    border: 1px solid rgba(252,176,69,0.5);
    animation: AnimBanner 6s ease infinite,vipGlow 3s ease-in-out infinite !important
}

.userBanner.kawaii {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
    border: 2px dotted rgba(255,255,255,0.5);
    animation: AnimBanner 9s ease infinite,kawaiiBounce 4s ease-in-out infinite !important
}

.userBanner.anime {
    background: linear-gradient(270deg, #ff6b6b, #ffa8a8, #ff6b6b, #ff8e8e);
    animation: AnimBanner 7s ease infinite,animePulse 3s ease-in-out infinite !important
}

.userBanner.retro {
    background: linear-gradient(270deg, #ffafbd, #ffc3a0, #ffafbd);
    color: #8b4513;
    animation: AnimBanner 8s ease infinite,retroGlow 4s ease-in-out infinite !important
}

.userBanner.vintage {
    background: linear-gradient(270deg, #d4af37, #c9a227, #d4af37);
    color: #8b4513;
    border: 1px solid #8b4513;
    animation: AnimBanner 10s ease infinite,vintageShine 5s ease-in-out infinite !important
}

.userBanner.future {
    background: linear-gradient(270deg, #0fc, #0cf, #0fc);
    color: #000;
    animation: AnimBanner 5s ease infinite,futureGlow 2s ease-in-out infinite !important
}

.userBanner.tech {
    background: linear-gradient(270deg, #667eea, #764ba2, #667eea);
    animation: AnimBanner 7s ease infinite,techPulse 3s ease-in-out infinite !important
}

.userBanner.magic {
    background: linear-gradient(270deg, #f0c, #33f, #f0c);
    animation: AnimBanner 6s ease infinite,magicSparkle 3s ease-in-out infinite !important
}

.userBanner.wizard {
    background: linear-gradient(270deg, #9d50bb, #6e48aa, #9d50bb);
    animation: AnimBanner 8s ease infinite,wizardGlow 4s ease-in-out infinite !important
}

.userBanner.enchanted {
    background: linear-gradient(270deg, #0f0, #080, #0f0);
    color: #000;
    animation: AnimBanner 7s ease infinite,enchantedGlow 3.5s ease-in-out infinite !important
}

.userBanner.champion {
    background: linear-gradient(270deg, #ffd700, #ffed4e, #ffd700);
    color: #000;
    border: 2px solid #daa520;
    animation: AnimBanner 4s ease infinite,championShine 2s ease-in-out infinite !important
}

.userBanner.innovator {
    background: linear-gradient(270deg, #0f8, #0cf, #0f8);
    color: #000;
    animation: AnimBanner 5s ease infinite,innovatorGlow 2.5s ease-in-out infinite !important
}

.userBanner.visionary {
    background: linear-gradient(270deg, #f0f, #0ff, #f0f);
    color: #000;
    animation: AnimBanner 6s ease infinite,visionaryPulse 3s ease-in-out infinite !important
}

.userBanner.minimal {
    background: linear-gradient(270deg, #667eea, #764ba2);
    font-size: 55%;
    padding: 4px 10px;
    animation: AnimBanner 10s ease infinite,minimalGlow 5s ease-in-out infinite !important
}

.userBanner.sleek {
    background: linear-gradient(270deg, #2c3e50, #3498db);
    font-size: 58%;
    animation: AnimBanner 12s ease infinite,sleekPulse 6s ease-in-out infinite !important
}

.userBanner.elegant {
    background: linear-gradient(270deg, #636363, #a2a2a2);
    font-size: 56%;
    animation: AnimBanner 15s ease infinite,elegantGlow 7s ease-in-out infinite !important
}

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

    25% {
        background-position: 50% 75%
    }

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

    75% {
        background-position: 50% 25%
    }

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

@keyframes glowPulse {
    0%,100% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 4px 20px rgba(255,255,255,0.3),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes matrixGlow {
    0%,100% {
        box-shadow: 0 0 15px rgba(0,255,0,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px rgba(0,255,0,0.9),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes goldPulse {
    0%,100% {
        box-shadow: 0 0 20px rgba(255,215,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 35px #ffd700,0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes diamondShine {
    0%,100% {
        box-shadow: 0 0 18px rgba(185,242,255,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px rgba(185,242,255,0.9),0 0 10px rgba(255,255,255,0.5),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes epicGlow {
    0%,100% {
        box-shadow: 0 0 15px rgba(138,43,226,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 25px rgba(138,43,226,0.9),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes legendaryFire {
    0%,100% {
        box-shadow: 0 0 18px rgba(255,140,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px #ff4500,0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes rainbowGlow {
    0%,100% {
        box-shadow: 0 0 25px rgba(255,0,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    16% {
        box-shadow: 0 0 25px rgba(255,128,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    33% {
        box-shadow: 0 0 25px rgba(255,255,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 25px rgba(0,255,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    66% {
        box-shadow: 0 0 25px rgba(0,255,255,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    83% {
        box-shadow: 0 0 25px rgba(0,0,255,0.8),0 2px 8px rgba(0,0,0,0.2)
    }
}

@keyframes adminPulse {
    0%,100% {
        box-shadow: 0 0 20px rgba(255,0,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 35px #f00,0 2px 8px rgba(0,0,0,0.3)
    }
}

.userBanner.premium {
    animation: AnimBanner 6s ease infinite,goldPulse 2s ease-in-out infinite !important
}

.userBanner.animated {
    animation: AnimBanner 5s ease infinite,glowPulse 2s ease-in-out infinite !important;
    transition: all .3s ease
}

.userBanner.animated:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
    animation-duration: 3s,1s !important
}

.userBanner.compact {
    font-size: 50%;
    padding: 4px 8px;
    max-width: 150px
}

.userBanner.tiny {
    font-size: 45%;
    padding: 3px 6px;
    max-width: 120px
}

.userBanner:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
    animation-duration: 4s,2s !important;
    z-index: 10
}

@media (max-width: 768px) {
    .userBanner {
        font-size:55%;
        padding: 5px 10px;
        max-width: 180px;
        animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
    }

    .userBanner.compact {
        max-width: 130px
    }

    .userBanner.tiny {
        max-width: 100px
    }
}
 
never stress
Дек
617
433
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
OFFTOP

Если помогло прошу отметить как ответ

 
never stress
Дек
617
433
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Это же баннеры не?
а те чего надо? скрин плз приложи, я не понял
 
never stress
Дек
617
433
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
css:
.rainbow-prefix {
    display: inline-block;
    padding: 3px 12px;
    font-weight: bold;
    border-radius: 12px;
    position: relative;
    z-index: 0;
    background: #1f1f1f;
    background-image: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 1800% 1800%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowText 6s ease infinite
}

.rainbow-prefix::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 1800% 1800%;
    animation: rainbowBorder 6s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1
}
@keyframes rainbowText {
    0% {
        background-position: 0% 50%
    }

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

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

@keyframes rainbowBorder {
    0% {
        background-position: 100% 50%
    }

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

    100% {
        background-position: 100% 50%
    }
}
 
Осуждён за гениальность или проклят за талант?
Сен
398
549
Пользователь
css:
.userBanner {
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 60%;
    padding: 6px 12px;
    background-size: 400% 400% !important;
    animation: AnimBanner 10s ease infinite !important;
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 50px;
    margin: 2px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .3s ease
}

.userBanner.userBanner--staff {
    color: white;
    background: linear-gradient(80deg, #f00, #ff8000, #ff0, #0f0, #0ff, #00f, #f0f);
    font-size: 60%;
    border-radius: 50px;
    text-align: center;
    padding: 6px 12px 3px;
    font-style: normal;
    border: none
}

.userBanner.cosmic {
    background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #f5576c);
    border: 1px solid rgba(255,255,255,0.3);
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.nebula {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #66bb6a, #42a5f5, #ab47bc);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.galaxy {
    background: linear-gradient(270deg, #000428, #004e92, #2c3e50, #3498db);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.quantum {
    background: linear-gradient(270deg, #00b4db, #0083b0, #00f5a0, #00d9f5);
    animation: AnimBanner 5s ease infinite,glowPulse 2.5s ease-in-out infinite !important
}

.userBanner.cyber {
    background: linear-gradient(270deg, #ff0084, #33001b, #ff0084);
    border: 1px solid #ff0084;
    animation: AnimBanner 4s ease infinite,glowPulse 2s ease-in-out infinite !important
}

.userBanner.neon {
    background: linear-gradient(270deg, #00ff87, #60efff, #0061ff);
    color: #000;
    text-shadow: none;
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.hologram {
    background: linear-gradient(270deg, #ff75c3, #ffa647, #ffe83f, #9fff5b, #70e2ff, #cd93ff);
    animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
}

.userBanner.matrix {
    background: linear-gradient(270deg, #0f0, #0c0, #090, #060);
    color: #000;
    animation: AnimBanner 5s ease infinite,matrixGlow 2s ease-in-out infinite !important
}

.userBanner.aurora {
    background: linear-gradient(270deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.ocean {
    background: linear-gradient(270deg, #2193b0, #6dd5ed, #6dd5fa, #2193b0);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.forest {
    background: linear-gradient(270deg, #56ab2f, #a8e6cf, #56ab2f, #2c7744);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.sunset {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fad0c4, #ff9a9e);
    animation: AnimBanner 6s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.gold {
    background: linear-gradient(270deg, #ffd700, #ffed4e, #ffd700, #daa520);
    color: #000;
    border: 1px solid #ffd700;
    animation: AnimBanner 5s ease infinite,goldPulse 2s ease-in-out infinite !important
}

.userBanner.platinum {
    background: linear-gradient(270deg, #e5e4e2, #b6b6b4, #e5e4e2, #8a8a88);
    color: #000;
    animation: AnimBanner 7s ease infinite,glowPulse 3s ease-in-out infinite !important
}

.userBanner.diamond {
    background: linear-gradient(270deg, #b9f2ff, #e6f7ff, #b9f2ff, #89cff0);
    color: #0066cc;
    animation: AnimBanner 8s ease infinite,diamondShine 3s ease-in-out infinite !important
}

.userBanner.crystal {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #66bb6a, #42a5f5);
    animation: AnimBanner 9s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.epic {
    background: linear-gradient(270deg, #8a2be2, #4b0082, #9400d3);
    animation: AnimBanner 6s ease infinite,epicGlow 2.5s ease-in-out infinite !important
}

.userBanner.legendary {
    background: linear-gradient(270deg, #ff8c00, #ff4500, #dc143c);
    animation: AnimBanner 4s ease infinite,legendaryFire 2s ease-in-out infinite !important
}

.userBanner.mythic {
    background: linear-gradient(270deg, #ff1493, #c71585, #8b008b);
    animation: AnimBanner 7s ease infinite,mythicPulse 3s ease-in-out infinite !important
}

.userBanner.heroic {
    background: linear-gradient(270deg, #1e90ff, #00bfff, #1e90ff);
    animation: AnimBanner 8s ease infinite,heroicGlow 4s ease-in-out infinite !important
}

.userBanner.spring {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
    animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
}

.userBanner.summer {
    background: linear-gradient(270deg, #ffecd2, #fcb69f, #ff9a8b);
    color: #000;
    animation: AnimBanner 7s ease infinite,summerGlow 3s ease-in-out infinite !important
}

.userBanner.autumn {
    background: linear-gradient(270deg, #ff9a62, #ff6b6b, #c56c86);
    animation: AnimBanner 8s ease infinite,autumnGlow 4s ease-in-out infinite !important
}

.userBanner.winter {
    background: linear-gradient(270deg, #a1c4fd, #c2e9fb, #a1c4fd);
    color: #2c3e50;
    animation: AnimBanner 9s ease infinite,winterSparkle 5s ease-in-out infinite !important
}

.userBanner.creator {
    background: linear-gradient(270deg, #f00, #ff8000, #ff0, #0f0, #0ff, #00f, #f0f);
    border: 2px solid rgba(255,255,255,0.5);
    font-size: 55%;
    animation: AnimBanner 12s ease infinite,rainbowGlow 6s ease-in-out infinite !important
}

.userBanner.moderator {
    background: linear-gradient(270deg, #4facfe, #00f2fe, #4facfe);
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.administrator {
    background: linear-gradient(270deg, #f00, #ff6b6b, #f00);
    border: 1px solid #f00;
    animation: AnimBanner 5s ease infinite,adminPulse 2s ease-in-out infinite !important
}

.userBanner.developer {
    background: linear-gradient(270deg, #feea10, #ff931e, #df841a, #01a72c, #f819a7, #0859fc, #0045bb, #7b9de0, #80c3df, #008000, #32cd32, #da0, #c00);
    color: #000;
    animation: AnimBanner 6s ease infinite,matrixGlow 3s ease-in-out infinite !important
}

.userBanner.designer {
    background: linear-gradient(270deg, #ff6b6b, #ffa726, #ffeaa7);
    color: #000;
    animation: AnimBanner 8s ease infinite,glowPulse 4s ease-in-out infinite !important
}

.userBanner.supporter {
    background: linear-gradient(270deg, #fdbb2d, #22c1c3, #fdbb2d);
    animation: AnimBanner 7s ease infinite,glowPulse 3.5s ease-in-out infinite !important
}

.userBanner.vip {
    background: linear-gradient(270deg, #833ab4, #fd1d1d, #fcb045);
    border: 1px solid rgba(252,176,69,0.5);
    animation: AnimBanner 6s ease infinite,vipGlow 3s ease-in-out infinite !important
}

.userBanner.kawaii {
    background: linear-gradient(270deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
    border: 2px dotted rgba(255,255,255,0.5);
    animation: AnimBanner 9s ease infinite,kawaiiBounce 4s ease-in-out infinite !important
}

.userBanner.anime {
    background: linear-gradient(270deg, #ff6b6b, #ffa8a8, #ff6b6b, #ff8e8e);
    animation: AnimBanner 7s ease infinite,animePulse 3s ease-in-out infinite !important
}

.userBanner.retro {
    background: linear-gradient(270deg, #ffafbd, #ffc3a0, #ffafbd);
    color: #8b4513;
    animation: AnimBanner 8s ease infinite,retroGlow 4s ease-in-out infinite !important
}

.userBanner.vintage {
    background: linear-gradient(270deg, #d4af37, #c9a227, #d4af37);
    color: #8b4513;
    border: 1px solid #8b4513;
    animation: AnimBanner 10s ease infinite,vintageShine 5s ease-in-out infinite !important
}

.userBanner.future {
    background: linear-gradient(270deg, #0fc, #0cf, #0fc);
    color: #000;
    animation: AnimBanner 5s ease infinite,futureGlow 2s ease-in-out infinite !important
}

.userBanner.tech {
    background: linear-gradient(270deg, #667eea, #764ba2, #667eea);
    animation: AnimBanner 7s ease infinite,techPulse 3s ease-in-out infinite !important
}

.userBanner.magic {
    background: linear-gradient(270deg, #f0c, #33f, #f0c);
    animation: AnimBanner 6s ease infinite,magicSparkle 3s ease-in-out infinite !important
}

.userBanner.wizard {
    background: linear-gradient(270deg, #9d50bb, #6e48aa, #9d50bb);
    animation: AnimBanner 8s ease infinite,wizardGlow 4s ease-in-out infinite !important
}

.userBanner.enchanted {
    background: linear-gradient(270deg, #0f0, #080, #0f0);
    color: #000;
    animation: AnimBanner 7s ease infinite,enchantedGlow 3.5s ease-in-out infinite !important
}

.userBanner.champion {
    background: linear-gradient(270deg, #ffd700, #ffed4e, #ffd700);
    color: #000;
    border: 2px solid #daa520;
    animation: AnimBanner 4s ease infinite,championShine 2s ease-in-out infinite !important
}

.userBanner.innovator {
    background: linear-gradient(270deg, #0f8, #0cf, #0f8);
    color: #000;
    animation: AnimBanner 5s ease infinite,innovatorGlow 2.5s ease-in-out infinite !important
}

.userBanner.visionary {
    background: linear-gradient(270deg, #f0f, #0ff, #f0f);
    color: #000;
    animation: AnimBanner 6s ease infinite,visionaryPulse 3s ease-in-out infinite !important
}

.userBanner.minimal {
    background: linear-gradient(270deg, #667eea, #764ba2);
    font-size: 55%;
    padding: 4px 10px;
    animation: AnimBanner 10s ease infinite,minimalGlow 5s ease-in-out infinite !important
}

.userBanner.sleek {
    background: linear-gradient(270deg, #2c3e50, #3498db);
    font-size: 58%;
    animation: AnimBanner 12s ease infinite,sleekPulse 6s ease-in-out infinite !important
}

.userBanner.elegant {
    background: linear-gradient(270deg, #636363, #a2a2a2);
    font-size: 56%;
    animation: AnimBanner 15s ease infinite,elegantGlow 7s ease-in-out infinite !important
}

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

    25% {
        background-position: 50% 75%
    }

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

    75% {
        background-position: 50% 25%
    }

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

@keyframes glowPulse {
    0%,100% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 4px 20px rgba(255,255,255,0.3),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes matrixGlow {
    0%,100% {
        box-shadow: 0 0 15px rgba(0,255,0,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px rgba(0,255,0,0.9),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes goldPulse {
    0%,100% {
        box-shadow: 0 0 20px rgba(255,215,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 35px #ffd700,0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes diamondShine {
    0%,100% {
        box-shadow: 0 0 18px rgba(185,242,255,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px rgba(185,242,255,0.9),0 0 10px rgba(255,255,255,0.5),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes epicGlow {
    0%,100% {
        box-shadow: 0 0 15px rgba(138,43,226,0.7),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 25px rgba(138,43,226,0.9),0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes legendaryFire {
    0%,100% {
        box-shadow: 0 0 18px rgba(255,140,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 30px #ff4500,0 2px 8px rgba(0,0,0,0.3)
    }
}

@keyframes rainbowGlow {
    0%,100% {
        box-shadow: 0 0 25px rgba(255,0,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    16% {
        box-shadow: 0 0 25px rgba(255,128,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    33% {
        box-shadow: 0 0 25px rgba(255,255,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 25px rgba(0,255,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    66% {
        box-shadow: 0 0 25px rgba(0,255,255,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    83% {
        box-shadow: 0 0 25px rgba(0,0,255,0.8),0 2px 8px rgba(0,0,0,0.2)
    }
}

@keyframes adminPulse {
    0%,100% {
        box-shadow: 0 0 20px rgba(255,0,0,0.8),0 2px 8px rgba(0,0,0,0.2)
    }

    50% {
        box-shadow: 0 0 35px #f00,0 2px 8px rgba(0,0,0,0.3)
    }
}

.userBanner.premium {
    animation: AnimBanner 6s ease infinite,goldPulse 2s ease-in-out infinite !important
}

.userBanner.animated {
    animation: AnimBanner 5s ease infinite,glowPulse 2s ease-in-out infinite !important;
    transition: all .3s ease
}

.userBanner.animated:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
    animation-duration: 3s,1s !important
}

.userBanner.compact {
    font-size: 50%;
    padding: 4px 8px;
    max-width: 150px
}

.userBanner.tiny {
    font-size: 45%;
    padding: 3px 6px;
    max-width: 120px
}

.userBanner:hover {
    transform: scale(1.05);
    filter: brightness(1.15);
    animation-duration: 4s,2s !important;
    z-index: 10
}

@media (max-width: 768px) {
    .userBanner {
        font-size:55%;
        padding: 5px 10px;
        max-width: 180px;
        animation: AnimBanner 10s ease infinite,glowPulse 5s ease-in-out infinite !important
    }

    .userBanner.compact {
        max-width: 130px
    }

    .userBanner.tiny {
        max-width: 100px
    }
}
Баннеры то я знал, т, к я из еще сливал давно и они брали 100% мой код, а префиксы хз где взяли они
 
Осуждён за гениальность или проклят за талант?
Сен
398
549
Пользователь
css:
.rainbow-prefix {
    display: inline-block;
    padding: 3px 12px;
    font-weight: bold;
    border-radius: 12px;
    position: relative;
    z-index: 0;
    background: #1f1f1f;
    background-image: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 1800% 1800%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbowText 6s ease infinite
}

.rainbow-prefix::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 12px;
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3);
    background-size: 1800% 1800%;
    animation: rainbowBorder 6s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1
}
Щас проверю
 
never stress
Дек
617
433
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
исправил там, перезагрузи страницу
 
Сверху