One design/css trend that is popular among many blogs, is “fancy Quotes” or should I say giant talk bubble comment-like creatures. You know the kind every blog and it’s mother have in the comment area. We have implemented this design style on our new site re-design under the “Testimonial” section, of course in a sleek Sharpdot fashion, with a drop shadow, small file size and even smaller mark up.

Well to start off here is the image and html we will use:

Talk Bubble
(Note the white background of the image. We will be overlaying this image over the blue color talk-bubble background to cancel the blue out. Then blend in to the white page background.)

HTML:

    <blockquote>
        "We've worked with Sharpdot for years and are consistently amazed
        with the quality of work and response time that they have provided."
        <span>
            <strong>Rob Dietz</strong><br />
            Principal and Creative Director - <a href="http://www.picadesign.com/">Pica Design, LLC</a>
        </span>
    </blockquote>

The first thing you should notice is there is not a lot of mark up here, no div’s and no id’s or classes junking it up. Just a good old <blockquote> tag, a <span> and <strong> tag to boot. (Note: If you view the source code of our live site you will see a div with a class added, for styling the link arrows with in the quote.) This is one for the semantics crowd. Now let’s take a look at the css for the quotes.

CSS:

	blockquote {
            background-color:#e1e8f2;
            border:1px solid #a6a6a6;
            width:258px;
            padding:10px;
            margin-bottom:20px;
       }
	blockquote span {
            background:#fff url(images/bkg_talkBubble-bot.jpg) no-repeat;
            display:block;
            width:220px;
            padding:12px 0 0 60px;
           margin:10px 0 -11px -11px;
        }
	blockquote span strong { font:bold 1.4em 'Tahoma', Verdana, Arial, Helvetica, sans-serif; }

OK, first off in our blockquote style we have styled a generic type of box with a light blue background, light Grey border, some padding for breathing room, a width for the image to line up with, and some margin on the bottom so the next quote doesn’t get caught up in it’s knickers.

Now the fun part…the span tag. We set the background image, set it to be a block element. Then the magical part. In order for this “cap” to display properly we use negative margin to “pull” it in to place. Kind of like Google’s css grid system “Blueprint” uses the .push and .pull classes to make things do your bidding, regardless of the structural bindings. The width and padding values are all set to add up properly.

This tequnique can be used in making content boxes as well. Sometimes I set the container element to display: relative; and set the inner caps to position: absolute; then use top and left negitive values to postion them into place. It really comes down to how all the different browsers display your mark up…meaning does Internet Explorer 6 (evil, bad, go away) display it properly..or can a hack be acheived period.