Skip to main content

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

Avoid idling in Openshift with UptimeRobot

Yesterday I prepared a presentation for my coworkers comparing two PaaS services, Heroku and OpenShift, and now, an idea has come to my mind.

If this is the first time you’ve heard about a PaaS I would tell you that a PaaS is a platform that abstracts you from all infrastructure needs to host an application and also offers some extras like NodeJS, Python, MongoDB, MySQL, etc. If this explanation is not enough you can read what Tom’s IT wrote about it.

These services usually have free plans where applications are idling if they not receive a request in a period of time, for example:

  • Heroku: Idling on 30 minutes of inactivity (6 hours sleeping daily, so bad)
  • Openshift: Idling o 24 hours of inactivity (App never sleeps, so good)

Reading above, please migrate your services to Openshift because it has a 24 hours idling and not sleep time on its free plan.

If you want to avoid application idling but you don’t want to hear about paying, (I would recommend you to pay a plan or buy a cheaper host like OVH) you can try UptimeRobot.

Read More

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