Этот информер выполнен в цветовой гамме моего форума, но на всякий случай делюсь этим маленьким шедевром , вдруг кому-то он тоже придётся по душе.
CSS
Код
<!-- ====== LILAC MINIMAL INFORMER START ====== -->
<style>
/* Аватар */
.infsimg1 {
border: 1px solid #bbb;
background: #fff;
padding: 2px;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infsimg1:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Основной текст */
.spa {
font-family: "Segoe UI", Geneva, Tahoma, Verdana, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: #333;
}
/* Ссылка на имя */
.username-link {
font-weight: 500;
font-size: 13px;
color: #5b2c82; /* тёмный сиреневый */
text-decoration: none;
transition: color 0.3s ease;
}
.username-link:hover {
color: #a569bd; /* светлый сиреневый акцент */
}
/* Репутация (бейдж) */
.positive {
display: inline-block;
padding: 4px 12px;
font-size: 11px;
font-weight: 500;
color: #fff;
border-radius: 50px;
background: linear-gradient(135deg, #4b0082, #7d3c98); /* тёмно-сиреневый градиент */
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.positive:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
</style>
Сам каркас HTML-информера.
Код
<div align="justify" class="spa">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="1%">
<img src="/forumimages/left1.png" height="45" width="2">
</td>
<td background="/forumimages/toppat.png">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td nowrap="nowrap">
<div>
<img class="infsimg1" src="$AVATAR_URL$" alt="$USERNAME$" align="left" width="36" height="36" style="margin-right:8px;">
<a href="$PROFILE_URL$" class="username-link" title="$USERNAME$">$USERNAME$</a>
<br>
<img src="/template/forum/pf_ie/topic_mod.gif" border="0" style="vertical-align:middle;">
</div>
</td>
<td align="right" nowrap="nowrap">
<span class="positive">$REPUTATION$</span>
</td>
</tr>
</table>
</td>
<td width="5">
<img src="/forumimages/right1.png" height="45" width="2">
</td>
</tr>
</table>
</div>
<!-- ====== LILAC MINIMAL INFORMER END ====== -->
Всё в одном куске: и HTML, и стили.
Код
<!-- ====== LILAC MINIMAL INFORMER START ====== -->
<style>
/* Аватар */
.infsimg1 {
border: 1px solid #bbb;
background: #fff;
padding: 2px;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infsimg1:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Основной текст */
.spa {
font-family: "Segoe UI", Geneva, Tahoma, Verdana, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
color: #333;
}
/* Ссылка на имя */
.username-link {
font-weight: 500;
font-size: 13px;
color: #5b2c82; /* тёмный сиреневый */
text-decoration: none;
transition: color 0.3s ease;
}
.username-link:hover {
color: #a569bd; /* светлый сиреневый акцент */
}
/* Репутация (бейдж) */
.positive {
display: inline-block;
padding: 4px 12px;
font-size: 11px;
font-weight: 500;
color: #fff;
border-radius: 50px;
background: linear-gradient(135deg, #4b0082, #7d3c98); /* тёмно-сиреневый градиент */
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.positive:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
</style>
<div align="justify" class="spa">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="1%">
<img src="/forumimages/left1.png" height="45" width="2">
</td>
<td background="/forumimages/toppat.png">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td nowrap="nowrap">
<div>
<img class="infsimg1" src="$AVATAR_URL$" alt="$USERNAME$" align="left" width="36" height="36" style="margin-right:8px;">
<a href="$PROFILE_URL$" class="username-link" title="$USERNAME$">$USERNAME$</a>
<br>
<img src="/template/forum/pf_ie/topic_mod.gif" border="0" style="vertical-align:middle;">
</div>
</td>
<td align="right" nowrap="nowrap">
<span class="positive">$REPUTATION$</span>
</td>
</tr>
</table>
</td>
<td width="5">
<img src="/forumimages/right1.png" height="45" width="2">
</td>
</tr>
</table>
</div>
<!-- ====== LILAC MINIMAL INFORMER END ====== -->