Web Баннеры групп со световым эффектом

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 217
Репутация
6 056
Баллы
266
Увидел на другом форуме картинки для групп в gif и подумал, что с помощью css будет интереснее и лучше :)
 

khukazov

Местный
Сообщения
509
Репутация
270
Баллы
63
Не плохо смотрится, но надо равнять его, и нормально прописывать :)
Screenshot_132.jpg
 
Реакции: SOUL

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 217
Репутация
6 056
Баллы
266
Это пример, сделано как удобно для демо, но уже сотню раз давался код для баннеров и сделать все по аналогии не составит труда и там русским языком написаны комментарии.

margin: 1em 2em; /* только для демо */
 

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 217
Репутация
6 056
Баллы
266
Less:
.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 {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }
    &.user {
        background: #1565C0;
    }
    &: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%;
    }
}
 

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 217
Репутация
6 056
Баллы
266
По мотивам поста о баннерах с градиентом Мануал 2.x - Баннер группы и ник градиентом, совмещаем градиент и свечение:
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%;
    }
}
 

dorkao

Пользователь
Сообщения
2
Репутация
2
Баллы
3
I am new here, I can speak english? Anyway i hope that helps
Take a look:
Can I have your like?
Thanks
 

Unsubdued

Администратор
Сообщения
4 010
Репутация
8 334
Баллы
266
dorkao,
Hi!
The question is not clear. What exactly is the problem?
 
Сверху Снизу