Список пользователей

1
Админ
Постов: 101
2
Элита
Постов: 34
3
Элита
Постов: 28
4
VIP
Постов: 26
5
Дизайнер
Постов: 25
6
Пользователи
Постов: 25
7
Пользователи
Постов: 24
8
Проверенные
Постов: 21

  • Страница 1 из 1
  • 1
Топ 10 пользователей информер UCOZ репутации 2
Дата: Воскресенье, 31.08.2025, 01:12 | Сообщение # 1 | | Написал: Начинающий
Автор темы
Мурчанн не в сети
        Сообщений:101
         Регистрация:20.10.2016

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

Код

<style>
/* Аватар */
.infsimg1 {
  border: 2px solid #2c3e50;
  background: #fff;
  padding: 2px;
  margin-top: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  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.3);
}

/* Основной текст */
.spa {
  font-family: "Segoe UI", Geneva, Tahoma, Verdana, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #2c3e50;
}

/* Ссылки на имя */
.username-link {
  font-family: "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #0d47a1;
  text-decoration: none;
  transition: color 0.3s ease;
}
.username-link:hover {
  color: #ff4081;
}

/* Репутация (бейдж) */
.positive {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  border-radius: 50px;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: glow 2s infinite alternate;
}

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


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

Код
<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: 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" 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>
<!-- ====== INFORMER END ====== -->


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

Код
<!-- ====== INFORMER START ====== -->
<style>
/* Аватар */
.infsimg1 {
  border: 2px solid #2c3e50;
  background: #fff;
  padding: 2px;
  margin-top: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  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.3);
}

/* Основной текст */
.spa {
  font-family: "Segoe UI", Geneva, Tahoma, Verdana, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #2c3e50;
}

/* Ссылки на имя */
.username-link {
  font-family: "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #0d47a1;
  text-decoration: none;
  transition: color 0.3s ease;
}
.username-link:hover {
  color: #ff4081;
}

/* Репутация (бейдж) */
.positive {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  border-radius: 50px;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  animation: glow 2s infinite alternate;
}

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

<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: 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" 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>



Мурчанн


Прикрепления: 1946917.jpg (50.2 Kb)
Признаюсь, не знаю почему, но глядя на звезды мне всегда хочется мечтать.
  • Страница 1 из 1
  • 1
Поиск: