aside
some favorite linksread the blog
posted on 12/30/07
Styling Blockquotes
I’ve been playing with around with the styling of <blockquotes> recently, so I thought I’d share a few tips on making a better looking blockquote or using CSS to add a little functionality. Here’s my demo page. Take a look at it to see what I’m talking about.
Number one is a practical use of content: and :after. Since using cite in a blockquote doesn’t actually make anything appear on your page, let’s add some CSS to do it for us. So you’re blockquote starts like this:
<blockquote cite="http://lipsum.com">
and the css looks like this
blockquote:after{content: " (" attr(cite) ")";display:block;}
This will just make your cite appear after the blockquote in parenthesis.
If you’d like to try it a different way, check out number two. This method will highlight the blockquote upon hover and then show your cite.
blockquote:hover{background:#FFF394;}
blockquote:hover:after{content: " (" attr(cite) ")";display:block;font-size:10px;}
Number three is just a little use of padding, border, and background color to make your blockquotes stand out: blockquote{padding:10px;background:#FFF394;border:1px dashed #8F5656;}
Number four again makes use of content to add quotes, without modifying the blockquote at all. So your blockquote can look like this
<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</blockquote>
and your CSS can add the open and close quotes.
blockquote{line-height:17px;}
blockquote:before{content:open-quote;font-family:georgia;font-size:20px;}
blockquote:after{content:close-quote;font-family:georgia;font-size:20px;}Notice I’ve adjusted the
line-height so larger quotes don’t throw off the top and bottom lines of the blockquote. Also try a typeface like Georgia for some stylish quotes.
Number five is very similar to the way I style my blockquotes on pixelspread. Just a simple background image of an open quote
blockquote{background:url("quotebg.png") no-repeat;padding:5px 0px 0px 30px;margin:10px;}
Be sure to adjust the padding, so your quote isn’t overlapping your background.
Number six achieves the look as number five, but without the use of an image. The benefit being that no image needs to load, but you will have to add an open quote within your blockquote.
<blockquote><span>“</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</blockquote>
blockquote{position:relative;margin:10px;padding:5px 0px 0px 30px;}
blockquote span{position:absolute;top:0px;left:8px;font-family:georgia;font-size:50px;}Kennedy Ellens
posted on Jan 2, 03:28 PM
Hello. I just want to say that I am still ultra new to web design but I want to thank you for using Textpattern. I installed it to my web space and compared to Wordpress, it is amazing. I do apologize for going off topic but I just had to thank you Matt.
normal doğum
posted on Feb 20, 07:09 PM
Very useful list. I will have to let others know about it and go bookmark it…
Aşk Şiirleri Aşk Sözleri
posted on Jul 1, 12:08 PM
www.siirler.biz/” title=“Aşk Şiirleri Aşk Sözleri”>Aşk Şiirleri Aşk Sözleri
supra shoes123
posted on Nov 21, 10:01 PM
Very good post. Made me realize I was totally wrong about this issue. I figure that one learns something new everyday. Mrs Right learned her lesson! Nice, informative website by the way.
bdsm
posted on Apr 1, 08:48 AM
Very good post. I realized that I was totally wrong on this issue. I think you learn something new every day. Mrs. Right learned its lesson! Nice, informative site by road.
best buy coupons
posted on Jul 29, 05:39 AM
These are generally set off from the text that precedes and follows them by also adding extra space above and below the quotation and setting the text in smaller type. Barring specific requirements, the format of the block quotation will ultimately be determined by aesthetics, making the quotation pleasing to the eye, easy to read, and appropriate for the particular writing task. Thanks.
single mattress topper
posted on Aug 4, 09:22 AM
Barring specific requirements, the format of the block quotation will ultimately be determined by aesthetics, making the quotation pleasing to the eye, easy to read, and appropriate for the particular writing task. Thanks.
Sell My Iphone
posted on Aug 25, 02:25 AM
Its gave them access to several megabytes of memory and removed the obligation to participate in the software virtual memory scheme. Thanks.
Belstaff sunglasses
posted on Aug 30, 03:11 AM
uotation pleasing to the eye, easy to read, and appropriate for the particular writing task. Thanks.
ugg bailey button
posted on Aug 30, 09:44 PM
Hmm, noticed my About page disappeared. It is now back.
christian louboutin outlet
posted on Nov 2, 03:57 AM
Using the big selection of possibilities, it’s going to not be tricky to come across the great camera for you Fifi 100mm Gold. Today, even the basic mobile phone has a decent camera in it, which means that just about any one is usually a photographer.
Air Jordan Flight 45
posted on Nov 6, 10:30 PM
can save a person quite <a href=“http://www.sneakerscrazy.com/new-adidas-shoes-adidas-campus-c-496_505.html”><strong>Adidas Campus Vulce Shoes</strong></a> a fair amount of money. Another benefit is that instead of jostling <a href=“http://www.cheapuggsnowboot.com/ugg-adirondack-tall-5498-c-1.html”><strong>Ugg 5498</strong></a> through crowded stores, you
Adira Asuransi Kendaraan Terbaik Indonesia
posted on Nov 29, 06:12 PM
Very happy to see your article, I very much to like and agree with your point of view.
The North Face Sale
posted on Dec 1, 08:12 PM
Using the big selection of possibilities, it’s going to not be tricky to come across the great camera for you Fifi 100mm Gold. Today, even the basic mobile phone has a decent camera in it, which means that just about any one is usually a photographer.
tantric massage London
posted on Dec 20, 08:25 PM
I found this blog by accident. Really glad I did though, I’ll be back from now on.
Ultrabook Notebook Tipis Harga Murah Terbaik
posted on Jan 29, 12:57 AM
I really like this website, And hope you will write more ,thanks a lot for your information.
Ultrabook Notebook Tipis Harga Murah Terbaik
posted on Jan 29, 01:29 AM
Hello!I am glad to here, Good Site! Thanks you! Ultrabook Notebook Tipis Harga Murah Terbaik Ultrabook Notebook Tipis Harga Murah Terbaik Tech Store berita teknologi Beauty tips Healthy Tips ekspresi
What?
Pixelspread is the webblog and portfolio of Matt McInerney. If you'd like to learn a little more, check out the about section.
©2008 pixelspread - powered by txp
XHTML CSSOld Blog
- Blog and Portfolio Nov 11
- Tumblr Updates Oct 09
- Summer's Over Sep 16
- Summer Jun 02
- A Brief Update Apr 30
- The Freebies Section Apr 16
- Serifs on the Web Apr 15
- More Alphabets Apr 04
Elsewhere
- matt.cc
the new home of my blog
- cameron.io
a great tumblelog by cameron hunt
- sam brown
of massive blue
- shaun inman
creator of mint
- simplebits
by dan cederholm
- the big noob
by ryan, brad, and keegan
Josh Minnich
posted on Dec 30, 06:56 PMThis is definitely a great tutorial! I think I like the classic inserting the quotes as a background image at the top and then sometimes you can add it to the bottom right of the enclosed text if you’d like.