Skip to main content

CSS

  • Lorenz Attractor with CSS

    Drawing a Lorenz attractor with CSS shadows (generated by Sass), no JavaScript involved. You really don’t want to see the resulting CSS though. It’s a huge text-shadow property with the coordinates for each of the 5000 iterations of the equations that Sass ran.

  • Animated Cuboids with CSS

    Silly use of CSS transforms and animations to have a bunch of cuboids rotate in a certain pattern. There’s no JavaScript involved, everything is done with CSS (generated by Sass).

  • Trigonometry in Sass

    · 4 minute read

    Have you ever found yourself needing trigonometric functions like sines, cosines and tangents when writing your Sass stylesheets? Ok, probably not, but the day may come, and you’ll be glad you read this. Sass provides mathematical operators like addition and multiplication, and basic language constructs like conditionals and loops, but not much more. I’ve always relied on built-in methods, like Math.sin and Math.cos in JavaScript or Ruby, for these kinds of complex calculations… Is there a way to approximate a sine or a cosine iteratively? It turns out there are plenty.

  • GitHub Ribbon Using CSS Transforms

    · 5 minute read

    Do you know when Tom Preston-Werner released the ‘Fork me on GitHub’ ribbons that you often see on websites for open-source projects? It was December 2008! Man I feel old… I like the idea behind the ribbon. It’s an easy way of telling your users that this software is open-source, and that there’s a repo available for them to browse and fork. Using an image for the ribbon though? I don’t like that at all, for multiple reasons: Changing things like the font or the colors of the ribbon is really inconvenient, as it forces you to fire up an image editor. Including this image on your page means an additional request, and about 8KB of payload. You have to be careful with the positioning of the image, as it’s a pretty big square, and you don’t want it to block part of your site’s navigation. You have to think about generating and serving a high-definition version if you don’t want your ribbon to look all pixelated on HiDPI devices.