A nice pullquote

Aug 24th, 2007 // Xhtml+CSS

I’m a pullquote, a snippet of content what I am doing is to catching your attention.

When you are writing something and intend to catching attention of readers, put a pullquote as a snippet of preview the content is getting popular on blogs/websites. Both pullquote & blockquote are widely uses on newspapers, magazines, NYtimes.com is an actual web-based media to taking look at them.

This article will show how to get a pullquote with CSS. Technically, pullquote is different from blockquote, it is not a HTML element, which means we should markup it in HTML with heading element such as <h4> or <h5> and we use CSS to define it in a way you want.

Here is markup:

<h4 class="pullquote">I'm a pullquote, a snippet of content.</h4>

and put the following to CSS file, those will control how it looks like:

.pullquote { padding: 10px; float: right; width: 200px; margin:10px 0 10px 10px; border-top:2px solid #ffc300; border-bottom:2px solid #ffc300; text-align: center; line-height: 22px; font-family: georgia, verdana, Arial, Helvetica, sans-serif; color:#ccc;}

It’s all done! A nice pullquote will work just fine with your content of website/blog, enjoy.

31 Commentsso far, Leave a comment or Pingback.

非常的漂亮啊！暂时不知道应该用在何处

→ Jvstin // Aug 24th, 2007
比较适合用于highlight内容重点，文章结构复杂时用处很大。

→ yichi // Aug 24th, 2007
不怎么明白，能说具体点嘛

→ sumlei // Aug 24th, 2007
你被点名拉！！速度SHOW桌面！！

→ sumlei // Aug 25th, 2007
@sumlei, 其实pullquote就是一个用于文章中吸引人的一个snippet, 用处嘛，其实并不大，但如果用了，文章更灵活易读，尤其是长篇效果明显，可以让reader马上知道你要说什么。不过我似乎用到的时候不多，呵呵

点名接受了，明天准备，今天喝多了

→ yichi // Aug 25th, 2007
Hello;

I like your theme and it has inspired me to make a similar theme for my site. What is the best way to do this? I usually modify others themes to suit the color scheme and layout I want not creating one from scratch. Are there any source files I can use to have a look? or any resources you recomend?

Thanks alot

Luke
New Zealand

→ Luke // Aug 27th, 2007
Hey, is there some reason your Yankee hat has been flipped horizontally?

→ Beans // Aug 27th, 2007
Luke, thank you. Sometime modify some other template to fit your own is a quiet good way to start learning. Once you have decided to make something brand new on your own iterms I suggest you to read those relevant tutorials:
http://www.wpdesigner.com/category/tutorials/

I hope this can be help

→ yichi // Aug 28th, 2007
- Beans, Sharp! I made flip on the hat because there was an object masked some part of it, something like a bottle or whatever it is (I forgotten already). Thanks for remind me on this, maybe it’s time to fix this problem.

→ yichi // Aug 28th, 2007
Merci pour cette astuce, je suis tombé dessus par hasard et je l’apprécie. (en passant super design ton blog)

→ teddy // Aug 29th, 2007
Hey,
Nice tip.
I already “borrowed” it and started to use.
Great stuff!

→ CM // Aug 29th, 2007
Why wouldn’t you use the blockquote tag? I don’t get it.

Incidentally, if you want some nice pull quote examples, I have collected some together here: http://www.smileycat.com/design_elements/pull_quotes/

→ Christian Watson // Sep 10th, 2007
hey i like your idea of a pullquote. I will most definitely use it on my own blog. awesome. thank you. regards from austria. philipp

→ Phil // Oct 3rd, 2007
Beautiful weblog!

→ Fubiz // Oct 30th, 2007
Fubiz, thank you

→ yichi // Oct 30th, 2007
Very nice blog! Design is beautifull. Very good tip as well. thanks.

→ Freelancer // Dec 6th, 2007
Nice redesign, yet another time, but you’ve forgotten the “home”-link. I have bookmarked this site and there is no obvios way to go back to the start page. Fix that please.

→ Thomas Maurstad Larsson // Mar 12th, 2008
@Thomas, thanks for the comment, yep, it’s so odd without a home link, currently I’m revamping my header part, update soon. thank you

→ yichi // Mar 13th, 2008
Hi

I like your logo. It very impressive, many thanks. Good resources here. Thanks!

Bye

→ Yemek // Apr 9th, 2008