Иконка ресурса

Мануал 2.x Баннер группы и ник градиентом

Как сделать группу пользователя и ник в виде градиента

Agelil

Проверенный
Сообщения
61
Симпатии
15
Баллы
8
#1
Agelil разместил(а) новый ресурс:

Баннер группы и ник градиентом - Как сделать группу пользователя и ник в виде градиента

Посмотреть вложение 24873
Чтоб сделать такой никнейм:
Для XF 1.x:
Админка>Пользователи>Группы пользователей выбираем требуемую группу и CSS-стиль для имени пользователя, там пишем код
Код:
background: linear-gradient(90deg, #0095dd 0%, #f1094b 100%, #0095dd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #FF512F;
font-size: 16px;
font-weight: bold;
text-shadow: #FF512F
Для XF 2.x
Админка>Группы и права>Группы пользователей выбираем требуемую группу...
Посмотреть страницу этого ресурса...
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
6.046
Симпатии
5.827
Баллы
266
#2
Код:
background: linear-gradient(90deg, #0095dd 0%, #f1094b 100%, #0095dd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #FF512F;
font-size: 16px;
font-weight: bold;
text-shadow: #FF512F
Укажу на ошибки в коде.
1. Нельзя в настройках стиля имени пользователя указывать размер шрифта, font-size: 16px;, получишь ник одного размера везде, хотя он разный для разных мест.
2. Насыщенность шрифта font-weight: bold; и так указана где надо.
3. Тень шрифта не указывается одним значением цвета text-shadow: #FF512F должно присутствовать еще три значения, смещение тени по горизонтали, смещение тени по вертикали и радиус размытия, text-shadow: 1px 1px 2px #FF512F
4. Линейный градиент указан тоже не очень правильно, задано три цвета, но по сути третий такой же как первый, а второй цвет растянут до конца, поэтому указывать третий нет смысла, его не видно, достаточно background: linear-gradient(90deg, #0095dd 0%, #f1094b 100%);
 
Последнее редактирование:

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
6.046
Симпатии
5.827
Баллы
266
#3
Перейдем к баннеру :)
CSS:
.GroupNameBanner {
    background: linear-gradient(90deg, #5c258d, #4389a2);
    width: 116px;
    display: block;
    color: white;
}
1. Указана ширина баннера, но ведь постбит может быт разный на разных стилях и поэтому надо указывать ширину в процентах, не фиксировать ее, width: 100%;
2. Для линейного градиента можно указать позицию

Пожалуйста, Войдите или Зарегистрируйтесь для просмотра скрытого текста.


3. Выставить текст по центру text-align: center;, так указан свой css для баннера и уже от дефолтных свойства не работают.
4. Желательно указать внутренний отступ, padding ну и внешний margin
5. Еже желательно код для адаптивного дизайна и для профиля пользователя, так как если установим ширину для постбита 100%, то и там растянется, не всех это устроит :)
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
6.046
Симпатии
5.827
Баллы
266
#4
Время появилось, решил добавить кое чего. Авторы ресурсов, в которых я даю комментарии по поводу кода, не обижайтесь, ну во первых я несу какую-никакую ответственность за размещенные вами ресурсы и не могу позволить своим пользователям использовать не очень правильные коды. Запретить размещать, не хочется, вам надо зарабатывать симпатии. Расценивайте это, как уроки от меня :)
Ближе к делу, Ну вот не понравилось мне как представлен здесь баннер, один, нет для других групп, ну вроде понятно, но по сути придется для каждой группы переписывать весь код, хотя там изменяется только градиент фона. Вот набросал для LESS
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;
    }
}
на выходе CSS
CSS:
.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;
}

.gradientBanner.admin {
    background-image: -webkit-linear-gradient(left, #E70707, #5E0000);
    background-image: -moz-linear-gradient(left, #E70707, #5E0000);
    background-image: linear-gradient(90deg, #E70707 0%, #5E0000 100%);
}

.gradientBanner.moder {
    background-image: -webkit-linear-gradient(left, #029B0E, #C10000);
    background-image: -moz-linear-gradient(left, #029B0E, #C10000);
    background-image: linear-gradient(90deg, #029B0E 0%, #C10000 100%);
}

.gradientBanner.user {
    background-image: -webkit-linear-gradient(left, #02739B, #00C134);
    background-image: -moz-linear-gradient(left, #02739B, #00C134);
    background-image: linear-gradient(90deg, #02739B 0%, #00C134 100%);
}

.gradientBanner.lamer {
    background-image: -webkit-linear-gradient(left, #6CD4F9, #005FAD);
    background-image: -moz-linear-gradient(left, #6CD4F9, #005FAD);
    background-image: linear-gradient(90deg, #6CD4F9 0%, #005FAD 100%);
}

[data-template="member_view"] .memberHeader-banners .gradientBanner,
.tooltip--member .tooltip-content .gradientBanner {
    width: 120px!important;
}

@media (max-width: @xf-responsiveMedium) {
    .gradientBanner {
        display: inline!important;
        padding: 3px 5px;
    }
}
Код поправил, добавил адаптивный дизайн.
 
Последнее редактирование:

Fastoner

Пользователь
Сообщения
8
Симпатии
1
Баллы
3
#6
Куда этот код вставлять?)
 
Вверх Снизу