Цель: миниатюры, похожие на речевые пузыри, с тенью, как эта:
http://min.us/moStWhsGd http://k.minus.com/jbkSDvCUDvhYcj.jpg
Размер и тень могут быть изменены.
Моей первой идеей, конечно же, было наложение png, но ему не хватает гибкости и тоже не весело. Тем не менее, это всегда возможно как запасной вариант для старых ie-s.
Также подумал о рендеринге "tail" с повернутым div, но соответствующий фон в нем был бы пита.
Что может быть лучше? Холст или маска SVG? Есть мало, чтобы не эксп. с этими технологиями, поэтому несколько советов для начала будут очень благодарны.
ОБНОВЛЕНИЕ: Ну, вот что я придумал для svg после нескольких часов навигации по документам и несоответствиям браузера:
- Кажется невозможным применить как обтравочный контур, так и svg-фильтр для тени к html-элементу через css, поэтому мы должны отрисовать всю историю внутри
<svg>.
Я нашел два способа встраивания изображения в SVG: 1) Подгонщик с feImage элементом 2) foreignObject с img или div с фоном.
Первый способ может выглядеть, например, как это
<svg filter="url(#dropshadow)">
<rect x="0" y="0" width="120" height="120" filter="url(#imageFilter)" clip-path="url(#clipPath)"/>
</svg>
Это будет работать как в FF, так и в Chrome (я не смог заставить его работать в Opera и не пробовал ie9). Однако при использовании этого метода изображение в FF выглядит размытым, по крайней мере, при изменении размера, а в Chrome оно выглядит светлее (так!), Чем оригинал.
Необходимость создания отдельного фильтра для каждого изображения делает его интересным только с исследовательской точки зрения.
Второй метод может выглядеть следующим образом
<svg filter="url(#dropshadow)">
<foreignObject width="140" height="140" clip-path="url(#clipPath)">
<img src="img/ourImage.png" height="140" />
</foreignObject>
</svg>
Он работает безупречно в FF, но ни Chrome, ни Opera не могут применить обтравочный контур к foreignObject (не пробовал ie9).
Кажется, только FF поддерживает несколько элементов в clippingPath: если вы добавите туда более одного прямоугольника, Chrome и Opera выведут что-то странное. Поэтому, чтобы использовать первый метод в Chrome, мне пришлось создать path в InkScape, в то время как в FF мне удалось создать «пузырь» с двумя прямоугольниками, одним большим и одним маленьким и повернутым.
Итак, второй метод выглядит довольно неплохо, он довольно гибкий и простой в использовании. Если бы только другие браузеры, кроме FF, лучше поддерживали обтравочные контуры ...
Вот примеры jsFiddle: http://jsfiddle.net/B7593/11/ демонстрирует оба варианта с обтравочным контуром, объединенным из 2 прямоугольников, поэтому работает только в FF, http://jsfiddle.net/B7593/10/ использует элемент пути, созданный с помощью InkScape, и частично работает в Chrome.
UPDATE2: Что ж, позор, есть третий и самый подходящий способ встраивания изображений в svg: элемент изображения .