Grow your CSS skills. Land your dream job.

Possible speech box w/ borders, curves & opacity?

  • # March 11, 2013 at 3:47 pm

    Is it possible to have a speech box with borders, curved corners & opacity?

    Would like it working in webkit and IE10.

    # March 11, 2013 at 3:51 pm

    @seanjacob check out Tooltips! Should do the job.

    http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/

    # March 11, 2013 at 3:56 pm

    @zdravo Thanks, but unfortunately this doesn’t work with opacity :(

    # March 11, 2013 at 4:30 pm

    Of course. Just feed all the colors via rgba

    # March 11, 2013 at 5:03 pm

    @Eric unless I have misunderstood you it is not as easy as that.

    # March 11, 2013 at 5:09 pm

    Then perhaps you need to explain further.

    # March 11, 2013 at 5:59 pm

    Have a first try: speech bubbles with rgba() background-color, yet borders are fully solid (as is the text).

    http://codepen.io/Merri/pen/aILsh

    Now works in Firefox, Chrome and IE10.

    I have another idea that might be more reliable, or somewhat shorter to do in CSS. It probably requires an extra element though. I wanted to do with as little HTML as possible.

    # March 11, 2013 at 6:48 pm

    @Merri that works very well, thank you!

    I have also managed a similar way – http://codepen.io/seanjacob/pen/IBsqG

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".