Less для красивых баннеров групп c прогресс баром 2.0.0

Mirovinger · 9 Сен 2019

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

Красивые баннеры групп на less - Красивые баннеры групп на less c прогресс баром.

Less:
Для добавления таких баннеров групп, как на скрине ниже - Посмотреть вложение 106316.
Посмотреть вложение 106319 Посмотреть вложение 106320
Достаточно добавить в extra.less такой код.

Less:

.fox-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; ) { .userBanner& { -webkit-box-shadow: 2px 2px 2px 0px #696969; box-shadow: 2px...

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

Mirovinger · 9 Сен 2019

Тем, кому не нравится закруглённый шрифт, могут использовать данный.

Так же скорректированный код - Less для красивых баннеров групп c прогресс баром - Дополнительная информация.

Tam1oka · 17 Ноя 2021

что-то нужно добавлять в CSS-стиль для имени пользователя ?
или в

Другой, используя своё имя CSS-класса ?

IlyaPep · 17 Ноя 2021

Nazar_Grozny написал(а):
что-то нужно добавлять в CSS-стиль для имени пользователя ?
или в

Другой, используя своё имя CSS-класса ?

Нет, код изменяет стандартные баннеры, а не добавляет новые.

Tam1oka · 17 Ноя 2021

Keir Moon написал(а):
Нет, код изменяет стандартные баннеры, а не добавляет новые.

вписал всё но баннеры остались как и были

IlyaPep · 17 Ноя 2021

Nazar_Grozny написал(а):
вписал всё но баннеры остались как и были

Красный баннер выбрал?

Tam1oka · 17 Ноя 2021

Keir Moon написал(а):
Красный баннер выбрал?

Да

Tam1oka · 17 Ноя 2021

thevelasco · 17 Ноя 2021

смысле??
Вставьте в extra less код

Less:

.fox-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; ) {
    .userBanner& {
        -webkit-box-shadow: 2px 2px 2px 0px #696969;
        box-shadow: 2px 2px 2px 0px #696969;
        padding: 5px;
        background: @bgColor;
        border-color: @bgColor;
        color: @textColor;
        text-align: left;
        letter-spacing: 0;
        margin-bottom: 4px;
        text-transform: uppercase;
        font-size: 10px;
        position: relative;
        border-radius: 0;
        min-width: 160px;

        strong {
            color: @strongColor;
        }

        & when (@textShadow) {
            text-shadow: 0 0 2px;
        }

        & when not (@numLine = false) and (@numLine <= 7) {
            @startBgColor: #fc4330;
            @stopBgColor: #cccccc;
            @startPercentColor: @numLine * 14.2%;
            @stopPercentColor: 0%;
            padding: 7px 5px 5px;

            .userBanner-before {
                position: absolute;
                display: block;
                top: -10px;
                left: -1px;

                &:before {
                    .m-faBase();
                    content: "\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1";
                    //content: "\f86c\f86c\f86c\f86c\f86c\f86c\f86c"; // FA 5.9
                    font-size: 2.2em;
                    line-height: 0;
                    letter-spacing: 1px;
                    & when (iscolor(@startColor)) and (iscolor(@stopColor)) {
                        background: linear-gradient(90deg, @startColor @startPercentColor, @stopColor @stopPercentColor);
                    }
                    & when (@startColor = false) and (@stopColor = false) {
                        background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopBgColor @stopPercentColor);
                    }
                    & when (@startColor = false) and (iscolor(@stopColor)){
                        background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopColor @stopPercentColor);
                    }
                    & when (iscolor(@startColor)) and (@stopColor = false) {
                        background: linear-gradient(90deg, @startColor @startPercentColor, @stopBgColor @stopPercentColor);
                    }
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    border-image-slice: 1;
                }
            }
        }

        .userBanner-after:after {
            float: right;
            content: 'fox.dev';
        }
    }
}

Дальше ниже уже вы создаете самой баннер не нужно копировать такой большой текст всегда
Например

Less:

.velasco {
    .fox-bannerProgressLine(7; false; false; white; white; #185886; false);
}

И в итоге вписываешь свое название которое ты поставил выше

IlyaPep · 17 Ноя 2021

Nazar_Grozny написал(а):
Да

Весь код добавлен? Только что проверил и всё прекрасно работает.

Tam1oka · 17 Ноя 2021

thevelasco написал(а):

смысле??
Вставьте в extra less код

Less:

.fox-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; ) {
    .userBanner& {
        -webkit-box-shadow: 2px 2px 2px 0px #696969;
        box-shadow: 2px 2px 2px 0px #696969;
        padding: 5px;
        background: @bgColor;
        border-color: @bgColor;
        color: @textColor;
        text-align: left;
        letter-spacing: 0;
        margin-bottom: 4px;
        text-transform: uppercase;
        font-size: 10px;
        position: relative;
        border-radius: 0;
        min-width: 160px;

        strong {
            color: @strongColor;
        }

        & when (@textShadow) {
            text-shadow: 0 0 2px;
        }

        & when not (@numLine = false) and (@numLine <= 7) {
            @startBgColor: #fc4330;
            @stopBgColor: #cccccc;
            @startPercentColor: @numLine * 14.2%;
            @stopPercentColor: 0%;
            padding: 7px 5px 5px;

            .userBanner-before {
                position: absolute;
                display: block;
                top: -10px;
                left: -1px;

                &:before {
                    .m-faBase();
                    content: "\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1";
                    //content: "\f86c\f86c\f86c\f86c\f86c\f86c\f86c"; // FA 5.9
                    font-size: 2.2em;
                    line-height: 0;
                    letter-spacing: 1px;
                    & when (iscolor(@startColor)) and (iscolor(@stopColor)) {
                        background: linear-gradient(90deg, @startColor @startPercentColor, @stopColor @stopPercentColor);
                    }
                    & when (@startColor = false) and (@stopColor = false) {
                        background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopBgColor @stopPercentColor);
                    }
                    & when (@startColor = false) and (iscolor(@stopColor)){
                        background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopColor @stopPercentColor);
                    }
                    & when (iscolor(@startColor)) and (@stopColor = false) {
                        background: linear-gradient(90deg, @startColor @startPercentColor, @stopBgColor @stopPercentColor);
                    }
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    border-image-slice: 1;
                }
            }
        }

        .userBanner-after:after {
            float: right;
            content: 'fox.dev';
        }
    }
}

