Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Закрыто Реализация плашки при наводе на ник

Статус
В этой теме нельзя размещать новые ответы.
luciferrrr

luciferrrr

Апр
329
487
Пользователь
всем привет, хочу реализовать такое же как и на видео, но не знаю как. кто умеет - подскажите пожалуйста, видео ниже
тык на видео
 
Сортировка по дате Сортировка по голосам
Sponzhik

Sponzhik

Июн
3,486
3,251
Профессионал
Пора бы научиться пользоваться DevTools товарищ.
в @uid: 1; писать id юзера
extra.less: 
@uid: 1;

@g-color1: hsl(194, 96%, 54%);
@g-color2: hsl(272, 71%, 37%);
@g-color3: hsl(0, 100%, 50%);
@g-gradient: linear-gradient(135deg, @g-color1, @g-color2, @g-color3, @g-color2, @g-color1);

@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rotate-gear {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.username[data-user-id="@{uid}"],
.memberTooltip-header .username[data-user-id="@{uid}"],
.memberTooltip-banners .username[data-user-id="@{uid}"] {
  position: relative;
  display: inline-block;
  font-weight: 800 !important;
  background: @g-gradient !important;
  background-size: 300% 300% !important;
  animation: gradient-move 4s ease infinite !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 6px hsla(272, 71%, 37%, 0.5));
  text-decoration: none !important;

  &:hover {
    text-decoration: none !important;
  }

  &::before {
    content: "⚙";
    display: inline-block;
    margin-right: 5px;
    color: @g-color1 !important;
    -webkit-text-fill-color: initial !important;
    filter: drop-shadow(0 0 3px @g-color1);
    animation: rotate-gear 3s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: @g-gradient !important;
    background-size: 300% 300% !important;
    animation: gradient-move 4s ease infinite !important;
    transform: scaleX(0.3);
    transition: transform 0.35s ease;
    border-radius: 2px;
  }

  &:hover::after {
    transform: scaleX(1) !important;
  }
}

1773281790233.png
 
Позитивный голос 0 Негативный голос
luciferrrr

luciferrrr

Апр
329
487
Пользователь
Lugunika написал(а):
Пора бы научиться пользоваться DevTools товарищ.
в @uid: 1; писать id юзера
extra.less: 
@uid: 1;

@g-color1: hsl(194, 96%, 54%);
@g-color2: hsl(272, 71%, 37%);
@g-color3: hsl(0, 100%, 50%);
@g-gradient: linear-gradient(135deg, @g-color1, @g-color2, @g-color3, @g-color2, @g-color1);

@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rotate-gear {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.username[data-user-id="@{uid}"],
.memberTooltip-header .username[data-user-id="@{uid}"],
.memberTooltip-banners .username[data-user-id="@{uid}"] {
  position: relative;
  display: inline-block;
  font-weight: 800 !important;
  background: @g-gradient !important;
  background-size: 300% 300% !important;
  animation: gradient-move 4s ease infinite !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 6px hsla(272, 71%, 37%, 0.5));
  text-decoration: none !important;

  &:hover {
    text-decoration: none !important;
  }

  &::before {
    content: "⚙";
    display: inline-block;
    margin-right: 5px;
    color: @g-color1 !important;
    -webkit-text-fill-color: initial !important;
    filter: drop-shadow(0 0 3px @g-color1);
    animation: rotate-gear 3s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: @g-gradient !important;
    background-size: 300% 300% !important;
    animation: gradient-move 4s ease infinite !important;
    transform: scaleX(0.3);
    transition: transform 0.35s ease;
    border-radius: 2px;
  }

  &:hover::after {
    transform: scaleX(1) !important;
  }
}

Посмотреть вложение 21586
Нажмите для раскрытия...
к сожалению, не работает
 
Позитивный голос 0 Негативный голос
KeoFox

KeoFox

Июл
1,380
1,944
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Lugunika написал(а):
Пора бы научиться пользоваться DevTools товарищ.
в @uid: 1; писать id юзера
extra.less: 
@uid: 1;

@g-color1: hsl(194, 96%, 54%);
@g-color2: hsl(272, 71%, 37%);
@g-color3: hsl(0, 100%, 50%);
@g-gradient: linear-gradient(135deg, @g-color1, @g-color2, @g-color3, @g-color2, @g-color1);

@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rotate-gear {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.username[data-user-id="@{uid}"],
.memberTooltip-header .username[data-user-id="@{uid}"],
.memberTooltip-banners .username[data-user-id="@{uid}"] {
  position: relative;
  display: inline-block;
  font-weight: 800 !important;
  background: @g-gradient !important;
  background-size: 300% 300% !important;
  animation: gradient-move 4s ease infinite !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 6px hsla(272, 71%, 37%, 0.5));
  text-decoration: none !important;

  &:hover {
    text-decoration: none !important;
  }

  &::before {
    content: "⚙";
    display: inline-block;
    margin-right: 5px;
    color: @g-color1 !important;
    -webkit-text-fill-color: initial !important;
    filter: drop-shadow(0 0 3px @g-color1);
    animation: rotate-gear 3s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: @g-gradient !important;
    background-size: 300% 300% !important;
    animation: gradient-move 4s ease infinite !important;
    transform: scaleX(0.3);
    transition: transform 0.35s ease;
    border-radius: 2px;
  }

  &:hover::after {
    transform: scaleX(1) !important;
  }
}

Посмотреть вложение 21586
Нажмите для раскрытия...
так они телефонные разработчики, у них таких благ нету
 
Позитивный голос 0 Негативный голос
U

unloadmod

я нейросеть
Май
1,167
694
Пользователь
KeoFox написал(а):
так они телефонные разработчики, у них таких благ нету
Нажмите для раскрытия...
OFFTOP

как минимум у меня есть. Конечно, пользоваться не очень удобно, но если под рукой нет пк пойдет

 
Позитивный голос 0 Негативный голос
KeoFox

KeoFox

Июл
1,380
1,944
Заблокированный
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки. Мы не несем ответственности за действия пользователя вне форума.
Lugunika написал(а):
OFFTOP


Если видео его, то он с пк так-то :unsure:

Нажмите для раскрытия...
OFFTOP

а, ну я не смотрел что там у него, как то привык что здесь 90% юзеров не вкурсе о существовании ПК

 
Позитивный голос 0 Негативный голос
Статус
В этой теме нельзя размещать новые ответы.
Сверху