Несколько раз по работе сталкивался с необходимостью верстать баллуны (облачка, филактеры). Если кто не в курсе, это такие штуки, с помощью которых в комиксах озвучивают реплики персонажей. В интерфейсах же сайтов их обычно используют для всяческих всплывающих подсказок к элементам.
Верстая очередной баллун довольно тривиального внешнего вида (прямоугольный блок с треугольничком вправо), я задумался, а нельзя ли как-нибудь сварганить это дело без помощи графики? В принципе, нарисовать CSS-ом стрелочку с помощью свойства border* не составляет особого труда.
Суть в том, что у блока с нулевой высотой и шириной задается рамка слоновьих размеров, затем с той стороны, куда указывает стрелка ширина рамки обнуляется, двум боковым рамкам задается прозрачный цвет (для ИЕ используется фильтр) и остается одна видимая рамка, которая и изображает собой стрелочку. Способ работает железобетонно везде.
Но что если захочется стрелочке захочется назначить тенюшку? Или всему баллуну сделать рамку в один-два пикселя?
На ум приходит следующее решение.
css
.b-ungle {
position: absolute;
width: 20px;
height: 20px;
overflow: hidden;
}
.b-ungle__rotate {
position: absolute;
width: 20px;
height: 20px;
-webkit-transform: rotate(45deg);
-khtml-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
html
<div class="b-ungle">
<div class="b-ungle__rotate"></div>
</div>
В переводе на человеческий язык: берется один блок, ему задается ширина-высота. В него вкладывается другой блок, абсолютно спозиционированный. Который затем поворачивается на 45 градусов css-свойством transform (а также его производными для Мозиллы и Вебкита). Дальше остается внутренний блок подвигать с помощью css-свойств top, right, bottom, left, и дело в шляпе. Вложенному блоку можно подрисовывать хоть рамочку, хоть тенюшку, хоть слово неприличное. А все лишнее обрежется с помощью overflow: hidden; у внешнего блока.
А как же ИЕ? А для ИЕ существует куча фреймворков, с помощью которых можно эмулировать многие возможности CSS 3, в том числе и свойство transform. Должен, правда, заметить, что ИЕ своими фильтрами поворачивает блок несколько иначе, чем те браузеры, которые используют свойство transform, поэтому под ИЕ, возможно, придется подвигать внутренний блок немного по-другому, нежели для прочих браузеров. Впрочем, обычное дело.
Вроде и неплохо получилось, однако шило в пятой точке дурной голове покою не дает. Возникла идея сделать баллун с нормальным вытянутым указателем. А то квадратик повернуть по часовой стрелке — дело нехитрое.
Сказано — сделано. Не буду грузить подробностями, которые все любопытствующие легко выудят из кода, скажу лишь, что из-за ИЕ пришлось изрядно повозиться и усложнять простую изначально структуру блоков. В остальном суть та же. Один блок поворачивается, другой отсекает все лишнее.
Достоинства способа
— не нужно возиться с пнг (стрелочка прекрасно ложится на любой фон),
— длина диагональной линии легко рассчитывается по формуле квадрат гипотенузы равен сумме квадратов катетов,
— можно еще немного
— в большинстве современных браузеров все отобразится правильно.
Недостатки способа
— используется .htc-файл, а это значит, что если в ИЕ выключен яваскрипт, уголка не будет,
— в Операх девятой версии уголка тоже может не быть,
— из-за ИЕ и его чудачеств с фильтрами, html-кода получается многовато,
— дизайнер запросто нарисует баллун, который таким способом не сверстаешь,
— в ИЕ не видно закругленных уголков (но это поправимо при желании).
Не знаю, будет ли кто-то всерьез использовать этот способ. Даже я им озадачился в основном с целью размять мозги. Но может статься сама идея кому-нибудь да сгодится для каких-либо коварных целей. Также вполне допускаю, что в Интернете не я первый додумался до всего вышесказанного, посему на новаторство изначально не претендую.
Альтернативные способы из комментариев:
— fatal nicolasgallagher.com/pure-css-speech-bubbles/demo,
— jkeks www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-plugin,
— SamDark rmcreative.ru.
Примеры использования баллунов:
— z-store.ru (в верхней менюшке),
— cnews.ru (в списке новостей справа),
— games.rambler.ru (при наведении на блок игры),
— news.yandex.ru (блок цитаты),
— бизнес-линч студии Артемия Лебедева,
— facebook.com («визитки» пользователя).
P. S:
Бонус-треки для асиливших мое многабуквиё:
— Darth Wader vs. Luk Skywalker,
— Steeve Jobs vs. Bill Gates.
