Welcome!

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

SignUp Now!

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

Дек
3
0
Пользователь
3.1.1. Запрещено формулировать названия тем в требовательной форме (например, «Дайте…», «Сделайте…»).
Последнее редактирование модератором:
Ноя
1,811
5,234
Команда форума
Администратор
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);
    }
}
 
Сверху