Four New Blockquotes And How You Can Make Them
- July 24th, 2008
- COMMENTS 14
In the past weeks, I have been using blockquotes more than any other element packaged into Elite Platinum and the current Elite By Design theme. I find them to be great ways to organize list posts and separate large bodies of text. Today, I’m going to show you four new blockquotes I have included in Platinum, and how you can make them in CSS so they can be used on your own website.
.
.
.
-
<blockquote class=boxquote>
.What It Looks Like
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tempus. Curabitur eros nulla, tempus quis, blandit vitae, condimentum at, tellus. Fusce sodales. Praesent volutpat tortor et orci. Integer consequat volutpat ligula. Pellentesque sit amet nisl eu ligula venenatis mollis. Cras gravida mauris eget tortor. Integer laoreet porttitor dui. Donec at lectus et diam ultrices facilisis. Duis et tortor quis eros placerat tincidunt. Donec eu ligula commodo mi varius porttitor.
.
How To Make It
blockquote.boxquote {
border:1px solid #313131;
background:none;
margin:10px 38px;
padding:5px 15px;
}As you can see, this style of blockquote is quite simple to make. All it takes is adding a 1 pixel border around the text, and then spacing it out away from the text. This gives a nice, organized feel to the body of an article
-
<blockquote class=bigquote>
.What It Looks Like
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tempus. Curabitur eros nulla, tempus quis, blandit vitae, condimentum at, tellus. Fusce sodales. Praesent volutpat tortor et orci. Integer consequat volutpat ligula. Pellentesque sit amet nisl eu ligula venenatis mollis. Cras gravida mauris eget tortor. Integer laoreet porttitor dui. Donec at lectus et diam ultrices facilisis. Duis et tortor quis eros placerat tincidunt. Donec eu ligula commodo mi varius porttitor.
.
How To Make It
blockquote.bigquote {
margin:10px 38px;
padding:0 0 0 50px;
border:none;
background:url(images/quote-top.gif) no-repeat;
}
blockquote.bigquote p {
padding:5px 50px 5px 0;
border:none;
background:url(images/quote-bottom.gif) no-repeat right bottom;
}The BigQuote blockquote is a great way to utilize images for separating the body text. To use this method however, you will need two images - one for the top quotation mark and one for the bottom. Go ahead and download these image by clicking here.
-
<blockquote class=borderquote>
.What It Looks Like
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tempus. Curabitur eros nulla, tempus quis, blandit vitae, condimentum at, tellus. Fusce sodales. Praesent volutpat tortor et orci. Integer consequat volutpat ligula. Pellentesque sit amet nisl eu ligula venenatis mollis. Cras gravida mauris eget tortor. Integer laoreet porttitor dui. Donec at lectus et diam ultrices facilisis. Duis et tortor quis eros placerat tincidunt. Donec eu ligula commodo mi varius porttitor.
.
How To Make It
blockquote.borderquote {
border:solid #2f2f2f;
border-width:3px 0;
background:none;
margin:10px 38px;
padding:5px 15px;
}BorderQuote creates a strong border to seperate important excerpts of your articles or, what I use them for, is to structure list posts into easily readable and scanable content areas. This is a very effective blockquote technique that utilizes very simple CSS - so give it a try!
-
<blockquote class=dottedquote>
.What It Looks Like
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque tempus. Curabitur eros nulla, tempus quis, blandit vitae, condimentum at, tellus. Fusce sodales. Praesent volutpat tortor et orci. Integer consequat volutpat ligula. Pellentesque sit amet nisl eu ligula venenatis mollis. Cras gravida mauris eget tortor. Integer laoreet porttitor dui. Donec at lectus et diam ultrices facilisis. Duis et tortor quis eros placerat tincidunt. Donec eu ligula commodo mi varius porttitor.
.
How To Make It
blockquote.dottedquote {
border:none;
margin:10px 38px;
padding:5px 0 0;
background:url(images/dottedquote.gif) repeat-x;
}
blockquote.dottedquote p {
padding:5px 15px 10px;
background:url(images/dottedquote.gif) repeat-x left bottom;
}DottedQuote is the type of blockquote I have been using in all of my inspiration posts in the last month. This is a very simple and elegant blockquote to help you split up your article and organize all of your content. Again, this method requires an image which can be downloaded by clicking here.
.
.
.
.
.
.
.
Those are the four blockquotes I have implemented into Elite Platinum and my current theme in use on Elite By Design.
.
.
Further Reading
Block Quotes And Pull Quotes - Examples & Good Practices
Simple CSS Blockquotes and Pullquotes
Six Ways To Style Blockquotes
Nice work. I really like the “bigquote” style, I had never thought of defining the class twice to give it two background images like that, but I’ll definitely use that technique!
Number 3 is a personal fav of mine.
Great! I have to style mine, I don’t have any CSS style currently.
BigQuote is my favorite. I had one similar to this on a previous design but on subsequent designs, frankly, I got lazy. LOL Nice inspiration!
BigQuote is definitely top notch.
but depending on having inside renders it fairly dependable on who is generating the content thus making it a bit of a risk in a CMS based solutions where editors are given only some kind of a ritch text editor (fck, tinymce)
although I like the design for the BigQuote I just wanted to point out that it doesn’t apply to every scenario.
If you’d like to read more about the subject, here is my article on designing for CMS
just my 2 cents,
cheers
Ooo I this has inspired me change up my block quote style.
Thanks everyone for the encouraging comments - I hope some of you all get to use these blockquotes on your own websites!
@Greg - I agree. For me however, it worked perfectly, so I ran with it
I did a similar version of bigquote with a nested div. To answer Greg’s challenge about being subject to the authors inputs, you could do a small jQuery that adds a child to any instance of
They are attractive.
Wow thank you! I’ll apple these styles to my theme.
Well done. This is good info for me and for anyone else who loves this sort of thing.
[...] Fuente: EliteByDesign [...]
[...] short and concise list of how to do various styles for blockquotes.read more | digg [...]
[...] - Four New Blockquotes And How You Can Make Them saved by [...]