Дата: Воскресенье, 31.08.2025, 01:12 | Сообщение # 1 |
|
Написал: Начинающий
Автор темы
Мурчанн
не в сети
Сообщений: 101
Это уже вторая версия информера с обновлёнными шрифтами и гармоничной цветовой схемой в синих тонах. Все блоки аккуратно подписаны, так что при желании вы легко сможете изменить, улучшить или даже прокачать его под свой вкус. Код
<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-информера. Код
<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)
Признаюсь, не знаю почему, но глядя на звезды мне всегда хочется мечтать.