Переливающиеся префиксы

УСТРАНЕНИЕ КОНКУРЕНТОВ. БЛОКИРОВКА ДОМЕНОВ, БЛОКИРОВКА ИНСТАГРАМ/ТЕЛЕГРАМ И ДРУГОЕ. ПРОВЕРЕННЫЙ СЕЛЛЕР.

НОВЫЕ ТОРГОВАЯ НОВОСТИ ЧАТ

Скрыть

		ANTICHAT > ПРОГРАММИРОВАНИЕ > Общие вопросы программирования
Переливающиеся префиксы

Опции темы

Поиск в этой теме

Опции просмотра

05.07.2023, 19:13

nitarav

Познающий

Регистрация: 02.07.2023

Сообщений: 63

С нами: 1510928

Репутация: 8

Здравствуйте, хочу узнать может у кого есть такие префиксы?

𝕏 Twitter Reddit Telegram Копировать ссылку

07.07.2023, 04:07

linmsqn

Постоянный

Регистрация: 29.05.2020

Сообщений: 331

С нами: 3136519

Репутация: 73

Вероятнее всего это сделано самостоятельно. Самый простой вариант чтобы получить стили и настроить - через код элемента просто посмотреть и скопировать. Вот что нашел самостоятельно:

CSS:

Код:

.gradientBanner
{
position
:
relative
}
.gradientBanner:after
{
content
:
''
;
opacity
:
0
;
position
:
absolute
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
background
:
#fff
;
animation
:
animate-shine 3s ease-out infinite
}
@keyframes animate-shine
{
0%
{
opacity
:
.1
;
width
:
0
}
50%
{
opacity
:
.5
}
100%
{
opacity
:
0
;
width
:
100%
}
}
.gradientBanner
{
font-size
:
80%
;
font-weight
:
400
;
font-style
:
normal
;
padding
:
1px 10px
;
padding
:
1px 3px
;
border
:
1px solid transparent
;
border-radius
:
2px
;
text-align
:
center
;
display
:
inline-block
}
.gradientBanner.green
{
box-shadow
:
0px 0px 5px #4caf50
;
background-color
:
#4CAF50
;
border-color
:
#4CAF50
;
color
:
#fff
}

CSS:

Код:

.gradientBanner.green

- один из примеров рабочего баннера

Чтобы сделать подобное в extra.less добавляй:

Код:

Код:

.gradientBanner {
    position: relative
}

.gradientBanner:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    animation: animate-shine 3s ease-out infinite
}

@keyframes animate-shine {
    0% {
        opacity: .1;
        width: 0
    }

    50% {
        opacity: .5
    }

    100% {
        opacity: 0;
        width: 100%
    }
}

.gradientBanner {
    font-size: 80%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 10px;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: 2px;
    text-align: center;
    display: inline-block
}

.gradientBanner.green {
    box-shadow: 0px 0px 5px #4caf50;
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff
}

Чтобы добавить остальные стили, также в extra.less добавляешь

CSS:

Код:

.gradientBanner.green
{
box-shadow
:
0px 0px 5px #4caf50
;
background-color
:
#4CAF50
;
border-color
:
#4CAF50
;
color
:
#fff
}

и потом редактируешь название (green меняешь на другое), а также сами цвета в box-shadow, background-color и border-color

07.07.2023, 14:34

nitarav

Познающий

Регистрация: 02.07.2023

Сообщений: 63

С нами: 1510928

Репутация: 8

Цитата:

Сообщение от linmsqn

Код:

.gradientBanner
{
position
:
relative
}
.gradientBanner:after
{
content
:
''
;
opacity
:
0
;
position
:
absolute
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
background
:
#fff
;
animation
:
animate-shine 3s ease-out infinite
}
@keyframes animate-shine
{
0%
{
opacity
:
.1
;
width
:
0
}
50%
{
opacity
:
.5
}
100%
{
opacity
:
0
;
width
:
100%
}
}
.gradientBanner
{
font-size
:
80%
;
font-weight
:
400
;
font-style
:
normal
;
padding
:
1px 10px
;
padding
:
1px 3px
;
border
:
1px solid transparent
;
border-radius
:
2px
;
text-align
:
center
;
display
:
inline-block
}
.gradientBanner.green
{
box-shadow
:
0px 0px 5px #4caf50
;
background-color
:
#4CAF50
;
border-color
:
#4CAF50
;
color
:
#fff
}

CSS:

Код:

.gradientBanner.green

- один из примеров рабочего баннера

Чтобы сделать подобное в extra.less добавляй:

Код:

Код:

.gradientBanner {
    position: relative
}

.gradientBanner:after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    animation: animate-shine 3s ease-out infinite
}

@keyframes animate-shine {
    0% {
        opacity: .1;
        width: 0
    }

    50% {
        opacity: .5
    }

    100% {
        opacity: 0;
        width: 100%
    }
}

.gradientBanner {
    font-size: 80%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 10px;
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: 2px;
    text-align: center;
    display: inline-block
}

.gradientBanner.green {
    box-shadow: 0px 0px 5px #4caf50;
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff
}

Чтобы добавить остальные стили, также в extra.less добавляешь

CSS:

Код:

.gradientBanner.green
{
box-shadow
:
0px 0px 5px #4caf50
;
background-color
:
#4CAF50
;
border-color
:
#4CAF50
;
color
:
#fff
}

и потом редактируешь название (green меняешь на другое), а также сами цвета в box-shadow, background-color и border-color

Да ты волшебник, спасибо

« Предыдущая тема | Следующая тема »

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)

Быстрый переход