Let's say you have a photo that you want to show somewhere on a web page. The photo is rich in color, but you need to follow a strict color scheme, maybe because of brand guidelines, or just because you like certain colors more than others.
The first temptation might be to open the photo in your favorite image editor software (mine is Paint.NET for the PC) and fiddle around with functions until the photo looks the way you want it.
Then, after a while, the color scheme changes for some reason. Maybe the higher-ups emerge from a meeting room after a rebranding workshop, or maybe you just get tired of mauve and decide that perriwinkle blue is your new favorite color. You discover that your site has hundreds of photos that all need to be re-edited. To avoid this, you should instead serve the original photo as it is, and let CSS filters do the trick for you.
If you go for the grayscale filter, you get a photo that is all grays. If you want a completely desaturated image, this works fine. But if you are aiming for a monochromatic image of a certain hue, grayscale is a dead end. Instead, start by applying the sepia filter, which sets the hue of every pixel of the image to somewhere around 60°. Then you can add another filter to add or subtract to the hue.
filter: sepia() hue-rotate(123deg);
I made a Pen to demonstrate the effect. Drag the hue selector to the desired color and copy the generated CSS. If you hold down your finger (or the mouse button) on the image, the filter effect is cancelled to reveal the original image. The image itself is a random Unsplash image with nature, water as the query.
Having set the Output Style to "Compressed", the resulting CSS stylesheets were optimized and minified, making it almost impossible to trace
the CSS back to the original SASS files.
Checking the Create a Source Map setting allowed him to help Google Chrome DevTools map the compiled CSS to the original SASS files, using
know that it is possible for CSS preprocessors too.
When I first started experimenting with modern Web APIs, 3D transforms was
still an experimental feature. Browser support was limited and shaky, and required vendor prefixes. These days
support is much better, but there are still a lot of quirks when it comes to browser implementation.
Back in 2011, I wrote a demo called CSS Page Flip, using a combination of CSS and
horizontal center of the screen, while pages on the right have their transform-origin set to their left edge. By
applying backface-visibility: hidden, I can then rotate pages along the Y axis for a simple, but nice, effect.
It took a lot of fiddling to find good values for rotateY(). Almost every new version of Webkit broke
my experiment, but I eventually settled on a combination of 0deg, -180deg and 180deg.
A couple of years later, the major browsers started supporting 3D transforms, even without vendor prefixes.
Unfortunately all of them have different ideas about how to transition from 180deg or -180deg to 0deg.
Finally I thought of forcing the browsers to do what I want by having -179.9deg and 179.9deg. This works
fine, unless for (of course) IE and Edge. IE doesn't even support 3D transforms correctly without prefix,
and for some reason Edge treats the transformation matrix differently than the other browsers, completely
breaking part of the animation.
Apart from the page flipping, the demo also has an automatic page layout mechanism that reflows the chapters
and the text blocks when needed. In the original demo, the contents of the book was actually a detailed
description of how the demo was made, but unfortunately the original content was lost at some point. Now it
is my personal story instead. Enjoy it at demo.atornblad.se/cssflip/
At some point in the future, I will make an effort to bring the solution forward into the 2016 state of
mainstream browsers, including the following:
Fix scroll wheel flipping in Firefox
Handle chapter navigation using history.pushState()
Add some interactive stuff on some of the pages
Some effort of fixing the weird behavior in Microsoft Edge
Minimal effort of making it work in Microsoft IE
When that is done, I might open-source the whole thing on GitHub.