It's a pretty poor attempt, but as close as I can get with sensible markup and pure CSS/HTML/SVG.
- The SVG mask doesn't give us nice drop shadows on the ellipsis
- The SVG mask was a rush job to start with - my bad
- Can't get the bubble 'tip' in CSS. At least, without extra unnecessary markup.
I wrote this up to be as flexible as possible, with the most sensible markup I could think of. If you think it's dumb, or you can improve on it, let me know!
10 months ago
I think the chat bubbles feel a little too embellished to me. If I just saw this, I would think it was an image, but it's HTML! Seriously nice job!
you need to post this on http://codepen.io
(no I don't work for them, but this is the kind of stuff you would see over there)
Try using a web font instead of SVG when possible. You can do text-shadow, etc on that stuff
I would increase the opacity of the bubbles' border and put a dark 1px inner glow on the avatars as well.
For the ellipses, I'd just wrap '…' with a div, go font-weight:bold; text-align:center; etc, and definitely chuck a text shadow on there.
So why SVG? I'm curious?
Looks great :)
Nice work! I made the ellipsis just a teeny tiny bit better without any extra markup. :) Still not perfect though, oh well.
EDIT: So then I made this, which looks bloody horrible. But you get the point that it can be done if you aren't as bad with SVGs as I am. :P
EDIT 2: And here's my (hopefully) last attempt.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter