Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

What's the best technique to code this image

What's the best technique to code this image

Problem

I've got this image:

I want to code this image (just the bar, not the background - background can change) using html and css3. It has to be scalable in height and width. What's the best technique to do that? Thanks.

Problem courtesy of: emil.c

Solution

OK you can try this (tested in Firefox 11 only)...

HTML

Some content can go inside this bubble...

CSS

    .bubble
{
    background:#D0D0D0;
    background-image: -ms-linear-gradient(top, #BBB 0%, #EEE 100%);
    background-image: -moz-linear-gradient(top, #BBB 0%, #EEE 100%);
    background-image: -o-linear-gradient(top, #BBB 0%, #EEE 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #BBB), color-stop(1, #EEE));
    background-image: -webkit-linear-gradient(top, #BBB 0%, #EEE 100%);
    background-image: linear-gradient(top, #BBB 0%, #EEE 100%);
    border-radius:10px;
    border-top:2px solid #EEE;
    border-bottom:2px solid #AAA;
    position:relative;
    width:380px;
    height:100px;
}
.bubble .content
{
    padding:10px;
}

/* Arrow */
.bubble .arrow {
    position:absolute;
    top:50%;
    left:100%;
    margin-top:-12px;
}
.bubble .arrow:after,
.arrow .arrow-shadow
{
    border:10px solid Transparent;
    border-color:rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
    content:' ';     
    height:0;
    position:absolute;
    width:0;
}
.bubble .arrow:after
{
    border-left-color:#D3D3D3;
}
.arrow .arrow-shadow
{
    height:3px;
    border-left-color:#AAA;
}

It's a bit of a hack in my opinion, but it seems to get fairly close to what you want. The only things that may be an issue are:

  1. Backwards compatibility. Older versions of IE might choke so it'd be worth testing it and hacking IE compatibility as required.
  2. If the box becomes too big, the arrow might look a different colour to the box. I can't figure out a way around this, so you might have better results putting the arrow in a static location.

You can find a JSFiddle here: http://jsfiddle.net/eWj6q/13/

Solution courtesy of: Karl Nicoll

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

What's the best technique to code this image

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×