CSS Teaser Box

Just a little something that may be of use to someone. It’s pretty common for websites to have “teasers” that show an excerpt of a full article or document. The design for a recent project called for a teaser box with rounded corners, and below is an example of the result.

Very simple, but I like the way it uses no extra markup, and will grow (vertically, it has a fixed width) to contain any amount of text. It will also take huge text sizes to break it.

Update: I just realized that the two images can be combined. That’s one less server hit and a few bytes saved on image size.

CSS Teaser Box

This is an example of the teaser box. Since its width is fixed, I can get away with using a single background image to create the rounded corners and the top and bottom borders. CSS is used for the left and right borders, and the background colour of the p and a elements in the teaser is set to white.

See the stand-alone demo
  • June 9, 2004
  • Comments closed
  • Posted in

Comments

1. June 9, 2004 by DarkBlue

Hey, that's quite neat. Would you mind if I used this technique on my website?

2. June 9, 2004 by Roger

Not at all. It's a bit obvious if you use the same graphics though, so I'd recommend creating your own ;-)

3. June 9, 2004 by Keith

Very nice. These little one off techniques are great to note -- bookmarking page right now. Thanks Roger!

4. June 9, 2004 by Mike P.

Very slick, love the combining of the image so that you use only one...

5. June 9, 2004 by DarkBlue

Thanks Roger. Of course I'd change the graphics! :-)

6. June 10, 2004 by Max Thrane

Pretty cool, nice one Roger!

7. June 11, 2004 by Lars

Looks and works great. I really like the CSS. I'm inspired to have a look at my own style sheets, to see if there are any background-images that can be combined.

8. June 14, 2004 by Scott Baldwin

I use a similar technique on our site at http://www.nscu.com

9. June 17, 2004 by iWantToKeepAnon

The guy from www.nscu.com has a good idea. Instead of drawing the box, they draw the few little pixels outside the box. That way the top and bottom image can be used for differently colored boxes ... cool idea.

10. June 23, 2004 by Richard Earney

Out of interest was there a reason for quoting the source for the graphic in the CSS?

ie: background:url("tsr-a.gif") 410px 50% no-repeat; as opposed to background:url(tsr-a.gif) 410px 50% no-repeat;

Otherwise cool idea!

11. June 23, 2004 by Roger

Richard: Not really. Force of habit I guess ;)

12. November 18, 2004 by kelet

very useful tips,and it makes my blockquote a good looking now:)

Sorry, comments are closed for this post.

Information, sponsorship, and externals

Subscribe

SidebarAds

Looking for web hosting?

Try DreamHost!

Use the promo code 456BEREASTREET3 to save USD 20 when you sign up!

Favourites, here and elsewhere

Affiliation

  • NetRelations
  • Kaffesnobben
  • Dagens recept
  • 9rules network member

Support this site

Show your support by buying a book or two from SitePoint or getting me something from my Amazon Wish List.