I’m a big fan of using pull-quotes (or callouts) to improve the readability of content-heavy pages. Not only do call out important content, but they can also be used to break up content on the page and provide additional visual interest.
However, I’ve been finding it hard to discover good examples of pull-quote styling around the web (please let me know if you have some examples I should include).
And so, to that end, I’ve been experimenting with different ways to display pull-quotes myself.
The examples I’ve created are all based around the <blockquote> tag and don’t use images, so they are both semantically correct and easy to implement.
Not all of them display perfectly across all browsers; however, for the sake of simplicity I’ve not included any browser-specific tweaks or hacks.
To check out the CSS, just view the source code — it’s pretty well organized and so should be easy to follow.
Hopefully, someone more creative than me will come up with some more ways to style pull-quotes.
Mandarin Design (http://www.mandarindesign.com) did a little ditty on different styles of pullquotes a while back: http://www.mandarindesign.com/troops.html#pullquotes — explore all the different experiements on that page. I like to think of that link as a sort of an inspiring primer on dabbling in pullquotes.
-he who stacks pork
Interesting…
I prefer “bq12”, as it is simple but yet effective and easy on the eyes. I find that sometimes they can be jarring and distractive…
Very nice. I like bq1 and bq7.
I generally stay away from callouts and such things. Im not too fond of them really.
They can look good however if their used in fairly colourful designs which perhaps a lot of graphics being used.
pleas visit our site in http://www.prowebdeveloper.com