CSS Category

Monochromey CSS

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.

Original photo by David T, Unsplash

Photo by David T on Unsplash

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.

img {
    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.

Posted by Anders Tornblad on Category CSS Labels
Tweet this

Using Source Maps with CSS

StackOverflow user Rob had a problem inspecting his SASS stylesheets after having them preprocessed by Codekit.

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 a .map file, that the browser automatically uses. The principle of Source Maps is well known for JavaScript developers, but most people don't know that it is possible for CSS preprocessors too.

More information is available in the Codekit documentation for SASS.

Posted by Anders Tornblad on Category CSS Labels
Tweet this

Revisiting CssFlip

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 some JavaScript to let a user flip through pages in a book. The transitions are declared in CSS and are triggered by JavaScript. Pages on the left have their transform-origin set to their right edge, which is aligned to the 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.

#book {
    perspective: 2000px;
    transform-style: preserve-3d;
}
.page {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin-left: 50%;
    overflow: hidden;
    transform-style: flat;
    backface-visibility: hidden;
    transition: none;
    transform: none;
}
.page:first-child {
    margin-left: 0px;
    transform-origin: right center;
}
.page:last-child {
    transform-origin: left center;
}
.currentFold.forward > .page:last-child {
    transform: rotateY(0deg);
}
.nextFold.forward > .page:first-child {
    transform: rotateY(179.9deg);
}
.currentFold.backward > .page:first-child {
    transform: rotateY(0deg);
}
.nextFold.backward > .page:last-child {
    transform: rotateY(-179.9deg);
}
.folding .page {
    transition: all 1s ease-in-out;
}
.folding > .currentFold.forward > .page:last-child {
    transform: rotateY(-179.9deg);
}
.folding > .nextFold.forward > .page:first-child {
    transform: translateZ(1px) rotateY(0deg);
}
.folding > .currentFold.backward > .page:first-child {
    transform: rotateY(179.9deg);
}
.folding > .nextFold.backward > .page:last-child {
    transform: translateZ(1px) rotateY(0deg);
}

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.

Microsoft Edge behaving badly 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.

Posted by Anders Tornblad on Category CSS Labels
Tweet this