Pages about CSS

Monochromey CSS

Using a combination of sepia(), hue-rotate() and possibly other CSS filters, it's possible to make any photo appear monochromatic, with the hue of your choice. I made a CodePen "pen" to demonstrate.

Using Source Maps with CSS

When CSS or JavaScript is minified, there is a mechanism called Source Maps that can help you inspect the original code directly in the browser. Sometimes it requires some extra configuration.

FizzBuzz in CSS

Creating a FizzBuzz solution using only CSS is probably impossible, but with just a little HTML added, it's perfectly doable, using a combination of CSS counters and the nth-child() pseudo-class selector.

"Hello, World!" in CSS

A "Hello, World!" program in CSS can be written by setting the "Hello, World!" text as the content of the ::before pseudo-element of the html element.

What is Device Pixel Ratio?

The device pixel ratio is the ratio between physical pixels and logical pixels on a high-resolution screen. Different devices report different values, including non-integer ones. You should use media queries to handle varying screen densities correctly.