FABLED.DAY - creating short pullquotes within your text

Creating Pullquotes

You can view a live demonstration of this snippet on Codepen, and even play with it a bit. The version I've provided fits a very sedate aesthetic but should be easily customizable for yours...

Pullquotes are those little snippets of text, usually in magazines and newspapers (online or off) giving a short bit of the article in larger font for emphasis. There are some reasons you might want to use traditional pullquotes (ie, those which simply pull a quote from the article) on your site.

Mostly, though, pullquotes online might be used to add extra quotations, with links to their sources directly following. Either is possible really, because it just uses a simple blockquote format. Well, that is, it uses a simple blockquote format along with the <small> tag just before the </blockquote> tag. This acts as a simple container for the quote source. I believe this works better than sticking a whole <div> in there.

This example and format assumes the quote is relatively short and small. I will be uploading a second version soon, more adapted to larger quotations. You may be able to play with this one a bit and figure out ways of creating larger versions, but for now, keep it short and sweet.

CSS

You'll probably want to change the colors and play with things a bit, since your site likely looks completely different than the demonstration here, which shows exactly what these colors look like. You can achieve some interesting effects by adding shadows as well, but those you can try for yourself...

/* heart of the matter - styling the blockquote itself. the below affects the appearance of everything within the box containing the quote */
	blockquote.pull {
		background-color: #e1d2a6;
		padding: 2em 2em 2em 2em;
		padding-top: 2.2em;
		text-align: justify;
		font-size: 1.2em;
		border: 4px solid #c2a77c;
		margin: 0em 0.8em 0.8em 0em; /* because i'm floating the quote to the left, i've added a margin to every side except that one */
		width: 20%;
		border-radius: 1em;
		color: #876c41;
		position: relative;
		float: left; /* this can be changed, but be sure to change the corresponding margins above such that there's no margin on the right (and a 0.8em margin on the left) if you do that */
	}
	
	/* the below two items just style how links appear within your blockquote, including within the source/citation. useful if you're linking to another page, as i've done here, as you can see */
	blockquote.pull a {
		text-decoration: none;
		border-bottom: 1px solid #c2a77c;
		color: #876c41;
		border-radius: 3px;
		transition: ease 1s all;
	}
	blockquote.pull a:hover {
		border: 0px;
		background-color: #c2a77c;
	}
	
	/* this section concerns the quotation marks resting in the corners of the quote container. trebuchet ms works well for them, but of course, they can be any color you want. the size can change, but that requires so much fiddling with margins that it frankly doesn't seem worth it... */
	blockquote.pull::before,
	blockquote.pull::after {
		font-family: trebuchet ms;
		font-size: 4em;
		color: #c2a77c;
		position: absolute;
	}
	
	blockquote.pull::before {
		content: "“";
		top: -0.1em;
		left: 0em;
	}
	
	blockquote.pull::after {
		content: "”";
		bottom: -0.6em;
		right: 0.1em;
	}
	
	/* i am here using the small tag within the blockquote tag as a signifier for the citation or source of the pullquote, whatever you want to call it. this styles that. */
	blockquote.pull small {
		text-align: right;
		font-size: 0.7em;
		display: block; /* important */
		font-style: italic;
		font-weight: bold;
		margin: 0.5em 0em 0em 0em;
		color: #876c41;
	}
	
	/* this adds a dash before the source of the quote, preventing you from having to do so manually with each quote */
	blockquote.pull small::before {
		content: "- ";
	}

HTML

Rather straightforward, isn't it? the only really custom feature is the addition of the <small> tag as a way of showing the source of the pullquote, and perhaps even linking to it. The below example quotes Mary Wollstonecraft's Vindication of the Rights of Woman from 1792. In this example, the pullquote floats to the left and is 20% of the screen width; this can be adjusted within the CSS as you likely saw above. In either case, please put it before the text content you'd like it to enfold...

<!-- this is a blockquote, used as it is intended for once -->
	<blockquote class="pull">
	<!-- and below, you will place your quote -->
	My own sex, I hope, will excuse me, if I treat them like rational creatures, instead of flattering their fascinating graces, and viewing them as if they were in a state of perpetual childhood, unable to stand alone.
	<!-- the following tag denotes the source of the quote in smaller text. you can actually make the text larger or smaller in the css, but it's necessary to leave the <small> tag in place for formatting reasons, dears -->><small>Mary Wollstonecraft. <a href="https://sacred-texts.com/wmn/vind.txt">Vindication of the Rights of Woman. 1792.</a></small>
	</blockquote>
	<!-- Below, my dears, please place the text you would like to follow the pullquote, which will wrap around it, hopefully with grace... -->