Welcome!

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

SignUp Now!

Решено Как сделать такое?

Статус
В этой теме нельзя размещать новые ответы.
Май
61
18
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
1000115264.jpg
Приветствую, нашел вот такой форум . И хочу узнать как сделать такую обводку вокруг и летающие звёзды/снежинки и сделай там где написано | Монолог твоей • Любви | RM другим цветом .
Благодарю за помощь заранее.
 
Лучше плохо начать, чем хорошо бездействовать
Ноя
2,366
1,974
Профессионал
Код:
.honoredRole {
    background: linear-gradient(145deg, #4a3a0a, #6b550e, #8c7012) !important;
    border: 1.5px solid #f1c40f !important;
    border-radius: 30px !important;
    padding: 3px 16px 3px 12px !important;
    color: #fff8e7 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 15px rgba(241,196,15,0.4),0 0 5px rgba(241,196,15,0.3) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.honoredRole i.fa {
    color: #f1c40f;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 4px #f1c40f);
    animation: honoredPulse 3s infinite ease-in-out
}

.honoredRole::before {
    content: "⭐";
    position: absolute;
    left: -5px;
    top: -8px;
    font-size: 9px;
    filter: drop-shadow(0 0 5px #f1c40f);
    animation: honoredFloat 3s infinite;
    opacity: 0.9
}

.honoredRole::after {
    content: "⬤";
    position: absolute;
    right: -4px;
    bottom: -6px;
    font-size: 7px;
    color: #f1c40f;
    filter: drop-shadow(0 0 6px #f39c12);
    animation: honoredDotPulse 2.5s infinite;
    opacity: 0.9
}

.honoredRole:hover {
    background: linear-gradient(145deg, #6b550e, #8c7012, #4a3a0a) !important;
    border-color: #f39c12 !important;
    box-shadow: 0 0 20px #f1c40f,0 0 15px #f39c12 !important;
    transform: translateY(-1px)
}

.honoredRole:hover i.fa {
    animation: none;
    transform: scale(1.1) rotate(5deg);
    color: #ffd966
}

.honoredRole:hover::before {
    animation: honoredFloatIntense 1s infinite;
    content: "🏆"
}

.honoredRole:hover::after {
    animation: honoredDotIntense 1s infinite;
    color: #ffd966
}

@keyframes honoredPulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #f39c12)
    }

    50% {
        transform: scale(1.1) rotate(3deg);
        filter: drop-shadow(0 0 10px #f1c40f)
    }
}

@keyframes honoredFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-4px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 8px #f39c12)
    }
}

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

    50% {
        transform: scale(1.4);
        opacity: 1;
        filter: drop-shadow(0 0 12px #f1c40f)
    }
}

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

    50% {
        opacity: 1;
        transform: scale(1.6);
        filter: drop-shadow(0 0 10px #f1c40f)
    }
}

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

    50% {
        transform: scale(2.2);
        opacity: 1;
        filter: drop-shadow(0 0 15px #f39c12)
    }
}



.forbesBadge {
    background: linear-gradient(145deg, #1e1a0e, #2a2416) !important;
    border: 1.5px solid #d4af37 !important;
    border-radius: 40px !important;
    padding: 3px 14px 3px 10px !important;
    color: #fff8e7 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 10px rgba(212,175,55,0.4),inset 0 1px 3px rgba(255,215,0,0.2) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.forbesBadge i.fa {
    color: #ffd966;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 3px #ffb347);
    animation: moneyFloat 2.5s infinite ease-in-out
}

.forbesBadge::after {
    content: "✨";
    position: absolute;
    right: -2px;
    top: -6px;
    font-size: 8px;
    opacity: 0.6;
    animation: spark 3s infinite;
    filter: drop-shadow(0 0 2px #ffd700)
}

.forbesBadge:hover {
    background: linear-gradient(145deg, #2a2416, #3e3520) !important;
    box-shadow: 0 0 18px #f1c40f !important;
    border-color: #f1c40f !important;
    transform: translateY(-1px)
}

.forbesBadge:hover i.fa {
    animation: none;
    transform: scale(1.1);
    color: #ffd700
}

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

    25% {
        transform: translateY(-1px) rotate(-3deg)
    }

    75% {
        transform: translateY(1px) rotate(3deg)
    }
}

@keyframes spark {
    0%,100% {
        opacity: 0.4;
        transform: scale(.8)
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
        filter: drop-shadow(0 0 4px #ffd700)
    }
}



.userRole {
    background: linear-gradient(145deg, #2a2a2e, #3a3a42, #2f2f35) !important;
    border: 1.5px solid #6c6c7c !important;
    border-radius: 30px !important;
    padding: 3px 16px 3px 12px !important;
    color: #e0e0e5 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 15px rgba(108,108,124,0.25),0 0 5px rgba(88,88,104,0.2) !important;
    backdrop-filter: blur(2px);
    display: inline-flex !important;
    align-items: center;
    transition: all .25s ease;
    position: relative
}

.userRole i.fa {
    color: #9a9ab0;
    margin-right: 6px;
    font-size: 13px;
    filter: drop-shadow(0 0 4px #6c6c7c);
    animation: userPulse 3s infinite ease-in-out
}

.userRole::before {
    content: "⚙️";
    position: absolute;
    left: -5px;
    top: -8px;
    font-size: 9px;
    filter: drop-shadow(0 0 5px #9a9ab0);
    animation: userFloat 3s infinite;
    opacity: 0.9
}

.userRole::after {
    content: "⬤";
    position: absolute;
    right: -4px;
    bottom: -6px;
    font-size: 7px;
    color: #6c6c7c;
    filter: drop-shadow(0 0 6px #9a9ab0);
    animation: userDotPulse 2.5s infinite;
    opacity: 0.9
}

.userRole:hover {
    background: linear-gradient(145deg, #3a3a42, #2f2f35, #2a2a2e) !important;
    border-color: #9a9ab0 !important;
    box-shadow: 0 0 20px #6c6c7c,0 0 15px #9a9ab0 !important;
    transform: translateY(-1px)
}

.userRole:hover i.fa {
    animation: none;
    transform: scale(1.1) rotate(5deg);
    color: #b8b8cc
}

.userRole:hover::before {
    animation: userFloatIntense 1s infinite;
    content: "🔧"
}

.userRole:hover::after {
    animation: userDotIntense 1s infinite;
    color: #b8b8cc
}

@keyframes userPulse {
    0%,100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 2px #9a9ab0)
    }

    50% {
        transform: scale(1.1) rotate(3deg);
        filter: drop-shadow(0 0 10px #6c6c7c)
    }
}

@keyframes userFloat {
    0%,100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.8
    }

    50% {
        transform: translateY(-4px) rotate(5deg);
        opacity: 1;
        filter: drop-shadow(0 0 8px #9a9ab0)
    }
}

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

    50% {
        transform: scale(1.4);
        opacity: 1;
        filter: drop-shadow(0 0 12px #9a9ab0)
    }
}

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

    50% {
        opacity: 1;
        transform: scale(1.6);
        filter: drop-shadow(0 0 10px #6c6c7c)
    }
}

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

    50% {
        transform: scale(2.2);
        opacity: 1;
        filter: drop-shadow(0 0 15px #9a9ab0)
    }
}
 
Май
61
18
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
@JustAlex,
Вставляешь это в extra.less и по желанию меняешь названия классов
Спасибо большое, но тут нече не понятно все почти одинаково
 
Май
61
18
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Это css код, представляете себе
Мда. Я в шоке вам добрее быть надо
 
Июл
880
1,176
Пользователь
Спасибо большое, но тут нече не понятно все почти одинаково
если не понятно ищи себе специалиста которому будет понятно и он всё это будет делать....
вы что вообще расчитываете? спросил как сделать такое, @JustAlex вытащил код, что ешё нужно? Записать видео как это делается?
 
@viovit_dev
Апр
1,586
983
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Спасибо большое, но тут нече не понятно все почти одинаково
значит нужно перестать заниматься тем что не понимаешь, все просто
 
Май
61
18
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
@viovit,
значит нужно перестать заниматься тем что не понимаешь, все просто
Ну я хотябы не грублю людям. И нормально себя веду а не как быдло
 
@viovit_dev
Апр
1,586
983
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
@viovit,

Ну я хотябы не грублю людям. И нормально себя веду а не как быдло
покажешь где я вел себя как быдло даю 10к рублей прям щас
 
Май
61
18
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
покажешь где я вел себя как быдло даю 10к рублей прям щас
Я не руский 🫠
 
@viovit_dev
Апр
1,586
983
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
в любой валюте мира могу отправить, мне без разницы
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху