Pull-quote Design Showcase
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.
Posted on: April 8, 2007 | 5 Comments
Recent Entries in "Showcases"
Navigation
Categories
- Blogging
- CSS
- Photography
- Popular
- Real Life
- SEO
- Showcases
- Tools & Resources
- Top Ten Lists
- Usability
- Web Design
- Web General
- Writing for the Web
Related…
- Interactive Agency
- seattle web design
- pennsylvania yellow pages
- Web Designers
- Web Design Community
- Organic SEO
- Search Engine Rankings
Recent Posts
- Experiment in Making an Article Sidebar More Readable and Visually Appealing (24)
- Login Form Showcase: 65+ Examples of Login Form Design (14)
- Vote for Your Favorite Typography Preferences (9)
- Conventions for Video and Audio RSS Feed Icons? (12)
- A Better Way to Create Information Architectures, Wireframes and Prototypes (11)
- Footer Design Showcase: 75+ Creative Footer Designs (21)
- Redesigning the TechCrunch Web Site Footer (18)
- Do Online Press Releases Serve a Useful Purpose? (3)
- Is It Fair To Criticize Bad Design? (28)
Popular Posts
- CSS Rounded Corners 'Roundup' (78)
- Using a Background Image Grid to Lay Out Your Web Site (43)
- Typography for Headlines (40)
- Blog Comment Form Design Showcase (15)
- Blog Comment Design Showcase (36)
- How to Get a Job in the Web Industry (24)
- How to Create a Block Hover Effect for a List of Links (32)
- How to Write a Web Site Creative Brief (6)
- How to Style 'Author' Comments Differently on Your Blog (9)
- How to Style an A to Z Index with CSS (5)
5 Comments Posted
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
1. Posted by Leopold Porkstacker on April 09, 2007
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...
2. Posted by Jermayn Parker on April 09, 2007
Very nice. I like bq1 and bq7.
3. Posted by Michael on April 15, 2007
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.
4. Posted by Michael on April 17, 2007
pleas visit our site in http://www.prowebdeveloper.com
5. Posted by shahy on April 19, 2007