Older posts...
Older posts...
28 Sep
How I'm going to land my dream job
28 Sep 2014
How I'm going to land my dream job
1 Oct
Neural net training fail
1 Oct 2014
Neural net training fail
13 Oct
Pow + SSL without the hassle
13 Oct 2014
Pow + SSL without the hassle
17 Oct
Using machine learning to rank search results (part 1)
17 Oct 2014
Using machine learning to rank search results (part 1)
23 Oct
Using machine learning to rank search results (part 2)
23 Oct 2014
Using machine learning to rank search results (part 2)
9 Nov
Managing complexity in Go
9 Nov 2014
Managing complexity in Go
25 Nov
Remote work: an engineering leader's perspective
25 Nov 2014
Remote work: an engineering leader's perspective
19 Sep
Running A/B tests on our hosting infrastructure
19 Sep 2016
Running A/B tests on our hosting infrastructure
19 Jan
Optimising Redis storage, part two
19 Jan 2017
Optimising Redis storage, part two
27 Mar
Every service is an island
27 Mar 2017
Every service is an island

Pure CSS speech bubbles - configurable, with shadows

Without any trickyness or workaround involved, it is possible to render speech bubbles with perfect shadows entirely with CSS, using no images whatsoever.

Even better, it degrades gracefully in Internet Explorer 7 and 8!

This is how it looks like in modern browsers (Chrome, Opera, and Firefox):

Rendered in Chrome

In IE8, you lose the shadows and the bubble tips become all robot-y (because IE doesn’t support CSS3’s transform property at all):

Rendered in IE8

Finally in IE7 you lose the tips altogether:

Rendered in IE7

If this graceful degradation is acceptable to you, i.e. whoever wrote your brief understands IE is already going the way of the dodo, here’s the SCSS I built.

It comes with variables o easily adjust it to your use case.

You can play with it in this JSFiddle. Enjoy!