Баннер со световым эффектом

[Skaiman]

Семен Семеныч добавил(а) новый ресурс:

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

Видел где то картинкой такой баннер, но интереснее сделать без нее :)
В extra.less

.userBannerLight {
    display: inline-block;
    text-align: center;
    font-size: .7em;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    padding: .5em 0em;
    width: 100%;
    border: none;
    position: relative;
    overflow: hidden;
    &.admin {
        background: #c62828;
    }
    &.moder {
        background: #00695C;
    }...

Узнать больше об этом ресурсе...

 

[anotcher]

А как сделать чтобы анимация шла не поверх слов, а фоном позади ?

 

[Skaiman]

Посмотреть, понять и не спрашивать :) ни как

 

[Skaiman]

А как сделать чтобы анимация шла не поверх слов, а фоном позади ?

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[PaddingtonBaby]

Добрый день, вот такая вот у меня фишка с отображением на форуме. Использовал extra.less только. Правильно ли я понимаю, что для избежания такого отображения мне нужно либо создавать модификацию шаблона, либо просто убирать "команда форума"?

 

[Skaiman]

Просто я не подумал об этом баннере :) позже гляну

 

[PaddingtonBaby]

А как сделать чтобы анимация шла не поверх слов, а фоном позади ?

И по этому поводу тоже.

На ПК отображается идеально, а вот на мобильных устройствах анимация идет сверху баннера накладкой. Даже не знаю, как пофиксить :(
Были мысли о том, чтобы закинуть на задний фон gif, но Вы же говорите, что этого делать не стоит.

 

[anotcher]

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Skaiman]

я это делал черти когда :) кто то просил, уже и не помню, но вот вроде нареканий не было с мобилами.

 

[Skaiman]

Skaiman обновил(а) ресурс Баннер со световым эффектом новой записью:

Обновление кода

Изменил код для extra.less, добавлен код для правильного отображения на странице профиля, изменен код для отображения во всплывающей подсказке и отображение на телефонах.

Узнать больше об этом обновлении...

 

[Skaiman]

Skaiman обновил(а) ресурс Баннер со световым эффектом новой записью:

Код баннера команды

Добавил код для изменения отображения баннера команды, приведен к общему виду

Узнать больше об этом обновлении...

 

[Skaiman]

На ПК отображается идеально, а вот на мобильных устройствах анимация идет сверху баннера накладкой.

По виду баннеров на скриншоте, отображение в любом случае не идеально, так как не вижу заданных свойств, указанных в моем коде, можно сделать вывод, что код изменялся и нести ответственность за измененный код я не могу :)

 

[artloskutov]

Skaiman, ты кудесник и маг css! Скажи, а можно сделать тень, чтобы баннер был объёмным? ?

 

[MrBurn]

Skaiman, ты кудесник и маг css! Скажи, а можно сделать тень, чтобы баннер был объёмным? ?

box-shadow: 0 0 10px rgba(0,0,0,0.5); Как вариант.

 

[Skaiman]

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[gimberov]

Не забывает указывать свой css для баннера групп в настройках группа. Например: userBannerLight admin для администратора.

Прописываю но ничего не сохраняется. А так всё работает, но синий банер сменился почему-то на березовый

 

[Skaiman]

Код для баннера, а не для ника

 

[DANILKA]

Привет, как сделать так ,что бы не переносились слова? Было все в одну строчку (на скриншоте с HEAD ADMINISTRATOR)

 

[Skaiman]

В коде

    .memberHeader-banners &, .memberTooltip-banners & {
        width: 120px;
    }
    @media (max-width: @xf-responsiveMedium) {
        .message:not(.message--forceColumns) .message-userBanner.userBanner& {       
            width: 120px;
            text-align: center;
        }
    }

Заменить на min-width

 

[DANILKA]

В коде

    .memberHeader-banners &, .memberTooltip-banners & {
        width: 120px;
    }
    @media (max-width: @xf-responsiveMedium) {
        .message:not(.message--forceColumns) .message-userBanner.userBanner& {      
            width: 120px;
            text-align: center;
        }
    }

Заменить на min-width