The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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.

    # 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).

    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 –

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed