A commonly used feature on sites is the inclusion of quotes - either from clients, authors, customers. This helps bring a more personal touch to a specific page, and gives a visitor a great indiciation of your service’s popularity.
See the Pen Styled Quotation Boxes by Robin Metcalfe (@solarisedesign) on CodePen.
I wanted to create a styled version of the traditional HTML
I also wanted some nice background elements, and also felt that the inclusion of images should be avoided where possible, as it adds to asset overhead, and over-complicates what can otherwise be a very simple thing in modern CSS3 development.
This is a fairly straightforward little project, but a great demonstration of some of the subtle, but powerful effects achievable with CSS
This demo should funciton well across all browsers - degrading cleanly to a more basic layout/appearance on browsers which don’t support CSS3 features (list)
I wanted to build this in a way that used the fewest possible HTML semantic elements. I’m a firm believe in keeping HTML markup as lean as possible, not introducing any extra structure unless absolutely necessary.
A single quote box consists of the following HTML
<div class="quotes"> <blockquote> <p>Quotation</p> <footer> - Author </footer> </blockquote> </div>
I’ve also thrown in a few pieces of flexbox functionality to properly align the quotation boxes. This means that they will dynamically scale and reposition based on the viewport width/height.
And, of course, the use of flexbox means that the blockquote elements can all have matching heights (Non-developers/designers likely won’t understand the frustration caused by hearing the query “Can all these elements be the same height?” in the pre-CSS3 days!)
You’ll notice I’ve also defined a media query for smaller viewports which adjusts the flex direction to column, so that the quotes are always readable.