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.
You can download FromScratch 1.2.0 from the site Fromscratch.rocks. …
We can define easing curves for the transitions and animations on our websites to give them a more natural and subtle feel. But it’s not just animations that benefit from easing curves. Any time there is a transition between two states an easing curve will make that feel more natural and less harsh. For animations and…