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.
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.
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.
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!