{"id":16329,"date":"2013-01-29T23:01:09","date_gmt":"2013-01-29T15:01:09","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16329"},"modified":"2023-04-06T19:08:32","modified_gmt":"2023-04-06T11:08:32","slug":"stylish-blockquotes-pullquotes","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/stylish-blockquotes-pullquotes\/","title":{"rendered":"Stylish Blockquotes and Pull Quotes: Design Tips and Examples"},"content":{"rendered":"

There are plenty of examples in web typography where block quotes fit perfectly into your layout. When you need to express dialogue or repeat a quotation from another source<\/strong> this is the perfect HTML style. But strangely there aren\u2019t as many professional examples online where you can look into for inspiration.<\/p>\n

I want to dedicate today\u2019s post to look at how you can create stylish blockquotes and pull quotes<\/strong>.<\/p>\n

As a web designer, you have to consider webpage content as a crucial factor<\/strong> in selling your domain. Creating a stylish look to your blog posts and pages will keep readers hooked for longer.<\/p>\n

There is a handful of differences between these quotation styles and we should examine them closer <\/strong>in order to fully understand these modern design trends.<\/p>\n

It\u2019s not required to understand very much about HTML5 or CSS3<\/a>, but having some background knowledge in web design will make this process a lot easier. And feel free to emulate many of these styles in your own layouts!<\/p>\n

Diving Into Semantics<\/h2>\n

Before we look into CSS styles we should first go over the differences between blockquotes and pull quotes. There is a small collection of different tags you can use in your markup to denote these page elements.<\/p>\n

Blockquotes<\/h3>\n

When using the HTML5 blockquote tag this should represent a full block of text \u2013 a paragraph or possibly a few paragraphs. These usually span the whole width of your text<\/strong> and will appear much bigger than normal.<\/p>\n

Blockquotes contain quoted text from any external reference<\/strong>, most commonly other websites or blog posts. But you could quote text from print or even digital media, like a movie or TV show.<\/p>\n

Pull quotes<\/h3>\n

Pull quotes are aligned off to the side of your page in-between content sections. There is no specific pullquote tag in HTML5, so the semantics are not exactly formal<\/strong>.<\/p>\n

But the most typical use of pull quotes is to copy text which is already found somewhere in the document. This helps emphasize important phrases<\/strong> and breaks up the typical page flow<\/strong>.<\/p>\n

New HTML5 Blockquote Rules<\/h3>\n

With all previous HTML standards the blockquote element was a root element which contained only semantic markup tags. These may be <p><\/code>, <ul><\/code>, <div><\/code>, or other block-line elements. This typically would mean that blockquotes could only be used for larger quotations of text.<\/p>\n

However the new HTML5 blockquote specs<\/a> specifically state that \u201cone does not have to use p elements inside blockquote elements\u201d<\/em>. This makes constructing your HTML so much easier since we don\u2019t need to rely on older, more confusing coding standards<\/strong>. Just drop your text into the <blockquote><\/code> tag and you\u2019re good to go.<\/p>\n

Another typical addition is the cite<\/strong> attribute on blockquotes. You can set a unique URL value<\/strong> which contains the text you\u2019re quoting. This isn\u2019t a bad option to add into your code, but there are alternatives which may be more user-friendly.<\/p>\n

For example you can add some text directly underneath the blockquote<\/strong> and link to the article in-text. In this scenario your readers also have the opportunity to trace the quote back to its original source<\/strong>.<\/p>\n

\"First<\/a><\/figure>\n

Inline Quotations<\/h3>\n

Pull quotes could be considered inline quotes as they are commonly found floating to the left or right side of your page content. Articles use these inline pull quotes (or lift-out quotes) to display related content from the article<\/strong>.<\/p>\n

A smaller HTML5 <q> tag<\/a> can be used to wrap these pull quotes, although this element is often used for quotations inside your paragraphs. I rarely ever see web developers using the <q><\/code> tag because it\u2019s very clunky within markup<\/strong>.<\/p>\n

I would honestly recommend setting up custom styles <\/strong>for your pull quotes and wrapping them inside a div, span, or even blockquote elements<\/strong>.<\/p>\n

\"Pull-Quote<\/a><\/figure>\n

My example above illustrates a really simple pull-quote. We can style a .pull<\/strong> class onto any typical blockquote element which is then floated to the right. You can spruce up the styles even more using quotation marks and italicized text.<\/p>\n

Styling Full CSS Blockquotes<\/h2>\n

Let\u2019s take a look at some basic examples I\u2019ve created using CSS properties. Blockquotes are so interesting because there are dozens of unique styles to follow. The typical inline quote is a bit more subtle, since you can blend this text into your main page content.<\/p>\n

\"Blockquote<\/a><\/figure>\n

The example above uses a default block-style quote with attribution towards the top. You can place a character reference or web link connecting to your quoted text. I have added a text shadow effect to enhance the viewing a bit more.<\/p>\n

This blockquote styling is a whole lot different than typical default properties. You have freedom to copy over my codes and edit the styles to suit your need.<\/p>\n

The source attribution can also be moved below the quote, if you think that looks better. Fluidity is one key aspect to creating workable blockquotes which also look nice on a monitor.<\/p>\n

Using BG Image Quotes<\/h3>\n

One other popular trend for blockquotes is to add your own CSS background images for quotation marks. Since you can\u2019t predict the height of these quotes you\u2019ll generally create two different images and rotate one of the quotation marks upside-down.<\/p>\n

\"Blockquote<\/a><\/figure>\n

In my example we\u2019re using another blockquote with a special class .bq3<\/code>. I\u2019m using a paragraph element containing the full quoted text so that our bottom quotation mark will expand vertically.<\/p>\n

The premise is to use a non-repeating background image on the blockquote element in the top left corner. Then on the inner paragraph element, add another non-repeating background image to the bottom right corner. Sprinkle on some extra padding and we\u2019ve got a really nice looking blockquote styled for any page layout!<\/p>\n

Pull-Quotes that Stand Out<\/h2>\n

For my last bit of code we can create a totally new set of colored inline pull-quotes. This internal blockquote element is floating onto the left side, and I\u2019ve created a darker box color scheme contrasting the paragraph text. This will stand out as you\u2019re skimming through page content.<\/p>\n

\"open<\/a><\/figure>\n

You can ideally use any matching color scheme which follows your layout. Pull-quotes are unique in that they can fall anywhere along the page copy and still look really elegant<\/strong>.<\/p>\n

But when you add these extra background effects with rounded corners, you\u2019ll find that visitors are much more receptive to reading instead of skimming<\/strong> articles.<\/p>\n

You can create something very similar for your own designs and even add background images, if you like. The possibilities are endless and require careful consideration before making any first move. But take these CSS examples as a starting point and proceed jumping in and coding your own pieces!<\/p>\n

Further Reading<\/h2>\n