A nice pullquote
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.
Hi, I'm yichi, a GUI designer, specializing in user interface and web design 










31 Commentsso far, Leave a comment or Pingback.
非常的漂亮啊!暂时不知道应该用在何处
比较适合用于highlight内容重点,文章结构复杂时用处很大。
不怎么明白,能说具体点嘛
你被点名拉!!速度SHOW桌面!!
@sumlei, 其实pullquote就是一个用于文章中吸引人的一个snippet, 用处嘛,其实并不大,但如果用了,文章更灵活易读,尤其是长篇效果明显,可以让reader马上知道你要说什么。不过我似乎用到的时候不多,呵呵
点名接受了,明天准备,今天喝多了
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
Hey, is there some reason your Yankee hat has been flipped horizontally?
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
- 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.
Merci pour cette astuce, je suis tombé dessus par hasard et je l’apprécie. (en passant super design ton blog)
Hey,
Nice tip.
I already “borrowed” it and started to use.
Great stuff!
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/
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
Beautiful weblog!
Fubiz, thank you
Very nice blog! Design is beautifull. Very good tip as well. thanks.
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, thanks for the comment, yep, it’s so odd without a home link, currently I’m revamping my header part, update soon. thank you
Hi
I like your logo. It very impressive, many thanks. Good resources here. Thanks!
Bye
Trackbacks
Reply to “A nice pullquote”