Пользователь
- Регистрация
- 1 Ноя 2023
- Сообщения
- 20
- Автор темы
- #1
3.2. Код больше 10 строк необходимо брать еще и под спойлер.
сегодня заметил краску, протестил - все окей, кому нужно пользуйтесь.
CSS:
.userBanner.wag {
background: linear-gradient(45deg, #f00, #c00, #f00, #c00) !important;
background-size: 400% 400% !important;
animation: wagnerShimmer 3s ease-in-out infinite !important;
color: white !important;
text-align: center !important;
font-size: 14px !important;
font-weight: 500 !important;
border-radius: 8px !important;
padding: 4px 10px !important;
border: none !important;
position: relative !important;
overflow: visible !important;
box-shadow: 0 2px 8px rgba(255,0,0,0.3) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 2px 4px !important;
text-shadow: 0 0 10px rgba(255,0,0,0.7) !important;
letter-spacing: 1px !important;
min-height: 22px !important;
max-height: 24px !important;
line-height: 1.3 !important
}
@keyframes wagnerShimmer {
.userBanner 0% {
background-position: 0% 50%
}
.userBanner 50% {
background-position: 100% 50%
}
.userBanner 100% {
background-position: 0% 50%
}
}
.userBanner.wag::after {
content: '';
background-image: url('[URL]https://steamuserimages-a.akamaihd.net/ugc/2017102299334556140/2850FEB3E6AA7B24685305EC7610E5BCC874983F/?imw=512&imh=619&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true');[/URL]
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 20px;
height: 20px;
display: inline-block;
margin-left: 8px;
vertical-align: middle;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 12px rgba(255,255,255,0.8),0 0 18px rgba(255,0,0,0.6),0 3px 6px rgba(0,0,0,0.3);
animation: wagnerPhoto 3s ease-in-out infinite;
flex-shrink: 0 !important;
align-self: center !important;
filter: brightness(1.15) contrast(1.08) saturate(1.2)
}
@keyframes wagnerPhoto {
.userBanner 0%,.userBanner 100% {
transform: scale(1) rotate(0deg);
box-shadow: 0 0 12px rgba(255,255,255,0.8),0 0 18px rgba(255,0,0,0.6),0 3px 6px rgba(0,0,0,0.3)
}
.userBanner 50% {
transform: scale(1.12) rotate(6deg);
box-shadow: 0 0 18px rgba(255,255,255,0.9),0 0 25px rgba(255,0,0,0.7),0 4px 8px rgba(0,0,0,0.4)
}
}
.userBanner.wag:hover {
animation: wagnerPulse .5s ease-in-out !important;
transform: scale(1.04) !important
}
.userBanner.wag:hover::after {
transform: scale(1.15) !important;
box-shadow: 0 0 18px rgba(255,255,255,0.9),0 0 25px rgba(255,0,0,0.7),0 4px 8px rgba(0,0,0,0.4)
}
@keyframes wagnerPulse {
.userBanner 0% {
transform: scale(1)
}
.userBanner 50% {
transform: scale(1.06)
}
.userBanner 100% {
transform: scale(1.04)
}
}
@media (max-width: 768px) {
.userBanner.wag {
font-size:13px !important;
padding: 3px 8px !important;
min-height: 20px !important;
max-height: 22px !important
}
.userBanner.wag::after {
width: 18px;
height: 18px;
margin-left: 6px;
border-width: 2px
}
}
--dark .userBanner.wag {
box-shadow: 0 2px 8px rgba(255,0,0,0.4) !important
}
.userList .userBanner.wag {
margin: 2px 0 !important
}
.profilePage .userBanner.wag {
font-size: 14px !important;
padding: 4px 10px !important;
margin: 4px 0 !important
}
.userBanner.wag * {
color: #ffffff !important
}
.userBanner.wag .avatar,.userBanner.wag .userAvatar {
box-shadow: 0 0 8px rgba(255,0,0,0.5) !important;
border: 2px solid #f00 !important;
box-shadow: 0 0 6px rgba(255,0,0,0.4) !important;
border: 1px solid #f00 !important;
box-shadow: 0 0 4px rgba(255,0,0,0.3) !important
}
Последнее редактирование модератором:
