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


Rate this solution

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

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