Дальше ниже уже вы создаете самой баннер не нужно копировать такой большой текст всегда
Например

Less:

.velasco {
    .fox-bannerProgressLine(7; false; false; white; white; #185886; false);
}

И в итоге вписываешь свое название которое ты поставил выше
Посмотреть вложение 133285
Посмотреть вложение 133287

сделал всё как вы написали вот что вышло

Tam1oka · 17 Ноя 2021

Keir Moon написал(а):
Весь код добавлен?

весь добавил

IlyaPep · 17 Ноя 2021

Nazar_Grozny написал(а):
весь добавил

Я к сожалению ещё не закончил курс гадалок и не буду гадать что ты не так сделал, давай доступ, тогда помогу. И кстати, а где копирайт перевода от Jumuro?

Tam1oka · 17 Ноя 2021

вот весь код который у меня в extra.less

Код:

.fox-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; ) {
    .userBanner& {
        -webkit-box-shadow: 2px 2px 2px 0px #696969;
        box-shadow: 2px 2px 2px 0px #696969;
        padding: 5px;
        background: @bgColor;
        border-color: @bgColor;
        color: @textColor;
        text-align: left;
        letter-spacing: 0;
        margin-bottom: 4px;
        text-transform: uppercase;
        font-size: 10px;
        position: relative;
        border-radius: 0;
        min-width: 160px;

        strong {
            color: @strongColor;
        }

        & when (@textShadow) {
            text-shadow: 0 0 2px;
        }

        & when not (@numLine = false) and (@numLine <= 7) {
            @startBgColor: #fc4330;
            @stopBgColor: #cccccc;
            @startPercentColor: @numLine * 14.2%;
            @stopPercentColor: 0%;
            padding: 7px 5px 5px;

            .userBanner-before {
                position: absolute;
                display: block;
                top: -10px;
                left: -1px;

                &:before {
                    .m-faBase();
                    content: "\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1\f2d1";
                    //content: "\f86c\f86c\f86c\f86c\f86c\f86c\f86c"; // FA 5.9
                    font-size: 2.2em;
                    line-height: 0;
                    letter-spacing: 1px;
                    & when (iscolor(@startColor)) and (iscolor(@stopColor)) {
                        background: linear-gradient(90deg, @startColor @startPercentColor, @stopColor @stopPercentColor);
                    }
                    & when (@startColor = false) and (@stopColor = false) {
                        background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopBgColor @stopPercentColor);
                    }
                    & when (@startColor = false) and (iscolor(@stopColor)){
                        background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopColor @stopPercentColor);
                    }
                    & when (iscolor(@startColor)) and (@stopColor = false) {
                        background: linear-gradient(90deg, @startColor @startPercentColor, @stopBgColor @stopPercentColor);
                    }
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    border-image-slice: 1;
                }
            }
        }

        .userBanner-after:after {
            float: right;
            content: 'test';
        }
    }
}
.test {
    .fox-bannerProgressLine(7; false; false; white; white; #185886; false);
}

Red_Normov · 17 Ноя 2021

Nazar_Grozny написал(а):
сделал всё как вы написали вот что вышло
Посмотреть вложение 133288

баннер у тебя есть

Tam1oka · 17 Ноя 2021

Red_Normov написал(а):
Посмотреть вложение 133289баннер у тебя есть

OFFTOP

эм, а у меня его не показует

Red_Normov · 17 Ноя 2021

Nazar_Grozny написал(а):
OFFTOP
эм, а у меня его не показует

дэфаил стиль

Tam1oka · 17 Ноя 2021

Red_Normov написал(а):
дэфаил стиль

понял

Matew · 17 Ноя 2021

Keir Moon написал(а):
Я к сожалению ещё не закончил курс гадалок и не буду гадать что ты не так сделал, давай доступ, тогда помогу. И кстати, а где копирайт перевода от Jumuro?

Пздц

IlyaPep · 17 Ноя 2021

Matew написал(а):
Пздц

OFFTOP

Что?

Less для красивых баннеров групп c прогресс баром 2.0.0

Mirovinger

Mirovinger

Tam1oka

IlyaPep

Tam1oka

IlyaPep

Tam1oka

Tam1oka

thevelasco

IlyaPep

Tam1oka

Tam1oka

IlyaPep

Tam1oka

Red_Normov

Tam1oka

Red_Normov

Tam1oka

Matew

IlyaPep

Похожие темы

Мы ценим вашу конфиденциальность