Web Development by Solarise

The Solarise.dev Blog

Styled quotation Boxes

Blog archive Robin Metcalfe 29th August 2015

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 <blockquote> element

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

Backwards compatibility

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)

Technical notes

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">
        - Author

No additional images or javascript have been used. The "Quote mark" elements are ‘content’ properties in the ::before and ::after elements. This is a technique I often use, it’s widely supported.

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.

Author Image

About the author

Robin is the dedicated developer behind Solarise.dev. With years of experience in web development, he's committed to delivering high-quality solutions and ensuring websites run smoothly. Always eager to learn and adapt to the ever-changing digital landscape, Robin believes in the power of collaboration and sharing knowledge. Outside of coding, he enjoys diving into tech news and exploring new tools in the industry.

If you'd like to get in touch to discuss a project, or if you'd just like to ask a question, fill in the form below.

Get in touch

Send me a message and I'll get back to you as soon as possible. Ask me about anything - web development, project proposals or just say hi!

Please enable JavaScript in your browser to complete this form.

Solarise.dev Services

Maintenance Retainers

Min 3 hours per month, no contract

Project Planning

Get in touch to discuss your project details


Face-to-face chats. Solve your problems!