Решено Как добавить в преыикс эмодзи

Legastandoff2 · Пятница в 16:49

Как вы поняли по названию темы, мне нужен код для экстра лесс чтобы добавить эмодзи в префиксы, заранее спасибо!

kirya002 · Пятница в 17:14

Ку, https://pawno-help.ru/threads/prefiksy-tem-s-ikonkami.1059/

Avgust999 · Пятница в 17:15

Legastandoff2 написал(а):
Как вы поняли по названию темы, мне нужен код для экстра лесс чтобы добавить эмодзи в префиксы, заранее спасибо!

Делается через extra.less.
Берёшь ID префикса и добавляешь ::before с content (эмодзи).
Плагины не нужны.

Если надо пример одной строкой

Pawn:

.label--prefix--ID::before { content: "🔥 "; }

Legastandoff2 · Пятница в 17:16

Avgust999 написал(а):
Делается через extra.less.
Берёшь ID префикса и добавляешь ::before с content (эмодзи).
Плагины не нужны.

Если надо пример одной строкой

Pawn:

.label--prefix--ID::before { content: "🔥 "; }

Спасибо, решено

Kolpak · Пятница в 17:28

Less:

.prefix
{
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    
    &.pgreen
    {
        background-image: linear-gradient(150deg, #32cd32, #008000, #32cd32, #228b22);
        box-shadow: 0px 0px 6px #32cd32,inset 0 0 10px rgba(50,205,50,0.3);
        animation: christmasTree 4s ease infinite;
        
        &:before
        {
            content: '🎄';
            margin-right: 3px;
            animation: treeWobble 2s infinite ease-in-out;
        }
    }
    
    &.porange
    {
        background-image: linear-gradient(150deg, #ffbf00, #ff9800, #ffa500, #ff8c00);
        box-shadow: 0px 0px 6px #ff9800,inset 0 0 8px rgba(255,152,0,0.3);
        animation: mandarinGlow 3s infinite alternate;
        
        &:after
        {
            content: '🍊';
            margin-left: 3px;
            animation: fruitBounce 1.5s infinite;
        }
    }
    
    &.paqua
    {
        background-image: linear-gradient(150deg, #03a9f4, #2ebcfc, #00bcd4, #03a9f4);
        box-shadow: 0px 0px 6px #03a9f4,inset 0 0 10px rgba(3,169,244,0.2);
        animation: iceFlow 5s linear infinite;
        
        &:before
        {
            content: '❄️';
            margin-right: 3px;
            animation: snowflakeSpin 4s infinite linear;
        }
    }
    
    &.pred
    {
        background-image: linear-gradient(150deg, #f00, #b22222, #f44, #c00, #f00);
        box-shadow: 0px 0px 6px #f00,inset 0 0 15px rgba(255,0,0,0.4);
        animation: ballGlow 3s ease-in-out infinite;
        
        &:after
        {
            content: '🔴';
            margin-left: 3px;
            font-size: 10px;
            animation: shineReflect 2s infinite;
        }
    }
    
    &.ypred
    {
        background-image: linear-gradient(150deg, #ffe218, #ffc018, #ffd700, #ffa500, #ffc018);
        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);
        color: black;
        
        &:before
        {
            ontent: '✨';
               margin-right: 3px;
            animation: sparkleTwinkle 1s infinite alternate;
        }
    }
    
    &.bpred
    {
        background-image: linear-gradient(150deg, #1844ff, #186fff, #1e88e5, #0d47a1, #1844ff);
        box-shadow: 0px 0px 6px #1844ff,inset 0 0 10px rgba(24,68,255,0.3);
        animation: nightSky 6s ease infinite;
        
        &:after
        {
            content: '⭐';
            margin-left: 3px;
            font-size: 10px;
            animation: starTwinkle 1.5s infinite alternate;
        }
    }
}

@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;
    }
}

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

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

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

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

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

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

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

@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);
    }
}

@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;
    }
}

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

    50% {
        opacity: 1;
    }
}

@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;
    }
}

@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);
    }
}

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

    to {
        opacity: 1;
        transform: scale(1.1);
    }
}

Legastandoff2 · Пятница в 17:29

Avgust999 написал(а):
Делается через extra.less.
Берёшь ID префикса и добавляешь ::before с content (эмодзи).
Плагины не нужны.

Если надо пример одной строкой

Pawn:

.label--prefix--ID::before { content: "🔥 "; }

Бро а можно код поменьше и более нормальный, я вставил поставил айди (12) и не работает

Legastandoff2 · Пятница в 17:30

Screenshot_2025-12-26-17-28-38-775_com.yandex.browser.jpg

Screenshot_2025-12-26-17-28-48-690_com.yandex.browser.jpg

12 ид это открыто

Avgust999 · Пятница в 17:33

Legastandoff2 написал(а):
Посмотреть вложение 18247 Посмотреть вложение 18248

12 ид это открыто

Код нечего не ломает это уже отлично сейчас разберемся

Legastandoff2 · Пятница в 17:35

Avgust999 написал(а):
Код нечего не ломает это уже отлично сейчас разберемся

Он может даже и рабочий скорее всего его надо вставлять в сам CSS префикс, но у меня там уже есть CSS код для свечения и формы его

Avgust999 · Пятница в 17:36

