Skip to main content

Solar system simplified (HTML + LESS)

Summer has arrived. I can’t forget those summer nights at my village when I was young, looking at a bright night sky with a lot of glittering stars.

The infinite of the sky made me small, leaving my mind at a point I thought about anything and everything at the same time, braindead, stunned, relaxed.

I looked at a whole sky without paying attention to any specific star, seeing satellites crossing the sky in a “perfect” straight line. I loved those nights as much as I loved the universe although I don’t know as much I’d like about it.

(more…)

CSS gears project

Since a few weeks ago I wanted to design a gear using only CSS. I wanted to use these gears in a future project but after finishing them, I think this is not going to be as easy as I expected ?

As I have said, this is just a CSS gear, not Javascript, nothing else, just CSS and HTML (actually is Less). Every gear is composed of 3 parts:

  • The colored part of the gear
  • Four bars rotated every 45 degrees to build teeth
  • A smaller centered circle that simulates the hole of the gear.

Every gear is created using this less mixin and the HTML code below:

You can take a look to the final result below. Of course you are free to fork this code or use it wherever you want.

See the Pen CSS Gears by Adrián Gómez (@adgllorente) on CodePen.0

Adrián G. is Stephen Fry proof thanks to caching by WP Super Cache