Block quotes and citations are always something useful, and sometimes, they just pass through our eyes as if they were part of the text.
You can create a cool style for them using CSS, like this:
This is another very cool quote from Albert Einstein that I think Google Guys should think about, but this time, with a link to the author reference:
How to to this?
First of all, let's build the HTML structure:
<blockquote class="citation-container">
<div class="citation-content">The quote message.</div>
<cite class="citation-author">
<a href="link" target="_blank" rel="noopener" rel="noopener">author</a>
</cite>
</blockquote>
Now, let's take care of the CSS:
blockquote.citation-container{
border-left: 0.5em solid #DDD;
margin: 1.5em 0 1.5em 1.5em;
padding: .75em .5em .75em 1em;
background: #fff;
box-shadow: 0 0 6px rgba(0,0,0,0.5);
margin-right: 40px;
font-family: Arial, Tahome, sans-serif;
}
blockquote.citation-container cite{
display: block;
font-size: 0.8em;
}
blockquote.citation-container cite a{
text-decoration: none !important;
color: #0090D2;
}
And now, we can add the decoration element:
blockquote.citation-container:before{
display: block;
height: 0;
content: "“";
margin-left: -.95em;
font: italic 400%/1 Cochin,Georgia,"Times New Roman", serif;
color: #999;
}
But...we can go further!
Why not customize it a little bit more? What about colors and icons?
Just by adding a class "red" to the blockquote element, we can use this:
.citation-container.red{
border-color: rgb(245, 113, 113);
box-shadow: 0 0 6px rgba(253, 0, 0, 0.5);
background-color: rgb(255, 210, 210);
}
.citation-container.red:before{
content: "!";
color: rgb(245, 113, 113);
line-height: 50px;
margin-left: -56px;
}
And the result would be
.citation-container.yellow{
border-color: rgb(243, 243, 62);
box-shadow: 0 0 6px rgba(169, 184, 0, 0.5);
background-color: rgb(255, 255, 207);
}
.citation-container.yellow:before{
content: "»";
color: rgb(243, 243, 62);
text-shadow: 0px 0px 3px #444;
line-height: 30px;
font-size: 4em;
margin-left: -50px;
}
.citation-container.green{
border-color: rgb(155, 255, 171);
box-shadow: 0 0 6px rgba(7, 170, 0, 0.5);
background-color: rgb(236, 253, 238);
}
.citation-container.green:before{
content: "✓";
color: rgb(155, 255, 171);
text-shadow: 0px 0px 3px #444;
line-height: 40px;
font-size: 2.2em;
margin-left: -58px;
}
Cool thing, right?
Now go ahead and customize yours!
