На моём форуме установлен информер.
Недавно я решил его немного обновить ,придать больше динамики и оживить внешний вид.
Правда, результат получился довольно странным и даже слегка пугающим.
Но, как говорится, пути Господни неисповедимы: возможно, кому-то такой вариант понравится, и он даже возьмёт его себе на вооружение.

CSS стили

Код

<style>
.infsimg1 {
border: 2px solid #313131;
background: linear-gradient(135deg, #111, #222);
padding: 2px;
margin-top: 0px;
box-shadow: 0 0 10px rgba(133, 59, 151, 0.6), inset 0 0 6px rgba(255, 255, 255, 0.05);
border-radius: 50%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infsimg1:hover {
transform: scale(1.1) rotate(2deg);
box-shadow: 0 0 15px rgba(133, 59, 151, 0.9), 0 0 25px rgba(0, 200, 255, 0.6);
}

/* Основной текст */
.spa {
font-family: Geneva, Tahoma, Verdana, sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
color: #444;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
letter-spacing: 0.3px;
}

/* Репутация – «позитивный бейдж» */
.positive {
display: inline-block;
padding: 3px 10px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
border-radius: 50px;
background: linear-gradient(135deg, #00b09b, #96c93d);
box-shadow: 0 0 6px rgba(0,0,0,0.3), inset 0 0 4px rgba(255,255,255,0.2);
animation: glow 2s infinite alternate;
}

/* Анимация сияния */
@keyframes glow {
from { box-shadow: 0 0 6px rgba(0,0,0,0.3), 0 0 10px rgba(0,200,255,0.4); }
to { box-shadow: 0 0 12px rgba(0,0,0,0.3), 0 0 18px rgba(0,200,255,0.8); }
}

/* Ссылки на имя */
.username-link {
font-family: "Marker Felt", sans-serif;
font-weight: 800;
font-size: 13px;
color: #0d2e4d;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.username-link:hover {
color: #ff4081;
text-shadow: 0 0 6px rgba(255, 64, 129, 0.7);
}
</style>

сам каркас HTML-информера.

Код

<div align="justify">
<span 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: 6px;">
<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;">
<span style="font-size:6pt;color:#000;text-transform: uppercase;letter-spacing: 2px;">
</span>
</div>
</td>
<td align="right" nowrap="nowrap">
<span class="positive" style="margin: 6px;">$REPUTATION$</span>
</td>
</tr>
</table>
</td>
<td width="5">
<img src="/forumimages/right1.png" height="45" width="2">
</td>
</tr>
</table>
</span>
</div>

Информер работает максимально просто, достаточно подставить ссылки на ваш сайт и он сразу же оживёт.
Если хотите, можете скачать элементы оформления отдельно, их там не так уж и много.

Всё в одном куске: и HTML, и стили.

Код

<!-- ====== INFORMER START ====== -->
<style>
.infsimg1 {
  border: 2px solid #313131;
  background: linear-gradient(135deg, #111, #222);
  padding: 2px;
  margin-top: 0px;
  box-shadow: 0 0 10px rgba(133, 59, 151, 0.6), inset 0 0 6px rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.infsimg1:hover {
  transform: scale(1.1) rotate(2deg);
  box-shadow: 0 0 15px rgba(133, 59, 151, 0.9), 0 0 25px rgba(0, 200, 255, 0.6);
}

/* Основной текст */
.spa {
  font-family: Geneva, Tahoma, Verdana, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #444;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
  letter-spacing: 0.3px;
}

/* Репутация – «позитивный бейдж» */
.positive {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  border-radius: 50px;
  background: linear-gradient(135deg, #00b09b, #96c93d);
  box-shadow: 0 0 6px rgba(0,0,0,0.3), inset 0 0 4px rgba(255,255,255,0.2);
  animation: glow 2s infinite alternate;
}

/* Анимация сияния */
@keyframes glow {
  from { box-shadow: 0 0 6px rgba(0,0,0,0.3), 0 0 10px rgba(0,200,255,0.4); }
  to   { box-shadow: 0 0 12px rgba(0,0,0,0.3), 0 0 18px rgba(0,200,255,0.8); }
}

/* Ссылки на имя */
.username-link {
  font-family: "Marker Felt", sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #0d2e4d;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.username-link:hover {
  color: #ff4081;
  text-shadow: 0 0 6px rgba(255, 64, 129, 0.7);
}

/* Подпись */
.informer-note {
  margin-top: 6px;
  font-size: 11px;
  font-style: italic;
  color: #666;
  text-align: center;
  opacity: 0.85;
}
</style>

<div align="justify" class="informer-wrapper">
  <span 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: 6px;">
                  <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" style="margin: 6px;">$REPUTATION$</span>
              </td>
            </tr>
          </table>
        </td>
        <td width="5">
          <img src="/forumimages/right1.png" height="45" width="2">
        </td>
      </tr>
    </table>
  </span>

Код

<!-- подпись-объяснение -->
  <div class="informer-note">
    Информер работает просто, подставьте ссылки на свой сайт и он оживёт.  
    Можно скачать элементы оформления отдельно, их там не так уж и много.
  </div>
</div>
<!-- ====== INFORMER END ====== -->

Мурчанн

1