4 January 2010

How to make pull-out quotes

Pull-out quotes have been in use in printed media for many years. They are essentially short extracts from the main article, made nice and big so that they can be read at a glance. Their purpose is to draw the reader in with tantalising little snippets, that either draw out a key feature or provoke some sort of reaction. This has become increasingly popular on the web too, and this tutorial shows you a few possible ways to style your blockquotes to make them look a little more interesting!

The starting point: a blockquote

Semantically, the best option for a pull-out quote is the blockquote html tag, typically used thus:

Some paragraph of text goes here.
<blockquote>"And then it hit me - orange is a brilliant colour!" - Bob Smith</blockquote>
Content continues here...

By default your browser will probably render that as a normal paragraph of text, indented slightly. We can do better than that. But first, it might be worth giving the blockquote a classname, to make it easier to style and ensure we can still use blockquotes normally later if we need to.

The basic pull-out quote

If you look at a pull-out quote in a magazine you'll probably see it represented as a box, floated to one side of the content. Thankfully CSS provides us with an easy way to achieve this on a web page too. All we have to do is give our blockquote a fixed width and float it to one side.

This is the paragraph above.
<blockquote class="pullout">"And then it hit me - orange is a brilliant colour!" - Bob Smith</blockquote>
Content continues here...

.pullout {width: 200px; float: right;}

Doesn't look too fancy yet, but the principle has been established. Now we get to the fun bit - making it look pretty...

A little blue sparkle

.pullout {
width: 200px; float: right;
font-size: 1.6em; font-weight: bold; letter-spacing: -0.06em; color: #8080f0;
border-left: 8px solid #8080f0;
margin: 0 0 10px 10px; padding: 0 0 0 10px;
}

I've grouped those CSS attributes together a little, hope you don't mind. You can see from the screenshot how that looks. The margin is to give a little spacing around the outside so that the content doesn't crowd in around the blockquote, and the padding gives a smidgin of separation between the blockquote text and the blue border on the left. Simple, but effective.

Some CSS3 prettifications

.pullout {
width: 300px; float: right;
font-size: 1.8em; color: #ffffff; font-family: "Courier New", Courier, monospace; font-weight: bold; letter-spacing: -0.08em;
text-align: center;
padding: 10px; margin: 0 0 10px 10px;
border: 4px dashed #ff9000;
text-shadow: #000000 0 0 5px;
-moz-transform: rotate(3deg); -moz-border-radius: 10px;
-webkit-transform: rotate(3deg); -webkit-border-radius: 10px;
}

Obviously this is for demonstration purposes only, because unless you happen to be viewing this CSS in a gecko or webkit browser you're not going to see much (rotations, text shadows and border radii are not supported in Internet Explorer yet, only Firefox, Safari and Chrome). But you can see the potential, hopefully.

More styling for the speaker

.pullout {
width: 200px; float: right;
font-size: 1.6em; color: #006600; font-weight: bold; letter-spacing: -0.06em; color: #303030;
text-align: left;
padding: 10px; margin: 0 0 10px 10px;
background: #e0e0e0;
}
.pullout span {
display: block;
text-align: right;
font-size: 0.8em; color: #606060; font-style: italic;
}

<blockquote>"And then it hit me - orange is a brilliant colour!" - Bob Smith</blockquote>

This example shows how you can further identify the speaker of the quote by giving it its own styling. I've used a span to enclose the name of the person, because this degrades nicely - if the CSS doesn't load for whatever reason then the whole chunk of HTML still makes sense and is perfectly readable.