Welcome!

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

SignUp Now!

Ищу код баннера

Дек
95
13
Пользователь
3.1.1. Запрещено формулировать названия тем в требовательной форме (например, «Дайте…», «Сделайте…»).
Последнее редактирование модератором:
Решение
Less:
.projectOwnerRed
{
    background: linear-gradient(145deg, #2a0f0f, #3a1414, #4d1a1a);
    border: 1.8px solid transparent;
    border-image: linear-gradient(135deg, #ff4d4d, #f00, #c00, #900);
    border-image-slice: 1;
    border-radius: 40px;
    padding: 3px 16px 3px 12px;
    color: #fff0f0;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    display: inline-flex;
    align-items: center;
    transition: all .25s ease;
    position: relative;

    &:before
    {
        content: "💎";
        position: absolute;
        left: -5px;
        top: -8px;
        font-size...
Ноя
1,878
5,939
Команда форума
Администратор
Less:
.projectOwnerRed
{
    background: linear-gradient(145deg, #2a0f0f, #3a1414, #4d1a1a);
    border: 1.8px solid transparent;
    border-image: linear-gradient(135deg, #ff4d4d, #f00, #c00, #900);
    border-image-slice: 1;
    border-radius: 40px;
    padding: 3px 16px 3px 12px;
    color: #fff0f0;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    display: inline-flex;
    align-items: center;
    transition: all .25s ease;
    position: relative;

    &:before
    {
        content: "💎";
        position: absolute;
        left: -5px;
        top: -8px;
        font-size: 10px;
        filter: drop-shadow(0 0 5px #f00);
        animation: diamondFloat 3s infinite;
        opacity: 0.9;
    }

    &:after
    {
        content: "✨";
        position: absolute;
        right: -5px;
        bottom: -8px;
        font-size: 10px;
        filter: drop-shadow(0 0 5px #fa0);
        animation: sparkFloat 3s infinite .5s;
        opacity: 0.9;
    }

    &:hover
    {
        background: linear-gradient(145deg, #3a1414, #5a1e1e) !important;
        border-image: linear-gradient(135deg, #fa0, #ff4d4d, #f00) !important;
        border-image-slice: 1 !important;
        box-shadow: 0 0 25px #f00, 0 0 40px #c00 !important;
        transform: translateY(-2px) scale(1.02);
        
        &:before, &:after
        {
            animation: sparkIntense 1s infinite;
        }
    }
}

.userBanner.userBanner--staff
{
    background: linear-gradient(145deg, #2c2416, #3e351f);
    border: 1.5px solid #f1c40f;
    border-radius: 30px;
    padding: 3px 14px 3px 10px;
    color: #fff8e7;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.4), inset 0 1px 3px rgba(255, 215, 0, 0.2);
    backdrop-filter: blur(2px);
    display: inline-flex;
    align-items: center;
    transition: all .25s ease;
    position: relative;

    &:before
    {
        content: "✦";
        position: absolute;
        left: -4px;
        top: -4px;
        font-size: 8px;
        color: #f1c40f;
        filter: drop-shadow(0 0 3px #f39c12);
        opacity: 0.9;
        animation: sparkRotate 3s infinite;
    }

    &:after
    {
        content: "✧";
        position: absolute;
        right: -4px;
        bottom: -4px;
        font-size: 8px;
        color: #f39c12;
        filter: drop-shadow(0 0 3px #f1c40f);
        opacity: 0.9;
        animation: sparkRotate 3s infinite .5s;
    }

    &:hover
    {
        background: linear-gradient(145deg, #3e351f, #4d4127);
        border-color: #f39c12;
        box-shadow: 0 0 18px #f1c40f, 0 0 30px #f39c12;
        transform: translateY(-1px);

        &:before, &:after
        {
            animation: sparkIntense 1s infinite;
            color: #ffd700;
        }
    }
}

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

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

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

    50%
    {
        transform: scale(1.2) rotate(5deg);
        filter: drop-shadow(0 0 15px #f00);
    }
}

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

    50%
    {
        transform: translateY(-3px) rotate(10deg);
        opacity: 1;
        filter: drop-shadow(0 0 8px #f00);
    }
}

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

    50%
    {
        transform: translateY(-2px) scale(1.3);
        opacity: 1;
        filter: drop-shadow(0 0 10px #ffd700);
    }
}

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

    50%
    {
        transform: scale(1.5);
        opacity: 1;
        filter: drop-shadow(0 0 12px #ffd700);
    }
}
 
Сверху