If you haven’t seen Facebook’s “chat head” interface, here is the quick lowdown. There are little circular icons that will float on the side of your mobile device’s screen to tell you that a message has arrived from a friend. It’s part of the Facebook Home thing, but even if you are on iOS, the Facebook App uses them. I think this will be one of those UI things you either love or hate.
However, from an HTML angle, I thought they were interesting. Could you do this interface in HTML/CSS? The answer is yes, and it is quite easy. Just some borders, border-padding and negative margin.
https://gist.github.com/tpryan/5486052.js?file=1.html
https://gist.github.com/tpryan/5486052.js?file=1.css
That was relatively simple, but it gets more complex when you have a multi-person conversation. Facebook takes the most recent person in the thread and makes them take up half of the “chat head.” Then come the next two, taking up a quarter each. Then the rest are hidden.
Okay, so I need to pull out of nth child magic to selectively style the first 3 items in a collection of images. Set overflow to hidden, play with some more border radii and BOOM, “chat heads” done.
https://gist.github.com/tpryan/5486052.js?file=2.html
https://gist.github.com/tpryan/5486052.js?file=2.css
Okay, so that’s all been pretty straightforward, so I’d like them to be interactive. If I click on a multi-member conversation “chat head” I’d like it to expand out the rest of the members. This is very easy. Just a little JavaScript and some class swapping.
https://gist.github.com/tpryan/5486052.js?file=3.css
So done, Facebook native interface done in CSS/HTML. But I think we can do better. One of my issues about this interface and one that would prevent me from using it in a web based application is that it obscures the content beneath it, it just hangs out covering up anything unfortunate enough to be below it. For me, if I was using it I would want it to float instead of absolutely position. So I can do a few tweaks to make that happen.
https://gist.github.com/tpryan/5486052.js?file=4.css
Now in my demonstration, I pulled the text to be right aligned instead of left aligned, to show the float edge better. But I’m still not happy with it. Why? Because each of those circles carve a giant square out of the text. And that’s kinda lame because they’re circles. A few weeks ago a colleague of mine at Adobe, Bem Jones-Bey wrote an article about using shaped exclusions from the CSS Shapes and Exclusion spec. It seemed like a perfect fit. So if you have Chrome Canary installed, and the experimental features turned on, you get a much different result:
Demo [View in Canary]
The secret sauce here being the -webkit-shape-outside property. It basically allows me to exclude a circle from the underlying text around each of the “chat heads”. To find out more about using shape-outside, be sure to check out Bem’s article. It’s just one of the ways that the browser is becoming more capable of rendering a greater number of visual layouts and effects.
tpryan.blog 
pretty cool… I tried scaling them down to 76px wide/high, with 38px radius, but the circles looked sort of square (in Chrome). Have you tried smaller ones?
Also, my images were not square, so they got squished. Do you have any quick ideas on solving that?
LikeLike
The border will sometimes add pixels that you have to match for the purposes of border-radius. So you can send your border-radius value higher then 50% without causing a problem. It seems once you hit a perfect circle border-radius stops curving.
If your images aren’t square you have to add a little more code. I’ll post an entry on that later. But basically, you wrap the pictures in a div. Shape the divs to be square. You set overflow:hidden on those divs. Line up the pictures where you want them using absolute positioning. Then style the div’s like you would the images from previous steps.
LikeLike