Знаки отличия будут стимулировать пользователя на различные действия на сайте. В нашем примере один знак дается за добавленный файл, другой за комментарий, третий за пост на форуме и т.д. По аналогии вы можете усложнить код, сделать отдельные награды за первый пост на форуме, за 10, за 20 и т.д.
Ранее на известном сайте Center-DM предлагалась целая стенка из наград, которые как бы нужно разблокировать, некий квест. Идея даже интересная, но наш вариант представляет собой монументальные знаки отличия, пользователь за небольшое время может собрать 5 штук и успокоиться. Сделали новый скрипт по аналогии с нашими наградами, только добавили анимацию при наведении.
Установка
Вставьте код на персональную страницу пользователя в том месте где хотите видеть знаки отличия:
|
<div class="signsOver">
<?if($_LOAD_ENTRIES$><div class="signOne sLoad"><span><i>Знак выдается за первый файл</i></span></div><?endif?>
<?if($_COM_ENTRIES$><div class="signOne sComments"><span><i>Знак выдается за коммен-<br>тарии</i></span></div><?endif?>
<?if($_FORUM_ENTRIES$><div class="signOne sForum"><span><i>Знак выдается за активность на форуме</i></span></div><?endif?>
<?if($_REPUTATION$><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('http://s10.beln.by/cms_skripts/kar/02/61832.png') center no-repeat}
.sComments {background:url('http://s10.beln.by/cms_skripts/kar/02/61833.png') center no-repeat}
.sForum {background:url('http://s10.beln.by/cms_skripts/kar/02/61834.png') center no-repeat}
.sReputation {background:url('http://s10.beln.by/cms_skripts/kar/02/61835.png') center no-repeat}
.sProtect {background:url('http://s10.beln.by/cms_skripts/kar/02/61836.png') center no-repeat}
.sAvatar {background:url('http://s10.beln.by/cms_skripts/kar/02/61837.png') center no-repeat}
</style>
|
Рекомендуется загрузить изображения в стилях на свой сайт, а стили поместить в ваш CSS-файл.
Демо
Результат работы кода выше выглядит так:
Знак выдается за первый файл
Знак выдается за активность на форуме
Знак выдается за хорошую репутацию
Знак выдается за установку аватара
Знак выдается за подтверж-
денный
E-Mail
Отличные плоские иконки были найдены на IconFinder, мы упоминали этот и другие сервисы иконок. Советуем использовать изображения с размером 64x64.
Внимание!!! Скачивание файла доступно, только для групп "Пользователи", "VIP" и "Я, Online". | 
