Как верстать иконку с подписью?

Question

[StopDesign]

Казалось бы, банальная задача: сделать на сайте иконку с подписью. Но при подробном рассмотрении оказывается, что существующие решения всегда чем-то не устраивают, а своё красивое решение придумать не могу.

Главный вопрос в картинке, конечно:
— нужна поддержка экранов высокой плотности (ok, это можно на уровне css);
— хочется использовать CSS-спрайты, т.к. кнопок может быть много;
— для некоторых кнопок нужна анимация при наведении (есть отдельная картинка для hover и active, нужен плавный переход через прозрачность) — и тут проблема со спрайтами (как сделать анимацию, если все состояния в одном спрайте лежат?).

И с версткой не все понятно. Есть, например, такая конструкция с двумя иконками и каким-то посторонним блоком:


Текст может быть разной длины (нужно ограничить ширину, но строк может быть и пять). Выравнивание по линии, как на картинке. Разумеется, иконка должна подсвечиваться при наведении на текст (и наоборот). И не должна подсвечиваться при наведении на какую-то другую область.

Совместимость — IE8 и все приличные браузеры.

Answer 1

[Kuzzy]

jsfiddle.net/vwXS3 - вот как-то так. Вместо background-color можете задать картинки из вашего спрайта, суть в анимировании не бэкграунд позишн, а прозрачности.

Comments

[StopDesign]

Да, это красиво. Спасибо.

Пока нашел только один недостаток: в ситуации, когда текст заметно шире иконки, по бокам у картинки будут довольно большие пустые, но кликабельные области.

Answer 2

[Талга УтБ]

вот так расположите картинки в спрайте:
image - image - image
hover - hover - hover
active - active - active
в css изменяйте background-position и ок

Comments

[StopDesign]

Не подходит: background-position меняется мгновенно, а нужен плавный переход между картинками через crossfade.

Answer 3

[Игорь Воротнёв]

Иконки шрифтом - это позволит анимировать их как угодно без лишних состояний. Минус спрайтов - излишние данные + неудобство поддержки. Если вдруг вам нужно поменять цвета для наведения - нужно редактировать сам спрайт. Со шрифтами этой проблемы нет. Плюс шрифт - это вектор.

Выравнивание - display: table для родителя, display: table-cell для элементов. Само выравнивание, соответственно - vertical-align: top/middle/bottom/baseline. Свежая версия Normalize.css, кстати, уже перешла на display: table.

Comments

[StopDesign]

Ну, спрайт отредактировать — не проблема. А вот если в шрифте поменять нужно будет не только цвет... Думаю, отдел поддержки спасибо не скажет за такое.

Кроме того, мне нужны градиенты и прозрачности в иконках.

[Игорь Воротнёв]

Если нужны графические спецэффекты, тогда да. Как вариант - SVG, в том числе спрайты. С SVG вообще responsive иконки круто делать, когда они при изменении размера не только уменьшаются-увеличиваются, но и меняют свое начертание, например детализацию, в зависимости от масштаба. И весит все это добро мало - вектор.