Robb has come out with some very cool ideas over the years, but wow, seeing CSS-only specular highlighting and holograms is such a neat trick 🤯 I immediately want to co-opt some of this for the logo on this site, though their write-up comes with a fairly clear caveat of "here be dragons" (see below). Still, I love that background-attachment: fixed is a major player here; that's a property which always felt powerful, but I rarely use. Robb shows how incredibly useful it may become!
(Also, definitely go read the original article on this, because the examples Robb has put together are infinitely more useful than the text, and they've included a really great breakdown of how all of the mixed-blend modes in CSS actually work 👍)
On the very clever use of a fixed background attachment:
Fortunately, there's a vintage CSS Level 1 property that can help with that; setting .specular to background-attachment: fixed means that, as the page scrolls, the gradient remains locked to the browser's viewport. This not only brings some much needed motion to our shader, but also means that we can very roughly simulate the changing view-angle without reaching for JavaScript.
On how specular mapping works:
Blending the gradient directly to the base layer will mean that the lighting will be totally uniform across the image. Aside from chromed surfaces, that doesn't happen too often in nature. To really sell the effect we want to have control over the areas of the image where light can fall and where it can't. To simulate this, we can use a predominately dark image to mask out our gradient. This technique of using a dark image to mask off areas of a lighter one is often known as a specular map.
Until now the examples have all used a greyscale specular map, but a full colour specular map can introduce new effects.
On why this is a great proof of concept, but probably shouldn't be used:
At the time of writing, blend modes in browsers are still pretty resource heavy. For more complex effects, with several layers of compositing, you will see a real performance hit. Add any CSS animations or transitions to the mix and it will really tank - particularly in Safari. [...] As great as these effects can look though, I think that for now this is very much a case of: just because you can, doesn't mean you should.
The final code used (sanitised for my own use):
<div class="shader">
<img src="image.jpg" alt="...">
<div class="shader__layer specular">
<div class="shader__layer mask"></div>
</div>
</div>
<style>
.shader {
position: relative;
overflow: hidden;
backface-visibility: hidden; /* to force GPU performance */
}
.shader__layer {
background: black;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: 100%;
background-position: center;
}
.specular {
mix-blend-mode: color-dodge;
background-attachment: fixed;
background-image: linear-gradient(180deg, black 20%, #3c5e6d 35%, #f4310e, #f58308 80%, black);
}
.mask {
mix-blend-mode: multiply;
background-image: url(/image.jpg);
}
</style>
