A user-friendly blog layout encourages mere visitors to become readers, so maybe you want to spice things up a little… How about some sweet blockquotes and saucy pullquotes?
There is usually more than one way to skin a cat when it comes to CSS, but here’s my suggestion:
Blockquotes
- When to use blockquotes
A blockquote is used when quoting text from another source, usually another blog or website. Blockquotes are intended to accommodate alarger amount of text, so as a rule of thumb, use blockquotes when you are quoting more than one or two sentences. Don’t forget to link back to the source. - Example
In an article on Wisdump, J David Macor writes:Everyone knows to use block quotes as a way to highlight, well, a quote. And while this is a good technique to use, you should also try a pull quote every once in a while.
As you can see, I went for the tried and tested over-sized quotation marks to give the blockquote some visual appeal.
- Images
You will need to create two images – the opening and closing quotation marks. What they look like is up to you! - The CSS
.blockquote {
background-image: url(images/open-quote.gif);
background-repeat: no-repeat;
background-position: left 5px;
padding-left: 30px;
font-style: italic;
}
.blockquote span {
background-image: url(images/close-quote.gif);
background-repeat: no-repeat;
background-position: right bottom;
display: block;
padding-right: 30px;
} - The HTML
<blockquote><span>Everyone knows to use block quotes as a way to highlight, well, a quote. And while this is a good technique to use, you should also try a pull quote every once in a while.</span></blockquote>
Note the span to accomodate the closing quotation marks.
Pullquotes
- When to use pullquotes
teasers intended to draw the attention of a viewerPullquotes are teasers intended to draw the attention of a viewer by giving a sneak preview of the content. They are quite common in magazines and newspapers and are usually short extracts from the article. Pullquotes are usually separated from the rest of the text by appearing in a bigger, or different font. They often contain surprising, interesting or important snippets, without giving too much away! A pullquote is a focal point on the page. Use them sparingly – more than one or two pullquotes per article, will defeat the purpose. - The problem…
Unlike blockquotes, there is no HTML element for pullquotes. Since the text of a pullquote appears twice on the page (once in the article and once in the pullquote) you should try and distinguish between the two in your markup. I suggest using a heading element for the pullquote. - The CSS
.pullquote {
padding: 10px;
float: right;
width: 200px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #694e1c;
border-bottom-color: #694e1c;
font-size: 16px;
text-align: center;
line-height: 36px;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
font-weight: normal;
} - The HTML
<h4 class="pullquote">put the text for the pullquote here</h4>
The overall layout of the header, sidebar(s), navigation and footer is important for the success of any blog, but that’s not where it ends – don’t forget the layout of your text! A user-friendly content layout will engage visitors, encouraging them to read your blog.
Add your thoughts below!
reff : http://blogsolid.com/ideas/2007/simple-css-blockquotes-and-pullquotes/
