В общем, представляю свою новую разработку, которая мне действительно понравилась, и хочу поделиться ею с вами. Возможно, кому-то она тоже придется по душе. Вы можете дополнить её, улучшить или адаптировать под свои нужды.



CSS

Код

<style>
/* === Стили для информера — утончённая версия с украшениями === */

.informer-link {
text-decoration: none;
}

.informer-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
border-radius: 16px;
background: linear-gradient(145deg, #ffffff, #f7f5fb);
border: 1px solid rgba(125,60,152,0.15); /* лёгкая обводка */
box-shadow: 0 3px 10px rgba(91,44,130,0.15);
transition: all 0.35s ease;
max-width: 340px;
cursor: pointer;
margin-bottom: 6px;
position: relative;
overflow: hidden;
}

.informer-container:hover {
transform: translateY(-3px) scale(1.015);
box-shadow: 0 8px 20px rgba(91,44,130,0.25);
border-color: rgba(125,60,152,0.25);
}

.informer-left {
display: flex;
align-items: center;
gap: 12px;
}

.avatar {
width: 42px;
height: 42px;
border-radius: 50%;
border: 2px solid #9b59b6;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avatar:hover {
transform: scale(1.15);
box-shadow: 0 4px 14px rgba(125,60,152,0.4);
}

.user-info {
display: flex;
flex-direction: column;
justify-content: center;
font-family: "Segoe UI", sans-serif;
}

.username-link {
font-size: 15px;
font-weight: 600;
color: #5b2c82;
text-decoration: none;
background: linear-gradient(90deg, #5b2c82, #9b59b6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.user-role {
font-size: 11px;
color: #777;
margin-top: 2px;
letter-spacing: 0.4px;
}

.positive {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
font-size: 12px;
font-weight: 600;
color: #fff;
border-radius: 14px;
background: linear-gradient(135deg, #6a1b9a, #8e44ad);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.positive:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(91,44,130,0.35);
}

.positive::before {
content: "⭐";
font-size: 13px;
}

/* Стрелочка справа */
.informer-arrow {
position: absolute;
right: 10px;
font-size: 14px;
color: #9b59b6;
opacity: 0.7;
transition: transform 0.3s ease, opacity 0.3s ease;
}

.informer-container:hover .informer-arrow {
transform: translateX(4px);
opacity: 1;
}
</style>

HTML

Код

<!-- HTML -->
<a href="$PROFILE_URL$" class="informer-link">
<div class="informer-container">
<div class="informer-left">
<img class="avatar" src="$AVATAR_URL$" alt="$USERNAME$">
<div class="user-info">
<span class="username-link">$USERNAME$</span>
<span class="user-role">Автор</span>
</div>
</div>
<span class="positive">$REPUTATION$</span>
<span class="informer-arrow">➜</span>
</div>
</a>

Мурчанн

1