Menu

CSS

Clipping, Clipping, and More Clipping!

October 8th, 2019

There are so many things you can do with clipping paths. I’ve been exploring them for quite some time and have come up with different techniques and use cases for them — and I want to share my findings with you! I hope this will spark new ideas for fun things you can do with…

Some Hands-On with the HTML Dialog Element

October 7th, 2019

This is me looking at the HTML <dialog> element for the first time. I’ve been aware of it for a while, but haven’t taken it for a spin yet. It has some pretty cool and compelling features. I can’t decide for you if you should use it in production on your sites, but I’d think…

Introducing Sass Modules

October 7th, 2019

Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features. While the current @import rule allows you to pull in third-party packages, and split your Sass into manageable “partials,” it has a few limitations: @import is…

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…