Гайдлайны по оформлению иконками

Поскольку стандартные выравнивания налево и направо часто делают разные нехорошие вещи, рассмотрим, как можно красиво оформить способности персонажа с иконками и текстом.

Одна способность на строку

Опаляющий тотем
Опаляющий тотем
Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня. Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня.
Опаляющий тотем
Опаляющий тотем
Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня.
Опаляющий тотем
Опаляющий тотем
Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня.
Опаляющий тотем
Опаляющий тотем
Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня. Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня.
<div class="icons">
<div class="row"><img src="http://i.imgur.com/fvOLvvD.png" width="64" height="64" alt="Опаляющий тотем" /><div class="ability">Опаляющий тотем</div><div class="txt">Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня. Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня.</div></div>
<div class="row"><img src="http://i.imgur.com/fvOLvvD.png" width="64" height="64" alt="Опаляющий тотем" /><div class="ability">Опаляющий тотем</div><div class="txt">Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня.</div></div>
<div class="row"><img src="http://i.imgur.com/fvOLvvD.png" width="64" height="64" alt="Опаляющий тотем" /><div class="ability">Опаляющий тотем</div><div class="txt">Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня.</div></div>
<div class="row"><img src="http://i.imgur.com/fvOLvvD.png" width="64" height="64" alt="Опаляющий тотем" /><div class="ability">Опаляющий тотем</div><div class="txt">Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня. Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня.</div></div>
</div>

Две способности на строку

Внимание: не используйте этот код, если описание способности слишком длинное - блок обрезается при высоте больше 100 пикселей.

Spell_deathknight_bloodboil.png
Кровосос
Достаточно опытные кровопийцы могут высасывать кровь дистанционно, сильно ослабляя врага и восстанавливая своё здоровье. Мастера этого дела могут одновременно выкачивать кровь из группы противников, регенерируя с невероятной скоростью.
Spell_deathknight_bloodboil.png
Кровосос
Достаточно опытные кровопийцы могут высасывать кровь дистанционно, сильно ослабляя врага и восстанавливая своё здоровье. Мастера этого дела могут одновременно выкачивать кровь из группы противников, регенерируя с невероятной скоростью.
Spell_deathknight_bloodboil.png
Кровосос
Достаточно опытные кровопийцы могут высасывать кровь дистанционно, сильно ослабляя врага и восстанавливая своё здоровье. Мастера этого дела могут одновременно выкачивать кровь из группы противников, регенерируя с невероятной скоростью.
Spell_deathknight_bloodboil.png
Кровосос
Достаточно опытные кровопийцы могут высасывать кровь дистанционно, сильно ослабляя врага и восстанавливая своё здоровье. Мастера этого дела могут одновременно выкачивать кровь из группы противников, регенерируя с невероятной скоростью.
<div class="icons2">
<div class="row"><img src="http://i.imgur.com/fvOLvvD.png" width="64" height="64" alt="Spell_deathknight_bloodboil.png" /><div class="ability">Кровосос</div><div class="txt">Достаточно опытные кровопийцы могут высасывать кровь дистанционно, сильно ослабляя врага и восстанавливая своё здоровье. Мастера этого дела могут одновременно выкачивать кровь из группы противников, регенерируя с невероятной скоростью.</div></div>
<div class="row"><img src="http://i.imgur.com/fvOLvvD.png" width="64" height="64" alt="Spell_deathknight_bloodboil.png" /><div class="ability">Кровосос</div><div class="txt">Достаточно опытные кровопийцы могут высасывать кровь дистанционно, сильно ослабляя врага и восстанавливая своё здоровье. Мастера этого дела могут одновременно выкачивать кровь из группы противников, регенерируя с невероятной скоростью.</div></div>
<div class="row"><img src="http://i.imgur.com/fvOLvvD.png" width="64" height="64" alt="Spell_deathknight_bloodboil.png" /><div class="ability">Кровосос</div><div class="txt">Достаточно опытные кровопийцы могут высасывать кровь дистанционно, сильно ослабляя врага и восстанавливая своё здоровье. Мастера этого дела могут одновременно выкачивать кровь из группы противников, регенерируя с невероятной скоростью.</div></div>
<div class="row"><img src="http://i.imgur.com/fvOLvvD.png" width="64" height="64" alt="Spell_deathknight_bloodboil.png" /><div class="ability">Кровосос</div><div class="txt">Достаточно опытные кровопийцы могут высасывать кровь дистанционно, сильно ослабляя врага и восстанавливая своё здоровье. Мастера этого дела могут одновременно выкачивать кровь из группы противников, регенерируя с невероятной скоростью.</div></div>
</div>

Табличная версия (не рекомендуется к использованию)

Молния
Поражает противника молнией, наносящей 13 - 15 ед. урона от сил природы.
Земной шок
Мгновенно поражает цель ударной волной, наносящей 17 - 19 ед. урона от сил природы и снижающей скорость атаки ближнего боя на 10% на 8 сек.
Опаляющий тотем
Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня.
Развеивание магии
Снимает с врага 1 благотворный магический эффект.

