- Авг
- 128
- 24
Пользователь
Как вы поняли по названию темы, мне нужен код для экстра лесс чтобы добавить эмодзи в префиксы, заранее спасибо!
By registering with us, you'll be able to discuss, share and private message with other members of our community.
SignUp Now!Делается через extra.less.Как вы поняли по названию темы, мне нужен код для экстра лесс чтобы добавить эмодзи в префиксы, заранее спасибо!
.label--prefix--ID::before { content: "🔥 "; }
Делается через extra.less.Как вы поняли по названию темы, мне нужен код для экстра лесс чтобы добавить эмодзи в префиксы, заранее спасибо!
.label--prefix--ID::before { content: "🔥 "; }
Спасибо, решеноДелается через extra.less.
Берёшь ID префикса и добавляешь ::before с content (эмодзи).
Плагины не нужны.
Если надо пример одной строкой
Pawn:.label--prefix--ID::before { content: "🔥 "; }
.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);
}
}
Бро а можно код поменьше и более нормальный, я вставил поставил айди (12) и не работаетДелается через extra.less.
Берёшь ID префикса и добавляешь ::before с content (эмодзи).
Плагины не нужны.
Если надо пример одной строкой
Pawn:.label--prefix--ID::before { content: "🔥 "; }
Код нечего не ломает это уже отлично сейчас разберемся
Он может даже и рабочий скорее всего его надо вставлять в сам CSS префикс, но у меня там уже есть CSS код для свечения и формы егоКод нечего не ломает это уже отлично сейчас разберемся
.label--prefix--12::before {
content: "🔥 "; /* эмодзи, которое хочешь */
}
Без текста в конце? Который начинается с /?Попробуй
(Айди заменяй на айди префикса)
Pawn:.label--prefix--12::before { content: "🔥 "; /* эмодзи, которое хочешь */ }
ДаБез текста в конце? Который начинается с /?
Не работает
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); } }
Пробовал они мне на форуме не подходят
Там крч они их ломаютПробовал они мне на форуме не подходят
// Префиксы
.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
}