CSS for Mail.app like name bubbles

Discussion in 'Web Design and Development' started by markfc, Jan 12, 2009.

  1. markfc macrumors 6502a

    markfc

    Joined:
    Sep 18, 2006
    Location:
    Prestatyn, Wales, UK
    #1
    I'm looking for some CSS to do mail.app like name bubbles on a php page.

    The script pulls names out of database then will print each name in one of those bubbles. Any ideas where I could get something like that from?
     

    Attached Files:

  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    CSS offers a property border-radius that can achieve that, but is only supported by the newer browsers and not IE. The more typical way is to make use of background images. There would be at least two images here, one for the left and one for the right. There's a number of tutorials for creating rounded corners, which would apply to this situation.
     
  3. memco macrumors 6502

    Joined:
    May 1, 2008
    #3
    Put the names in some sort of container (probably a span for this) and give it a class like recipient (or something descriptive) and then do:

    Code:
    .recipient {
    border : thin solid #b7d0f7;
    background : url('image.png') #e1ebfb;
    }
    
    As Angelwatt said, you'll need to create the rounded effect with an image. The border color and background in the css will make it so that you'll at least have blue boxes (without rounded corners) if images are turned off.
     

Share This Page