Иконки для достижений, Добавить на странице профиля |
Добро пожаловать, гость ( Вход | Регистрация )
Иконки для достижений, Добавить на странице профиля |
Sheogorath |
11.5.2019, 18:28
Сообщение
#1
|
Новичок Группа: Пользователи Braingames Сообщений: 42 Регистрация: 26.6.2011 Пользователь №: 26 256 |
В профиле каждого игрока можно увидеть его достижения. И конечно, мозгобаксы, за которые можно купить vip-статус, мотивируют их получать.
Но взглянем на другие системы достижений: Steam, Activision, да даже воинские звания! Все эти системы объединяет наличие неких визуальных показателей достижения. Разве не было бы здорово, если бы и система достижений на «Играх разума» содержала какие-нибудь радующие глаз картинки? В общем, я сделал. Почему сова — потому что она символизирует мудрость: вспомним хотя бы сову Минервы. В пост выкладываю не все, чтобы не было большой простыни: я не понял, как на форуме пользоваться спойлерами, и есть ли они тут вообще. Все картинки можно посмотреть на яндекс.диске по ссылке. Автор-10: На вершине: Рейтинг-200: Есть идеи и насчет других достижений, вроде ачивки за решение всех задач какого-либо раздела. Мне кажется, в таком случае можно даже мозгобаксы за эти достижения не давать, все равно игроки с удовольствием будут их зарабатывать. Для того, чтобы они адекватно отображались в профиле, можно сделать как-то так. В HTML добавляем: Для открытого достижения: HTML <div class="achievement"> <a href="?path=usersrating&type=puzzleSolving&achCatId=5"> <img src="achievement5.png" alt="рейтинг-400[540](1.50)" /> </a> <span>достичь рейтинга 400. Награда 1.50 МозгоБаксов. Заслужило 540 пользователей.</span> </div> Для неоткрытого достижения: HTML <div class="achievement locked"> <a href="?path=usersrating&type=puzzleSolving&achCatId=6"> <img src="achievement6.png" alt="рейтинг-1000[125](1.50)" /> </a> <span>достичь рейтинга 1000. Награда 1.50 МозгоБаксов. Заслужило 125 пользователей.</span> </div> В таблицу стилей добавляем: CODE .achievement a, .achievement span { vertical-align: middle; display: inline-block; } .achievement img { width: 64px; height: 64px; } .achievement.locked img { opacity: 0.2; } .achievement.locked span { color: #aaa; } В приведенном коде используются ширина и высота 64х64, но можно сделать и больше: сами картинки имеют размер 256х256 пикселей. И да, принимаю тухлые помидоры, пожелания и предложения. Сообщение было отредактировано Sheogorath: 11.5.2019, 18:34 |
Упрощённая версия | Сейчас: 14.6.2024, 17:42 |