Как сделать лычку с градиентом

Типа создаёшь отдельную группу, типа настраиваешь её и выдаёшь пользователю эту группу
 
Less:
.linear-gradient-prefixes(@deg, @start, @end) {
    background-image: -webkit-linear-gradient(@deg, @start, @end);
    background-image: -moz-linear-gradient(@deg, @start, @end);
    background-image: linear-gradient(90deg, @start 0%, @end 100%);
}

.linear-gradient(@_, @start, @end) {
    .linear-gradient-prefixes(left, @start, @end);
}

.gradientBanner {
    display: inline-block;
    text-align: center;
    font-size: 80%;
    color: #fff;
    text-transform: uppercase;
    padding: 3px 0;
    margin: 4px 0;
    width: 100%;
    border: none;
    &.admin {
        .linear-gradient(left, #E70707, #5E0000)
    }
    &.moder {
        .linear-gradient(left, #029B0E, #C10000)
    }
    &.user {
        .linear-gradient(left, #02739B, #00C134)
    }
    &.lamer {
        .linear-gradient(left, #6CD4F9, #005FAD)
    }
    .memberHeader-banners & {
        [data-template="member_view"] & {
            width: 120px!important;
        }
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: 3px 5px;
    }
}
130501.png
 
Хоть бы чуть-чуть поиском пользоваться учились...
 
Только как может быть это типа уника, если уже давно все сделано-переделано, ну придумайте уж что то новое, надоело одно и то же :)
 
Советую вам задать вопрос там, откуда вы всё скачали.
 
Последнее редактирование:
Только как может быть это типа уника, если уже давно все сделано-переделано, ну придумайте уж что то новое, надоело одно и то же :)
Та это ж Чебурекер очередной :D Вы что, САМОМУ что-то придумывать????
 
Со свечением
Less:
.linear-gradient(@start, @end) {
    background: linear-gradient(90deg, @start 0%, @end 100%);
}

.userBannerLight {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    margin: .6em 0em;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden;
    &.admin {
        .linear-gradient(#E70707, #5E0000);
    }
    &.moder {
        .linear-gradient(#029B0E, #C10000);
    }
    &.user {
        .linear-gradient(#02739B, #00C134);
    }
    &:before {
        content: "";
        position: absolute;
        background: linear-gradient(135deg, transparent 0%, transparent 30%, rgba(250, 250, 250, .7) 50%, transparent 70%, transparent 100%);
        background-repeat: no-repeat;
        top: 0px;
        left: -80%;
        width: 100%;
        height: 100%;
        animation: light 2.5s infinite;
    }
    .tooltip-content & {
        .tooltip--member & {
            width: 120px!important;
        }
    }
    @media (max-width: @xf-responsiveMedium) {
        display: inline!important;
        padding: .5em 1em;
    } 
}
@keyframes light {
    0% {
        left: -80%;
    }
    100% {
        left: 80%;
    }
}
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу