Need Help, How to Create CSS3 Speech Bubbles?

Discussion in 'CSS' started by rainat, Oct 12, 2012.

  1. #1
    Hello friends, could you help me how to create CSS3 speech bubble like image (bubble speeach in the red cirlce)

    bublel.jpg

    Thanks
     
    rainat, Oct 12, 2012 IP
  2. Red Swordfish Media

    Red Swordfish Media Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Are you trying to do this as a tooltip that appears when the user hovers over the element? If so there are a lot of examples on the Web. Just Google "css tooltip examples". You can create some very cool effects using CSS and jQuery.
     
    Red Swordfish Media, Oct 12, 2012 IP
  3. rainat

    rainat Member

    Messages:
    66
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    no, it is not a tooltip . just a background
     
    rainat, Oct 12, 2012 IP
  4. ntmedia

    ntmedia Active Member

    Messages:
    118
    Likes Received:
    11
    Best Answers:
    7
    Trophy Points:
    90
    #4
    If it's a static background and it doesn't depend on the width of the elements within, just make an image of the proportion within, set the container of the bubble to position: relative; and make several span elements with position absolute and just position them properly with margin-top and margin-left. That would be the easiest solution.
     
    ntmedia, Oct 13, 2012 IP