Quoted Blockquotes

By James KanjoJames Kanjo

Description

This is just some simple CSS code to put quotation marks in your blockquotes. This is special because there is a left double-quote in the top-left corner, and a right double-quote in the bottom-right corner (which looks really cool!).

Code

blockquote {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-right.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}
blockquote p {
    background-image: url(http://snippets.wikidot.com/local--files/code:quotes-in-blockquotes/quote-left.gif);
    background-repeat: no-repeat;
    margin-top: 0;
    padding: 1em 60px 0;
    min-height: 37px;
}
blockquote p + p {    padding-top: 0;    background-image: none;}

In action

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel felis at nibh tincidunt condimentum ac quis magna. Nunc sed ornare augue. Ut et lacus tortor, sit amet feugiat arcu. Donec eu massa eget tortor fringilla consequat non sed arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut malesuada varius sapien in tincidunt.

Cras at augue mauris. Suspendisse vitae diam tortor. Suspendisse arcu nibh, tempor sit amet convallis quis, posuere sed nisl. Duis eget tincidunt ipsum. Quisque feugiat mauris ut dui ullamcorper dictum vel sed enim. Aenean tempus gravida elit non mattis. Nulla eget odio ac nunc sodales pellentesque in sodales neque. Proin laoreet nisl odio, nec dictum felis.

Limitations

In Internet Explorer 6 and below, the opening quotation will appear at the start of every paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel felis at nibh tincidunt condimentum ac quis magna. Nunc sed ornare augue. Ut et lacus tortor, sit amet feugiat arcu. Donec eu massa eget tortor fringilla consequat non sed arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut malesuada varius sapien in tincidunt.

Cras at augue mauris. Suspendisse vitae diam tortor. Suspendisse arcu nibh, tempor sit amet convallis quis, posuere sed nisl. Duis eget tincidunt ipsum. Quisque feugiat mauris ut dui ullamcorper dictum vel sed enim. Aenean tempus gravida elit non mattis. Nulla eget odio ac nunc sodales pellentesque in sodales neque. Proin laoreet nisl odio, nec dictum felis.

You may prefer this effect; it can be made permanent across all browsers by replacing the last line of CSS code with blockquote p + p { margin-top: -1em;}


Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by James Kanjo

Extended NewPage Module - 15 Jul 2014 15:08
Specific Users Only Include - 24 Jul 2013 06:16
iframe Redirect - 30 Jul 2012 22:41
Per Category CSS Module - 06 Mar 2012 03:38
Video Player - 16 Feb 2012 01:50
Remove Duplications - 16 Feb 2012 01:39
RegExp Date Wizard - 16 Feb 2012 01:39
"Random Page!" link - 16 Feb 2012 01:35
NewPage Button - 16 Feb 2012 01:26
MP3 Player - 16 Feb 2012 01:25
JavaScript Addition - 16 Feb 2012 01:14
iframe embed - 16 Feb 2012 01:08
Random Page - 18 May 2011 09:50
Redirect - 11 Feb 2010 10:00


Rate this solution

If you think this solution is useful — rate it up!

rating: +11+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License