Tag: shapes

I Give You My CSS3 Heart

I made this little heart shape with CSS3, which I’ve been playing around with lately as a way of rendering rounded corners in the latest version of Subscription Options. Turns out there’s loads you can do with CSS3!

Here’s the (admittedly complex) code that’s used to render the above:

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: url("http://files.digitalcortex.net/images/header/rotate.php"); // this makes the colour the same as my header image - but could be any HTML colour instead
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

If you’re interested in playing around with CSS3 shapes like the above, loads of them are are available at CSS Tricks.

Nature in Numbers

Saw something pretty cool on Boing Boing just now – a short film demonstrating how mathematic principles manifest in nature. It’s something you’ll all have heard about, but the below actually shows you the background, and does so in a really lovely way.

Top marks to filmmaker Cristobal Vila for making Fibonacci, Golden and Angle Ratios, Delaunay Triangulation and Voronoi Tessellations look so darn good.

His website goes further into exploring these ideas:

This section is meant to be a complement to the animation, in order to better understand the theoretical basis that you can find behind the sequences. It was also, more or less, the appearance of the screenplay in the days that I was planning this project.

And goes on to provide great explanations like this:

  • We add a first red seed
  • Turn 137.5º
  • Add a second green color seed and make the previous traveling to the center.
  • Turn other 137.5º
  • Add a third ocher seed and make the previous traveling to the center, to stay side by side with the first one
  • Turn other 137.5º…
  • …and so on, seed after seed, we will obtain gradually a kind of distributions like the ones you have in the following figures

This leads to the characteristic structure in which all seeds are arranged into a sunflower, which is as compact as possible. We have always said: nature is wise 🙂

Lovely.