If you look above this text, you can see that the header of this blog has a sloped edge. It’s one of my favorite things about this new design. The technique I used has a consistent angle regardless of screen size, can show background images and only needs one HTML element and no pseudo elements.…
CSS hexadecimal colors with transparency, a conversion tool
In both Chrome and Firefox, you can now use hexadecimal notation to describe semitransparent colors, by adding an extra pair of digits to the end of a hexadecimal notation.
This hexadecimal #rrggbbaa notation is pretty useful and saves you from looking up the conversion from hexadecimal to the 0-255 range that rgba() needs. However, doing math in hexadecimal notation (counting from 0 to F) isn’t something I, and I imagine many others, are quite adapt at. Say you want something at 50% transparent, how much is that in Hex? It’s 80! That’s not very intuitive.
It’s pretty similar to how IE’s in the past allowed you to do transparency, except they used ARGB, with the Alpha part at the beginning. Back in 2010 I wrote an article that included a conversion tool from rgba() to ARGB notation, useful for ancient versions of IE. You probably shouldn’t use that anymore. I figure, why not do a remix and update it for some rgba() to #rgba conversion!
Convert to and from rgba() and #rgba
This notation works with both 8 digits and 4 digits (shorthand notation) so #ffffff88 and #fff8 both correspond to rgba(255,255,255,0.53); Quite a neat trick that works in Chrome from version 52 onwards (and Opera version 39, as they are both based on Chromium), Firefox 49 onwards and Safari 9.1 onwards. I could not find anything about Edge supporting it, or having support planned.
So, a useful extra way of defining semitransparent colors. I imagine, when browser support lets me, I’ll use this mostly in places where I already have #rgb notation and want to add opacity. For new colors, rgba() is much easier to reason in.
My goal with Polypane is improving the workflow for developers and designers. The main focus is of course developing an excellent browser for developers and designers, but I’m also developing online tools that help out during development. Two of them online now are a CSS specificity calculator, and a color contrast checker. Both of them…
Yesterday, I gave a ⚡ lightning talk on design tokens at the @ReactAmsterdam meetup. I’ve been to a few React Amsterdam meetups and there’s always a really good vibe so I was really happy I got to do a lightning talk on a subject I care about. There were about 200 people in the room…