Menu

CSS

Bidirectional Horizontal Rules in CSS

October 25th, 2019

Say you have a <blockquote> and the design calls for a thick border along the left side. Well, you might not necessarily mean left side, but actually mean on the side of the start of the text. That’s exactly what CSS logical properties are meant to address, and Hussein Al Hammad has a nice article…

Designing accessible color systems

October 21st, 2019

The team at Stripe explores how they’re refining their color palette to make it more accessible and legible for users across all their products and interfaces. Not only that but the team built a wonderful and yet entirely bonkers app for figuring out the ideal range of colors that they needed. We built a web…

Weekly Platform News: CSS column-span Property, ADA applies to Websites, Auto-generated Image Descriptions

October 17th, 2019

In this week’s roundup: multi-column layouts gain wide support, the ADA means more A11y for retailers, and Google is doing something about all the empty image alt attributes in the wild. The CSS column-span property will soon be widely supported The CSS column-span property, which has been supported in Chrome and Safari since 2010 (and…

Weaving One Element Over and Under Another Element

October 14th, 2019

In this post, we’re going to use CSS superpowers to create a visual effect where two elements overlap and weave together. The epiphany for this design came during a short burst of spiritual inquisitiveness where I ended up at The Bible Project’s website. They make really cool animations, and I mean, really cool animations. My…

Patterns for Practical CSS Custom Properties Use

October 9th, 2019

I’ve been playing around with CSS Custom Properties to discover their power since browser support is finally at a place where we can use them in our production code. I’ve been using them in a number different ways and I’d love for you to get as excited about them as I am. They are so…

Let’s Not Forget About Container Queries

October 9th, 2019

Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn’t write as many global media queries based on page size. That’s because we’re actually trying to control a more scoped container, and the only reason we use media…

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…