Contents tagged with ‘CSS’

  1. Another Lorenz Attractor

    Lorenz attractors are kind of awesome, so I took another stab at them. This experiment does use JavaScript, because I couldn’t think of a good way of showing the animation without it. I’m just absolutely positioning div elements along the x and y axes, and faking the z axis by altering the size. Nothing to see here, move along.

  2. Lorenz Attractor

    Another silly experiment, this time with CSS shadows, to render a Lorenz attractor. There’s no JavaScript involved, everything is done with CSS (generated by the Sass preprocessor). You really don’t want to see the source code for this one. It’s a huge text-shadow property with the coordinates for each of the 5000 iterations of the equations that Sass ran.

  3. Animated Cuboids

    Silly experiment with 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 the Sass preprocessor). I had to use some trigonometry to rotate the cuboids in the way that I wanted. If you want to know how to calculate sines, cosines and tangents in Sass, check out my article Trigonometry In Sass.

  4. Trigonometry In Sass

    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…

  5. GitHub Ribbon Using CSS Transforms

    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: