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.
- Previous post: WaSP Survey
- Next post: What is an accessible website?
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Hey, that's quite neat. Would you mind if I used this technique on my website?
Not at all. It's a bit obvious if you use the same graphics though, so I'd recommend creating your own ;-)
Very nice. These little one off techniques are great to note -- bookmarking page right now. Thanks Roger!
Very slick, love the combining of the image so that you use only one...
Thanks Roger. Of course I'd change the graphics! :-)
Pretty cool, nice one Roger!
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.
I use a similar technique on our site at http://www.nscu.com
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.
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!
Richard: Not really. Force of habit I guess ;)
very useful tips,and it makes my blockquote a good looking now:)
Sorry, comments are closed for this post.