хочу сделать одно получаеться другое

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
Регистрация
27 Окт 2024
Сообщения
560
.p-body .username[data-user-id="2"] {
--g: linear-gradient(90deg, var(--n187-a), var(--n187-b));
position: relative;
display: inline-block;
background: var(--g);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 800;
letter-spacing: .2px;
text-shadow: 0 0 10px var(--n187-gl1),0 0 20px var(--n187-gl2)
}

.p-body .username[data-user-id="2"]::after {
content: "";
position: absolute;
left: -2px;
right: -2px;
bottom: -2px;
height: 2px;
background: var(--g);
border-radius: 2px;
filter: drop-shadow(0 0 6px var(--n187-gl1));
transform: scaleX(.15);
transform-origin: left center;
opacity: .75;
transition: transform .35s cubic-bezier(.2, .7, .2, 1),opacity .35s
}

.p-body .username[data-user-id="2"]::before {
content: "⚙";
display: inline-block;
margin-right: 6px;
line-height: 1;
background: var(--g);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 6px var(--n187-gl1));
opacity: .9;
transform: translateY(-0.5px)
}

@keyframes n187-shimmer {
from {
background-position: -200% 0
}

to {
background-position: 200% 0
}
}

.p-body .username[data-user-id="2"]:hover {
background-image: linear-gradient(90deg, var(--n187-a), var(--n187-ac), var(--n187-b));
background-size: 200% 100%;
animation: n187-shimmer 2.2s linear infinite
}

.p-body .username[data-user-id="2"]:hover::after {
transform: scaleX(1);
opacity: 1
}

html[data-color-scheme="light"] :is(.message-name,.structItem-title,.memberHeader,.contentRow-main) .username[data-user-id="2"] {
text-shadow: 0 1px 0 hsla(0,0%,0%,.25),0 0 10px var(--n187-gl1),0 0 18px var(--n187-gl2)
}

:is( .structItem-minor, /* метаданные списка тем */
.message-attribution, /* «написал … минут назад» */
.contentRow-minor, /* минорные строки контента */
.block-footer, .pairs.pairs--inline, .message-userExtras, .message-signature ) .username[data-user-id="2"] {
background: none;
-webkit-text-fill-color: initial;
color: var(--n187-solid);
text-shadow: none;
font-weight: 700;
letter-spacing: .1px
}

:is( .structItem-minor, .message-attribution, .contentRow-minor, .block-footer, .pairs.pairs--inline, .message-userExtras, .message-signature ) .username[data-user-id="2"]::after {
display: none
}

:is( .structItem-minor, .message-attribution, .contentRow-minor, .block-footer, .pairs.pairs--inline, .message-userExtras, .message-signature ) .username[data-user-id="2"]:hover {
animation: none
}

.userBanner .username[data-user-id="2"]::before {
content: none
}

[class*="avatar-u2"],a[href$="/members/2/"] .avatar {
position: relative
}

[class*="avatar-u2"]::after,a[href$="/members/2/"] .avatar::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 999px;
pointer-events: none;
border: 2px solid hsla(0,0%,0%,0);
background: linear-gradient(hsl(0,0%,0%) 0, hsl(0,0%,0%) 0) padding-box,linear-gradient(90deg, var(--n187-a), var(--n187-b)) border-box;
box-shadow: 0 0 14px var(--n187-gl1),0 0 28px var(--n187-gl2)
}

@media (prefers-reduced-motion:reduce) {
.username[data-user-id="2"] {
animation: none
}
}
 

Вложения

  • Screenshot 2025-12-08 213809.png
    Screenshot 2025-12-08 213809.png
    23 KB · Просмотры: 14
  • Screenshot 2025-12-08 213937.png
    Screenshot 2025-12-08 213937.png
    2.9 KB · Просмотры: 13
Пользователь
Регистрация
15 Фев 2025
Сообщения
308
.p-body .username[data-user-id="2"] {
--g: linear-gradient(90deg, var(--n187-a), var(--n187-b));
position: relative;
display: inline-block;
background: var(--g);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-weight: 800;
letter-spacing: .2px;
text-shadow: 0 0 10px var(--n187-gl1),0 0 20px var(--n187-gl2)
}

.p-body .username[data-user-id="2"]::after {
content: "";
position: absolute;
left: -2px;
right: -2px;
bottom: -2px;
height: 2px;
background: var(--g);
border-radius: 2px;
filter: drop-shadow(0 0 6px var(--n187-gl1));
transform: scaleX(.15);
transform-origin: left center;
opacity: .75;
transition: transform .35s cubic-bezier(.2, .7, .2, 1),opacity .35s
}

.p-body .username[data-user-id="2"]::before {
content: "⚙";
display: inline-block;
margin-right: 6px;
line-height: 1;
background: var(--g);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 6px var(--n187-gl1));
opacity: .9;
transform: translateY(-0.5px)
}

@keyframes n187-shimmer {
from {
background-position: -200% 0
}

to {
background-position: 200% 0
}
}

.p-body .username[data-user-id="2"]:hover {
background-image: linear-gradient(90deg, var(--n187-a), var(--n187-ac), var(--n187-b));
background-size: 200% 100%;
animation: n187-shimmer 2.2s linear infinite
}

.p-body .username[data-user-id="2"]:hover::after {
transform: scaleX(1);
opacity: 1
}

html[data-color-scheme="light"] :is(.message-name,.structItem-title,.memberHeader,.contentRow-main) .username[data-user-id="2"] {
text-shadow: 0 1px 0 hsla(0,0%,0%,.25),0 0 10px var(--n187-gl1),0 0 18px var(--n187-gl2)
}

:is( .structItem-minor, /* метаданные списка тем */
.message-attribution, /* «написал … минут назад» */
.contentRow-minor, /* минорные строки контента */
.block-footer, .pairs.pairs--inline, .message-userExtras, .message-signature ) .username[data-user-id="2"] {
background: none;
-webkit-text-fill-color: initial;
color: var(--n187-solid);
text-shadow: none;
font-weight: 700;
letter-spacing: .1px
}

:is( .structItem-minor, .message-attribution, .contentRow-minor, .block-footer, .pairs.pairs--inline, .message-userExtras, .message-signature ) .username[data-user-id="2"]::after {
display: none
}

:is( .structItem-minor, .message-attribution, .contentRow-minor, .block-footer, .pairs.pairs--inline, .message-userExtras, .message-signature ) .username[data-user-id="2"]:hover {
animation: none
}

.userBanner .username[data-user-id="2"]::before {
content: none
}

[class*="avatar-u2"],a[href$="/members/2/"] .avatar {
position: relative
}

[class*="avatar-u2"]::after,a[href$="/members/2/"] .avatar::after {
content: "";
position: absolute;
inset: -2px;
border-radius: 999px;
pointer-events: none;
border: 2px solid hsla(0,0%,0%,0);
background: linear-gradient(hsl(0,0%,0%) 0, hsl(0,0%,0%) 0) padding-box,linear-gradient(90deg, var(--n187-a), var(--n187-b)) border-box;
box-shadow: 0 0 14px var(--n187-gl1),0 0 28px var(--n187-gl2)
}

@media (prefers-reduced-motion:reduce) {
.username[data-user-id="2"] {
animation: none
}
}

IMG_3868.jpeg
OFFTOP

на будущее код всталять через

 
Сверху