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

[MyraJKee]

Честно говоря для меня статья скорее носит академический характер. Достали уже создатели браузеров плодить собственные стандарты. Довольно забавно когда:

-webkit-transform: rotate(50deg);
-khtml-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
transform: rotate(50deg);

И еще блин для IE отдельно извращаться… )
А вообще спасибо, ознакомился, плюсанул :)

[silkleo]

Кстати, спасибо. А я и не заметил, что у меня не 45 градусов стоит, а 50.

[lahmatiy]

Это не собственные стандарты, а собственные реализации. Спецификация CSS3 3D Transfomations находится в состоянии черновика (Editors draft) и может быть изменена. Вот браузеры и внедряют свое временное решение, как предписывает та же спецификация CSS: нестандартные свойства внедряются с префиксом вендора. Чтобы этот модуль стал стандартом должно появится как минимум 3 промышленные реализации. Как видим их уже 5 (mozilla, webkit, konquer, opera, ie), а значит есть надежда что модуль примут быстрее и префиксы больше не потребуются (кроме как для поддержки старых версий).

[CrashMax]

А чего тянут то с принятием спецификации? Есть какие то проблемы? Просветите пожалуйста

[kolpeex]

Семь раз отмерь — один раз отрежь.

[silkleo]

Отличная статья, спасибо! =)

[jkeks]

Использовал BeautyTips в последнее время. Этот вариант мне больше нравится.

[silkleo]

Спасибо за наводку, погляжу-пощупаю.

[lahmatiy]

список должен выглядеть так:

-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 :)

[silkleo]

Что-то я читаю про ИЕ9 и он мне все больше начинает нравиться. Не сглазить бы %)

[EvgeniyLazarev]

Выглядит немного топорно :)
Графические элементы всё же как-то поприятнее глазу.

Тем не менее, автор заслуживает респекта и уважухи!

[silkleo]

Немного топорно — это да. Есть такое. Все-таки графикой (пока?) можно намного интересней сделать. Вот, например, на Я.Новостях хвостик у баллуна загнутый. CSS-ом не очень представляю как такой сделать даже для «правильных» браузеров.

[lahmatiy]

а как насчет svg as background? ;)

[TheShock]

Прикольно:

[lahmatiy]

Это нормально ;)
Сейчас последние версии основных браузеров (или их беты) уже поддерживают svg в качестве фона, а для тех кто не поддерживает можно сделать fallback без загнутых уголков. Все как обычно. Только теперь «красоту» можно будет сделать для большего числа браузеров (с большой совокупной долей рынка)… и даже для IE :)

[TheShock]

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

[altryne]

можеш показать пример? у меня работает несколько элементов с уголками, на несколких парентов с background.
еще, можно попробовать дать behavior(PIE.htc) для родителя просто так, может помочь.

[Rooc]

сталкивался не раз, спасибо за совет

[vitalikk]

Спасибо за стрелку =)

[toptalo]

Если кто не в курсе, это такие штуки, с помощью которых в комиксах озвучивают реплики персонажей. — Это называется филактер

[silkleo]

Вы правы.

Однако мне ни разу еще не попадался человек, который бы в повседневной речи использовал этот термин. Обычно все-таки говорят «баллун» или еще чаще «облачко».

[silkleo]

Переименовывать в статье не стал, но добавил в начале статьи упоминание альтернативных названий, в том числе филактеров.

[vadimus]

А вообще, говоря, облачка настолько распространены, что пора бы уж вообще ввести отдельный тег и стили к ним. Может в HTML6 появится.

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

Конечно, лучше все эти аттрибуты вынести из тега html и передать в css. А другие атрибуты: ширина, высота, толщина бордера, скругление углов, позиционирование уже и так есть.

[silkleo]

И — главное — облачка в виде облачков! %)

[SamDark]

Есть очень древний способ на чистом CSS, работающий без Javascript. Извращённый, конечно, чуток. Вживую можно посмотреть у меня в блоге (в конце каждого поста индикатор количества комментов).

[silkleo]

Хороший способ, я кстати подумывал и о такой реализации, но она к сожалению не решает проблемы с тенью (если css-тень захочется сделать у диагональной линии).

[bolk]

Я бы сделал SVG+VML :)

[silkleo]

Спокойствие, только спокойствие. И до SVG мои любопытные лапки еще доберутся.

[easterism]

Вот жесть. Русский язык скоро вымрет? Уже не справляемся с определением «такие штуки, с помощью которых в комиксах озвучивают реплики персонажей»

[silkleo]

Русский язык если и вымрет, то не скоро. Ваш вариант?

[easterism]

Филактер

[silkleo]

Чуть выше в комментариях я вкратце объяснил, почему не использовал это слово.

[easterism]

Да нашел… Чтож, зафрендим балуны со словарным запасом, чтоб не выглядеть невеждой, если вдруг случайно окажусь на митинге современных верстальщиков.
Заодно прошу прощения за оффтоп.

[fatal]

Верстальщики уже ходят на митинги? Не знал. Зовите!

[silkleo]

Добавил в начале статьи упоминание альтернативных названий, в том числе филактеров. Переименовывать в статье не стал.

[fatal]

Можно ещё вот так:
nicolasgallagher.com/pure-css-speech-bubbles/demo/

[silkleo]

Поглядел, интересно, спасибо =)