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

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

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

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

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

Совместимость — IE8 и все приличные браузеры.
  • Вопрос задан
  • 3604 просмотра
Решения вопроса 1
@Kuzzy
jsfiddle.net/vwXS3 - вот как-то так. Вместо background-color можете задать картинки из вашего спрайта, суть в анимировании не бэкграунд позишн, а прозрачности.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
talgautb
@talgautb
front-end developer
вот так расположите картинки в спрайте:
image - image - image
hover - hover - hover
active - active - active
в css изменяйте background-position и ок
Ответ написан
HeadOnFire
@HeadOnFire
PHP, Laravel & WordPress Evangelist
Иконки шрифтом - это позволит анимировать их как угодно без лишних состояний. Минус спрайтов - излишние данные + неудобство поддержки. Если вдруг вам нужно поменять цвета для наведения - нужно редактировать сам спрайт. Со шрифтами этой проблемы нет. Плюс шрифт - это вектор.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы