Pure CSS Mobiata-M

Hey everyone,

Thanks for reading our new blog! We’re having lots of fun and doing lots of awesome things here at Mobiata. We’ve just launched the FlightTrackFlightBoard add-on, which brings a beautiful Charles de Gaulle-style flight board to your iPad, and we’re working on some new partner apps as well.

In between making great apps, we do also take some time for fun. Check out this recent masterpiece from our summer engineering intern, Ben Asher. After hearing from our engineer Eric Garcia about CSS border hacks that let one do all sorts of vector drawing in CSS, Ben thought it would be cool to see if he could make the Mobiata logo in pure CSS – no images. Check out what he came up with!

Ben says:

First, I started with circle background. I used two divs with different background colors, one inside of the other, and they both have border-radii of half of the width and height (which are the same) to make the circles. I found a great tutorial on how to make css border-radius work in all the major browsers without images here: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers. I used the same technique for the humps on the m, using one circle to punch-out another, and I added another rectangular div to hide the bottom half of the humps.

The vertical lines for the m are just rectangular divs. Keep in mind that everything you see here has the position property set to absolute.

Next are the arrows, which are a bit tricky. There are two triangles, which I made using the css border property. You can see how this works here: CSS tutorial. There is an outer triangle and a smaller inner triangle, which punches-out a hole in the outer triangle to create the arrow shape (similar to how I punched out the m hump shapes and the background circle shape). Then, I added two more triangles, one to each end of the arrow shape, which made the ends flat at a 45º angle. Basically, I’m using triangles to hide the ends of the arrow by making them the same color as the background.