Попробуй
(Айди заменяй на айди префикса)

Pawn:

.label--prefix--12::before {
    content: "🔥 "; /* эмодзи, которое хочешь */
}

Legastandoff2 · Пятница в 17:37

Avgust999 написал(а):
Попробуй
(Айди заменяй на айди префикса)

Pawn:

.label--prefix--12::before { content: "🔥 "; /* эмодзи, которое хочешь */ }

Без текста в конце? Который начинается с /?

Avgust999 · Пятница в 17:37

Legastandoff2 написал(а):
Без текста в конце? Который начинается с /?

Да

Legastandoff2 · Пятница в 17:38

Avgust999 написал(а):
Да

Не работает

Legastandoff2 · Пятница в 17:39

label--prefix скорее всего не нужен надо изменить код

Avgust999 · Пятница в 17:40

Kolpak написал(а):

Less:

.prefix
{
    background-size: 300% 300%;
    color: white;
    text-transform: uppercase;
    font-size: 66%;
    padding: 3px 6px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
   
    &.pgreen
    {
        background-image: linear-gradient(150deg, #32cd32, #008000, #32cd32, #228b22);
        box-shadow: 0px 0px 6px #32cd32,inset 0 0 10px rgba(50,205,50,0.3);
        animation: christmasTree 4s ease infinite;
       
        &:before
        {
            content: '🎄';
            margin-right: 3px;
            animation: treeWobble 2s infinite ease-in-out;
        }
    }
   
    &.porange
    {
        background-image: linear-gradient(150deg, #ffbf00, #ff9800, #ffa500, #ff8c00);
        box-shadow: 0px 0px 6px #ff9800,inset 0 0 8px rgba(255,152,0,0.3);
        animation: mandarinGlow 3s infinite alternate;
       
        &:after
        {
            content: '🍊';
            margin-left: 3px;
            animation: fruitBounce 1.5s infinite;
        }
    }
   
    &.paqua
    {
        background-image: linear-gradient(150deg, #03a9f4, #2ebcfc, #00bcd4, #03a9f4);
        box-shadow: 0px 0px 6px #03a9f4,inset 0 0 10px rgba(3,169,244,0.2);
        animation: iceFlow 5s linear infinite;
       
        &:before
        {
            content: '❄️';
            margin-right: 3px;
            animation: snowflakeSpin 4s infinite linear;
        }
    }
   
    &.pred
    {
        background-image: linear-gradient(150deg, #f00, #b22222, #f44, #c00, #f00);
        box-shadow: 0px 0px 6px #f00,inset 0 0 15px rgba(255,0,0,0.4);
        animation: ballGlow 3s ease-in-out infinite;
       
        &:after
        {
            content: '🔴';
            margin-left: 3px;
            font-size: 10px;
            animation: shineReflect 2s infinite;
        }
    }
   
    &.ypred
    {
        background-image: linear-gradient(150deg, #ffe218, #ffc018, #ffd700, #ffa500, #ffc018);
        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);
        color: black;
       
        &:before
        {
            ontent: '✨';
               margin-right: 3px;
            animation: sparkleTwinkle 1s infinite alternate;
        }
    }
   
    &.bpred
    {
        background-image: linear-gradient(150deg, #1844ff, #186fff, #1e88e5, #0d47a1, #1844ff);
        box-shadow: 0px 0px 6px #1844ff,inset 0 0 10px rgba(24,68,255,0.3);
        animation: nightSky 6s ease infinite;
       
        &:after
        {
            content: '⭐';
            margin-left: 3px;
            font-size: 10px;
            animation: starTwinkle 1.5s infinite alternate;
        }
    }
}

@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;
    }
}

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

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

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

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

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

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

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

@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);
    }
}

@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;
    }
}

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

    50% {
        opacity: 1;
    }
}

@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;
    }
}

@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);
    }
}

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

    to {
        opacity: 1;
        transform: scale(1.1);
    }
}

OFFTOP

попробуй префиксы колпака - свечение потом добавишь

Legastandoff2 · Пятница в 17:41

Avgust999 написал(а):
OFFTOP
попробуй префиксы колпака - свечение потом добавишь

Пробовал они мне на форуме не подходят

Legastandoff2 · Пятница в 17:48

Legastandoff2 написал(а):
Пробовал они мне на форуме не подходят

Там крч они их ломают

Legastandoff2 · Пятница в 17:53

Я щас ниже дам код добавь туда код для смайлика и проверь у себя работает или нет потом кинь сюда

Код:

// Префиксы
.gradientBanner {
font-size: 80%;
font-weight: 400;
font-style: normal;
padding: 1px 10px;
padding: 1px 3px;
border: 1px solid transparent;
border-radius: 2px;
text-align: center;
display: inline-block
}

.gradientBanner.green {
box-shadow: 0px 0px 5px #4caf50;
background-color: #4CAF50;
border-color: #4CAF50;
color: #fff  
}

LIVE SAMP

Решено Как добавить в преыикс эмодзи

Добро пожаловать!

Legastandoff2

Avgust999

kirya002

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

Legastandoff2

Kolpak

Legastandoff2

Legastandoff2

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

Legastandoff2

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

Legastandoff2

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

Legastandoff2

Legastandoff2

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

Legastandoff2

Legastandoff2

Legastandoff2