Flexible way to render bubbles-like thumbnails with a shadow in html

Goal: speech-bubble-like thumbnails with a shadow, like this one:

http://min.us/moStWhsGd http://k.minus.com/jbkSDvCUDvhYcj.jpg

Size and shadow are subject to change.

My first idea was of course png overlays, but it lacks flexibility and is also not fun. However, it is always possible as a fallback for old ie-s.

Also thought about rendering the "tail" with rotated div, but matching background in it would be a pita.

What'd be the better way? Canvas or maybe an svg mask? Have little to no exp. with these technologies, so a few tips to start will be very appreciated.

UPDATE: Well, that's what I came up with svg after some hours of navigating through the docs and browser inconcistencies:

1. It seems impossible to apply both clipping path and svg filter for shadow to an html element via css, so we have to render the whole story inside an <svg>.

2. I found two ways of embedding image into an svg: 1) fiter with feImage element 2) foreignObject with img or div with background.

   First method can look e.g. like this

   <svg filter="url(#dropshadow)"> <rect x="0" y="0" width="120" height="120" filter="url(#imageFilter)" clip-path="url(#clipPath)"/> </svg>

   That will work both in FF and Chrome (I failed to make it work in Opera and didn't try ie9). However with this method image in FF appears to be blurred, at least if resized, and in Chrome it looks lighter (sic!) than the original.

   The need to create a separate filter for each image makes it interesting only from the research point of view.

   Second method can look like this

   <svg filter="url(#dropshadow)"> <foreignObject width="140" height="140" clip-path="url(#clipPath)"> <img src="img/ourImage.png" height="140" /> </foreignObject> </svg>

   It works flawlessly in FF, but neither Chrome nor Opera can apply clipping path to foreignObject (didn't try ie9).

3. Only FF seems to support multiple elements within clippingPath: if you add more than one rectangle there Chrome and Opera output something weird. So in order to use the first method in Chrome I had to create a path in InkScape, while in FF I managed to create the "bubble" with two rectangles, one big and one small and rotated.

So, the second method appears pretty nice, it is rather flexible and easy to use. If only other browsers than FF would support clipping paths better…

Here are the jsFiddle examples: http://jsfiddle.net/B7593/11/ demonstrates both variants with clipping path combined of 2 rectangles so works only in FF, http://jsfiddle.net/B7593/10/ uses path element generated with InkScape and partially works in Chrome.

UPDATE2: Well, shame on me, there is a third and the most appropriate way of embedding images into svg: the image element.

If you want to do it as an svg, here's how I'd do that:

• use a raster image for the avatar
• use a clip-path that defines the bubble shape using a path element
• apply the clip-path to the image element
• apply an svg filter to the image element to get the drop shadow

Then reuse the basic setup and just replace the avatar url. It should be fairly straightforward to make a quick prototype using Inkscape or Illustrator.

Update: Here's an example of what I meant.

Do a google search for svg to html converter 0.7 Use the lookup on the converter engine to open the clipart library and do a search on that site on bubble. Find a generic one and alter it in Inkscape Convert it to JavaScript There are more than 3 options. You now have your speech bubble in pure Raphael. You can use the bubble and associated shadow anywhere controlling it size dynamically using Raphael scale( x , y )