Xiper

На одну картинку меньше. Спецсимвол ×

Автор: Татьяна Шкабко, Александр Головко и Егор Скорняков Дата публикации:

На многих сайтах есть разнообразные всплывающие окошки. Как правило, они имеют кнопочку «закрыть» — традиционно это крестик. Обычно этот крестик вырезается из макета картинкой, но такой метод имеет определенные минусы:

  • Дополнительная картинка — лишнее обращение к серверу.
  • Картинка начнет грузиться только в момент открытия окошка, т.е. для пользователя сразу ее не будет, а потом вдруг появиться — не очень красивый эффект. Правда для его устрания можно использовать предварительную загрузку изображений или подклеить картинки для всплывающего окна к картинкам, загружаемым сразу, с помощью спрайтов. В общем дополнительная морока.
  • Если окно имеет неравномерный фон, тогда значок закрытия нужно делать полупрозрачным, т.е. использовать формат png24, что приводит к дополнительным проблемам с IE6.

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

для значка закрытия окна используется спецсимвол для значка закрытия окна используется спецсимвол
Символ × (font-family:Georgia, font-size:20px; font-weight:normal; color:#CE7BE5;) Символ × (font-family:'Arial Black', font-size:14px; font-weight:bold; color:#000;)

Для облегчения подбора мы создали специальную табличку.

Тут приведены варианты спецсимвола × для разных начертаний безопасных шрифтов:

font-family normal bold normal
italic		 bold
italic
Arial × × × ×
Arial Black × × × ×
Comic Sans MS × × × ×
Courier New × × × ×
Georgia × × × ×
Impact × × × ×
Times New Roman × × × ×
Trebuchet MS × × × ×
Verdana × × × ×

Плюсы метода:

  • Пользователь может закрыть всплывающее окно сразу и не должен ждать загрузки картинки;
  • Уменьшается количество картинок — меньше запросов на сервер, быстрее загрузка;
  • Не нужно возиться с прозрачностью для IE6.

Минусы:

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

Заметка

Для того, чтобы указатель мыши имел привычный вид, не забудь прописать cursor: pointer; для крестика.

Вывод

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

По теме