Breakout Buttons

October 4th, 2019

Andy covers a technique where a semantic <button> is used within a card component, but really, the whole card is clickable. The trick is to put a pseudo-element that goes beyond the button, covering the entire card. The tradeoff is that the pseudo-element sits on top of the text, so text selection is hampered a…

Adaptive Photo Layout with Flexbox

October 3rd, 2019

Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere. The solution is not only lightweight but also quite simple. We’ll be using an unordered list of…

Zero hands up.

October 2nd, 2019

Asked an entire room full of webdevs yesterday if any of them knew that FF/Chrome/Opera/Brave/etc. for iOS weren’t allowed to compete on engine quality. Zero hands up. — Alex Russell (@slightlylate) September 25, 2019 It’s worth making this clear then. On iOS, the only browser engine is WebKit. There are other browsers, but they can’t…

The Many Ways to Link Up Shapes and Images with HTML and CSS

October 1st, 2019

Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Or you have a large uniquely shaped logo where you only want…

Enhancing The Clickable Area Size

October 1st, 2019

Here’s a great post by Ahmad Shadeed on making sure that clickable areas in our interfaces are, well, clickable. He writes about making sure that links, buttons and other elements meet accessibility standards for both touch and mouse, too. I particularly like the section where Ahmad writes about making a fake circle around an element…