Inspired by Justin Sepulveda’s CSS Logos and this post on the new Design Informer Forums, I decided to try my hand at creating the Olympic Rings with just CSS and HTML. I realize it is simple, but it was fun to figure out the layering and how to do it with just a few elements. After another helpful suggestion from Justin, I changed the measurements to use ems so it could be resized easily. Try sliding the jQuery UI slider back and forth to change the size of the logo!
Now that you are all excited, click on through to view the CSS logo! Remember, you need to use a modern browser that supports border-radius. This will look really funny in IE < 8! If it doesn’t look like the picture below, try a different browser!
Comments