How to animate “box-shadow” with silky smooth performance

How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance. There’s an easy way of mimicking the same effect, however, with minimal re-paints, that should let your animations run at …

Grid Style Sheets 2.0

GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout. Using Constraint CSS and GSS Selectors it’s really easy to, for example, make two elements have the same width: .container { &[width] == #elm[width]; } Next to …

Quantity Ordering With CSS

Here is your mission, should you choose to accept it: create a table of items. Each item should span a third of the content area, with the fourth item starting on a new row, much like floats. However, a particular item must always display the price at the end of the first row. Visually, we …

Targetting the OS X System Font in CSS

body { font-family: system-font, -webkit-system-font, -apple-system-font, “.SFNSDisplay-Regular”, HelveticaNeue, LucidaGrande; } On a fresh install of OS X 10.11 (El Capitan) there’s no San Francisco font installed. But it’s the system font, so how is this possible? Hence the sort of magic above to actually get it working. I Left My System Fonts in San Francisco …