Multicolor Fonts in the browser

Seemingly out of nowhere, big guys like Apple, Google, Microsoft, Mozilla and Adobe are proposing multicolor font formats, and rushing to have them implemented in browsers and OSes. This sudden interest is not so much fueled by typographers, designers or web developers, but by an unlikely group: teenagers. More specifically: teenagers who demand their communication […]

Using the :target pseudo-selector for alternative layouts

Sometimes I want to see all the images [of my site] on a grid [instead of the regular layout]. I could have created a PHP script that responded to a querystring. Or a small JavaScript. But instead I used the :target pseudo-selector. It’s very simple. Neat trick by Vasilis: give the root html element an […]

CSS `will-change` Property

#header { will-change: opacity; } Modern CSS renderers perform a number of complex optimizations in order to render webpages quickly and efficiently. Unfortunately, employing these optimizations often has a non-trivial start-up cost, which can have a negative impact on the responsiveness of a page. The will-change property defined in the CSS Will Change Module allows […]

HalfStyle: Style Half of a Character by CSS

Sparked by the question “Is it possible to apply CSS to half of a character?” on StackOverflow, HalfStyle was created: HalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually. Works on any dynamic text, or a single character, and is […]

Parallax Done Right

Parallax has become, for better or worse, an increasingly popular web trend. Done right, it feels awesome. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. A good refresher on how to do high performance animations Parallax Done Right → Related: High Performance Animations → 2D transform’s translate() vs […]