Знаки отличия на персональной странице uCoz
Знаки отличия будут стимулировать пользователя на различные действия на сайте. В нашем примере один знак дается за добавленный файл, другой за комментарий, третий за пост на форуме и т.д. По аналогии вы можете усложнить код, сделать отдельные награды за первый пост на форуме, за 10, за 20 и т.д.
Ранее на известном сайте Center-DM предлагалась целая стенка из наград, которые как бы нужно разблокировать, некий квест. Идея даже интересная, но наш вариант представляет собой монументальные знаки отличия, пользователь за небольшое время может собрать 5 штук и успокоиться. Сделали новый скрипт по аналогии с нашими наградами на Урааа, только добавили анимацию при наведении.
Установка
Вставьте код на персональную страницу пользователя в том месте где хотите видеть знаки отличия:
<?if($_LOAD_ENTRIES$>0)?><div class="signOne sLoad"><span><i>Знак выдается за первый файл</i></span></div><?endif?>
<?if($_COM_ENTRIES$>0)?><div class="signOne sComments"><span><i>Знак выдается за коммен-<br>тарии</i></span></div><?endif?>
<?if($_FORUM_ENTRIES$>0)?><div class="signOne sForum"><span><i>Знак выдается за активность на форуме</i></span></div><?endif?>
<?if($_REPUTATION$>0)?><div class="signOne sReputation"><span><i>Знак выдается за хорошую репутацию</i></span></div><?endif?>
<?if($_AVATAR$)?><div class="signOne sAvatar"><span><i>Знак выдается за установку аватара</i></span></div><?endif?>
<?if($_EMAIL_IS_VERIFIED$)?><div class="signOne sProtect"><span><i>Знак выдается за подтверж-<br>денный<br>E-Mail</i></span></div><?endif?>
</div>
<style type="text/css">
.signsOver {width:100%;}
.signsOver * {transition: all linear .2s; -moz-transition: all linear .2s; -webkit-transition: all linear .2s; -o-transition: all linear .2s;}
.signOne {display:inline-block;width:100px;height:100px;position:relative}
.signOne:hover span {opacity:1;margin-top:0px}
.signOne span {opacity:0;margin-top:20px;cursor:help;width:100%;height:100%;top:0;left:0;position:absolute;background:rgba(0,0,0,0.7);color:#FFF;font-size:11px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.signOne span i {font-style:normal;padding:10px;display:block}
.sLoad {background:url('https://yraaa.ru/_pu/25/63354628.png') center no-repeat}
.sComments {background:url('https://yraaa.ru/_pu/25/45575411.png') center no-repeat}
.sForum {background:url('https://yraaa.ru/_pu/25/47909650.png') center no-repeat}
.sReputation {background:url('https://yraaa.ru/_pu/25/32575082.png') center no-repeat}
.sProtect {background:url('https://yraaa.ru/_pu/25/45136495.png') center no-repeat}
.sAvatar {background:url('https://yraaa.ru/_pu/25/15996736.png') center no-repeat}
</style>
Рекомендуется загрузить изображения в стилях на свой сайт, а стили поместить в ваш CSS-файл.
Демо
Результат работы кода выше выглядит так:
тарии
денный
Отличные плоские иконки были найдены на IconFinder, мы упоминали этот и другие сервисы иконок. Советуем использовать изображения с размером 64x64.
