“Quotes” are used to highlight important texts in our website. They are generally present on almost every websites which could be in a form of a simple excerpt of an article, a short summary, a testimonial, citation or a blog comment that helps add flavor to the boring text flow.
THE DIFFERENCE: PULLQUOTES VS BLOCKQUOTES
If you think quotes are all the same, you got it wrong. Pullquotes are small passage of texts (could be a sentence or phrase) pulled out from the main text and strategically placed floating beside the main text to give it more emphasis than the rest of the texts.
Blockquotes, on the other hand, are larger selection of texts which are grabbed from external sources which are not yet mentioned in the article. Normally, they contain headings, lists, paragraphs and can be long in some cases. You may use [cite] to cite the source of the texts.
With CSS, quotations can be styled in a motley of ways to make them stand out. One way is to integrate brilliantly cut graphics to add vividness to the quotes. On the other hand, some designers choose to reinvent quotes with the pure magic of CSS alone – no images required. This technique absolutely requires creative manipulation of the code to achieve desired output. In this post, I will use both techniques to design simple to complex quotations that are visually good to the eye. I hope you all like it!
DESIGN INSPIRATIONS FOR YOUR BLOCKQUOTES
Design # 1 – Blockquote with Vertical Line Bar and Dot on Top
This blockquote uses two vertical line bars that are tweaked to overlap each other. Using the border-left property – one solid and one dotted, the vertical lines become possible without having to use an graphic on the left. Feel free to customize the color and thickness of the line bar. Check out the full code here.
Design # 2 – Blockquote with Side Ribbon Header
This blockquote was inspired by a post of another blogger whom I could not recall the name (sorry, but still thanks to him). This one-sided ribbon is a nice addition to emphasize the title of your quote.Check out the full code here.
Design # 3 – Blockquote with Stitched Sides
It’s literally pure CSS. Thanks to the border property of the box. Changing the border from default solid to “dashed”, it has done its magic here.Check out the full code here.
Design # 4 – Blockquote with Stitched Sides and Scissor on Top
This one obviously has an image – guess what? (the scissors). It was the same idea as the former design.Check out the full code here.
…more designs to come!