Css-баллун без графики



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

    Верстая очередной баллун довольно тривиального внешнего вида (прямоугольный блок с треугольничком вправо), я задумался, а нельзя ли как-нибудь сварганить это дело без помощи графики? В принципе, нарисовать 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.

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 41

      +4
      Честно говоря для меня статья скорее носит академический характер. Достали уже создатели браузеров плодить собственные стандарты. Довольно забавно когда:
      -webkit-transform: rotate(50deg);
      -khtml-transform: rotate(50deg);
      -moz-transform: rotate(50deg);
      -o-transform: rotate(50deg);
      transform: rotate(50deg);

      И еще блин для IE отдельно извращаться… )
      А вообще спасибо, ознакомился, плюсанул :)
        +1
        Кстати, спасибо. А я и не заметил, что у меня не 45 градусов стоит, а 50.
          +4
          Это не собственные стандарты, а собственные реализации. Спецификация CSS3 3D Transfomations находится в состоянии черновика (Editors draft) и может быть изменена. Вот браузеры и внедряют свое временное решение, как предписывает та же спецификация CSS: нестандартные свойства внедряются с префиксом вендора. Чтобы этот модуль стал стандартом должно появится как минимум 3 промышленные реализации. Как видим их уже 5 (mozilla, webkit, konquer, opera, ie), а значит есть надежда что модуль примут быстрее и префиксы больше не потребуются (кроме как для поддержки старых версий).
            +1
            А чего тянут то с принятием спецификации? Есть какие то проблемы? Просветите пожалуйста
              +1
              Семь раз отмерь — один раз отрежь.
          • UFO just landed and posted this here
              0
              Отличная статья, спасибо! =)
            +1
            Использовал BeautyTips в последнее время. Этот вариант мне больше нравится.
              0
              Спасибо за наводку, погляжу-пощупаю.
            • UFO just landed and posted this here
                +2
                список должен выглядеть так:
                -webkit-transform: rotate(45deg);
                -khtml-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);

                Да, да — в IE9 теперь есть поддержка CSS3 2d Transformations :)
                  0
                  Что-то я читаю про ИЕ9 и он мне все больше начинает нравиться. Не сглазить бы %)
                  +1
                  Выглядит немного топорно :)
                  Графические элементы всё же как-то поприятнее глазу.

                  Тем не менее, автор заслуживает респекта и уважухи!
                    0
                    Немного топорно — это да. Есть такое. Все-таки графикой (пока?) можно намного интересней сделать. Вот, например, на Я.Новостях хвостик у баллуна загнутый. CSS-ом не очень представляю как такой сделать даже для «правильных» браузеров.
                      +2
                      а как насчет svg as background? ;)
                        0
                        Прикольно:
                          0
                          Это нормально ;)
                          Сейчас последние версии основных браузеров (или их беты) уже поддерживают svg в качестве фона, а для тех кто не поддерживает можно сделать fallback без загнутых уголков. Все как обычно. Только теперь «красоту» можно будет сделать для большего числа браузеров (с большой совокупной долей рынка)… и даже для IE :)
                            0
                            вообще, вы правы. свг подходит сюда как нельзя лучше. или, может, канвас.
                  • UFO just landed and posted this here
                      0
                      можеш показать пример? у меня работает несколько элементов с уголками, на несколких парентов с background.
                      еще, можно попробовать дать behavior(PIE.htc) для родителя просто так, может помочь.
                      • UFO just landed and posted this here
                        0
                        сталкивался не раз, спасибо за совет
                        +2
                        Спасибо за стрелку =)
                          +2
                          Если кто не в курсе, это такие штуки, с помощью которых в комиксах озвучивают реплики персонажей. — Это называется филактер
                            +1
                            Вы правы.

                            Однако мне ни разу еще не попадался человек, который бы в повседневной речи использовал этот термин. Обычно все-таки говорят «баллун» или еще чаще «облачко».
                              0
                              Переименовывать в статье не стал, но добавил в начале статьи упоминание альтернативных названий, в том числе филактеров.
                              +2
                              А вообще, говоря, облачка настолько распространены, что пора бы уж вообще ввести отдельный тег и стили к ним. Может в HTML6 появится.

                              Дать следующие атрибуты:
                              − прямоугольный / овальный,
                              − линия бордера прямая / мягкая (форма облачков) / резкая (для криков, изломанная)
                              − уголок: длина от центра, угол направления от центра, угол хвостика.

                              Конечно, лучше все эти аттрибуты вынести из тега html и передать в css. А другие атрибуты: ширина, высота, толщина бордера, скругление углов, позиционирование уже и так есть.
                                +1
                                И — главное — облачка в виде облачков! %)
                                +1
                                Есть очень древний способ на чистом CSS, работающий без Javascript. Извращённый, конечно, чуток. Вживую можно посмотреть у меня в блоге (в конце каждого поста индикатор количества комментов).
                                  0
                                  Хороший способ, я кстати подумывал и о такой реализации, но она к сожалению не решает проблемы с тенью (если css-тень захочется сделать у диагональной линии).
                                  +2
                                  Я бы сделал SVG+VML :)
                                    0
                                    Спокойствие, только спокойствие. И до SVG мои любопытные лапки еще доберутся.
                                    +1
                                    Вот жесть. Русский язык скоро вымрет? Уже не справляемся с определением «такие штуки, с помощью которых в комиксах озвучивают реплики персонажей»
                                      0
                                      Русский язык если и вымрет, то не скоро. Ваш вариант?
                                        0
                                        Филактер
                                          0
                                          Чуть выше в комментариях я вкратце объяснил, почему не использовал это слово.
                                            0
                                            Да нашел… Чтож, зафрендим балуны со словарным запасом, чтоб не выглядеть невеждой, если вдруг случайно окажусь на митинге современных верстальщиков.
                                            Заодно прошу прощения за оффтоп.
                                              0
                                              Верстальщики уже ходят на митинги? Не знал. Зовите!
                                                0
                                                Добавил в начале статьи упоминание альтернативных названий, в том числе филактеров. Переименовывать в статье не стал.
                                        +1
                                          0
                                          Поглядел, интересно, спасибо =)

                                        Only users with full accounts can post comments. Log in, please.