Код для такой таблицы:

<table>
<tr><td><img src="http://i.imgur.com/fvOLvvD.png" /></td><td><b>Молния</b><br> Поражает противника молнией, наносящей 13 - 15 ед. урона от сил природы.</td></tr>
<tr><td><img src="http://i.imgur.com/fvOLvvD.png" /></td><td><b>Земной шок</b><br>Мгновенно поражает цель ударной волной, наносящей 17 - 19 ед. урона от сил природы и снижающей скорость атаки ближнего боя на 10% на 8 сек.</td></tr>
<tr><td><img src="http://i.imgur.com/fvOLvvD.png" /></td><td><b>Опаляющий тотем</b><br>Создает рядом с заклинателем опаляющий тотем прочностью 5 ед., который периодически атакует противника в радиусе 20 м, нанося 9 - 11 ед. урона от огня. </td></tr>
<tr><td><img src="http://i.imgur.com/fvOLvvD.png" /></td><td><b>Развеивание магии</b><br>Снимает с врага 1 благотворный магический эффект.</td></tr>
</table>

ID: 817 | admin
Изменено: 7 мая 2016 — 16:00

Комментарии (22)

Воздержитесь от публикации бессмысленных комментариев и ведения разговоров не по теме. Не забывайте, что вы находитесь на ролевом проекте, где больше всего ценятся литературность и грамотность.
19 июня 2011 — 23:34 admin

Коды обновлены. Тем, у кого столбики таблиц получают странные отступы в разных полях, следует заменить коды на первый вариант, приведенный выше.

5 июля 2011 — 14:10 Тот самый Nodos
Всевозможные иконки WC3 и WoW выложены напрямую или ссылками в этой теме.

Написано "Запрашиваемая страница не найдена".

5 июля 2011 — 14:18 admin

Спасибо, недавним обновлением адресов смыло.
Изменил текст на правильный.

4 сентября 2011 — 18:20 Rikken

Если знаешь какие иконки нужны - всё можно взять на вовхеде.

10 декабря 2011 — 17:32 Экзарх Фиасаар

Я так понял для для кода на две способности на строчку размер иконки строго фиксирован? Ибо пытался поставить 100х150 (и меньше), а та всегда приводилась к 64х64. Или мои руки кривые?

10 декабря 2011 — 17:56 admin

Фиксирован.

10 декабря 2011 — 17:58 Экзарх Фиасаар

Жаль, хотел покомпактней все разместить, но придется иначе.

7 ноября 2012 — 21:39 Брэндан

Доброй ночи, а не подскажете, как сделать две способности на строку, только без картинки?
Если убрать код картинки, то будет большой отступ слева, а это не очень удобно, да, заранее спасибо.

7 ноября 2012 — 21:51 admin
7 ноября 2012 — 22:03 Брэндан

Простите, мне очень неловко, но у меня врожденных технический кретинизм, и эти... штуки... вызывают у меня продолжительные, сложноподчиненные маты и хватания за рыжую голову.
Если вас не затруднит, вы не могли бы... разжевать это, дать код, готовый, право, я ничего там не понимаю.

7 ноября 2012 — 22:08 admin

<table>
<tr>
<td>Первый столбик</td>
<td>Второй столбик</td>
</tr>
<tr>
<td>Первый столбик</td>
<td>Второй столбик</td>
</tr>
</table>

8 ноября 2012 — 10:01 Брэндан

Огромное, человеческое спасибо.

9 июля 2015 — 2:52 Mikeskyworker

То самое чувство, когда и это не понятно... Куда вставлять иконку, куда название, а куда описание? Люди добрые, помогите.

27 марта 2013 — 5:00 senbka

А где можно посмотреть именно порядковый номер картинки?

27 марта 2013 — 5:02 senbka

Все, спасибо, разобралась=)

18 апреля 2014 — 12:44 Syberia

Спасибо за эту темку, даже не знаю, чтобы я и делала без неё :( сперва не могла найти кнопку, куда заливать картинки, но нашла, так что сообщение изменила, не сочтите за оффтоп или флуд.

12 декабря 2015 — 17:56 Skolskii_slaanesh

Файлы с изображениями пропали, каталог пуст.

12 декабря 2015 — 18:12 admin

Да, каталог был уничтожен ещё полгода назад. Однако, коды разметки по-прежнему можно использовать, загружая иконки на любой сторонний хостинг.

21 декабря 2015 — 16:37 project.ravenguard

Кто-нибудь подскажет где можно добыть иконки? Может кто-то добрый даже архивом поделится?

7 мая 2016 — 14:44 Верховный друид Адам Кадмон

Подскажите пож-та как сделать отступ между текстом левой части и портретом с полным именем персонажа в Ultimatum.

7 мая 2016 — 15:57 admin
.charsheet div.mainimage {
margin-bottom:50px /* изменяйте циферку */;
}

Для вопросов по Ultimatum есть отдельная страница (тоже закрепленная).