Messages [CSS]

9 Responses

1. Dan Eden

   Free code!

   It's a pretty poor attempt, but as close as I can get with sensible markup and pure CSS/HTML/SVG.

   Annoying things:

   - 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

2. Pro Joshua McCowen

   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!

   1likes

   10 months ago

3. Peter Tait

   Looks great.

   10 months ago

4. Will Phillips Jr

   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)

   10 months ago

5. Pro Sam Soffes

   Try using a web font instead of SVG when possible. You can do text-shadow, etc on that stuff

   10 months ago

6. Pro Guillaume Gaubert

   I would increase the opacity of the bubbles' border and put a dark 1px inner glow on the avatars as well.

   10 months ago

7. Louis Bullock

   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 :)

   10 months ago

8. Ryan Collins

   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.

   10 months ago

9. Pro Victor Coulon

   nicely done!

   10 months ago