title: Flexible way to render bubbles-like thumbnails with a shadow in html
body: <p>Goal: speech-bubble-like thumbnails with a shadow, like this one:</p>
  
  <p><a href="http://k.minus.com/jbkSDvCUDvhYcj.jpg" rel="nofollow noreferrer">http://min.us/moStWhsGd http://k.minus.com/jbkSDvCUDvhYcj.jpg</a></p>
  
  <p>Size and shadow are subject to change.</p>
  
  <p>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.</p>
  
  <p>Also thought about rendering the "tail" with rotated div, but matching background in it would be a pita.</p>
  
  <p>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.</p>
  
  <p><strong>UPDATE:</strong> Well, that's what I came up with svg after some hours of navigating through the docs and browser inconcistencies:</p>
  
  <ol>
  <li>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 <code>&lt;svg&gt;</code>.</li>
  <li><p>I found two ways of embedding image into an svg: 1) fiter with <code>feImage</code> element 2) <code>foreignObject</code> with <code>img</code> or <code>div</code> with background.</p>
  
  <p>First method can look e.g. like this</p>
  
  <p><code>&lt;svg filter="url(#dropshadow)"&gt;
     &lt;rect x="0" y="0" width="120" height="120" filter="url(#imageFilter)" clip-path="url(#clipPath)"/&gt;
  &lt;/svg&gt;</code></p>
  
  <p>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. </p>
  
  <p>The need to create a separate filter for each image makes it interesting only from the research point of view.</p>
  
  <p>Second method can look like this</p>
  
  <p><code>&lt;svg filter="url(#dropshadow)"&gt;
  &lt;foreignObject width="140" height="140" clip-path="url(#clipPath)"&gt;
          &lt;img src="img/ourImage.png" height="140" /&gt;
  &lt;/foreignObject&gt;
  &lt;/svg&gt;</code></p>
  
  <p>It works flawlessly in FF, but neither Chrome nor Opera can apply clipping path to <code>foreignObject</code> (didn't try ie9).</p></li>
  <li><p>Only FF seems to support multiple elements within <code>clippingPath</code>: 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 <code>path</code> in InkScape, while in FF I managed to create the "bubble" with two rectangles, one big and one small and rotated.</p></li>
  </ol>
  
  <p>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…</p>
  
  <p>Here are the jsFiddle examples: <a href="http://jsfiddle.net/B7593/11/" rel="nofollow noreferrer">http://jsfiddle.net/B7593/11/</a> demonstrates both variants with clipping path combined of 2 rectangles so works only in FF, <a href="http://jsfiddle.net/B7593/10/" rel="nofollow noreferrer">http://jsfiddle.net/B7593/10/</a> uses path element generated with InkScape and partially works in Chrome.</p>
  
  <p><strong>UPDATE2:</strong> Well, shame on me, there is a third and the most appropriate way of embedding images into svg: the <a href="http://www.w3.org/TR/SVG/struct.html#ImageElement" rel="nofollow noreferrer">image element</a>.</p>