Logos Built in CSS

CSS3 Really Rocks!

So, you've seen them all before. Well, maybe you have and haven't realized that that's what's going on, but a lot of companies started converting their logos into pure CSS. That's right, no more images. I have been thinking about doing it for my company, and then I came across this article, and thought to myself - now's the time.

Find Your NET project logo

Okay, if you are unfamiliar with my company, it is Find Your NET, and it offers pretty sweet deals on web programming and hosting and... well, I would run out of digital ink if I was to list it all. Here's the logo of it as an image, and on the right is the code for the CSS version of it. The CSS for this is way too tremendous, so I will just list the main container, the div child CSS and one of the first rings here, but feel free to view the code of this page to see the rest.

Not quite on the topic...

Sorry for getting off the topic for a moment, but I am currently doing a website for one of my clients and I just had to do it for myself (since it's not in their request). A logo that is animated in CSS. Seems like fun and it only took few minutes to build. Yay, I love it. :)

<div id="logo-fyn-gradient">
    <div id="logo-outside-ring"></div>
    <div id="logo-inside-ring"></div>
    <div id="glass-outside-ring"></div>
    <div id="glass-inside-ring"></div>
    <div id="glass-reflect"></div>
    <div id="glass-reflect-cover"></div>
    <div id="glass-handle"></div>
</div>

<style>
	#logo-fyn-gradient {
		background-color: #fff;
		width: 300px;
		height: 300px;
		position:relative;
	}
	#logo-fyn-gradient div {
		position: absolute;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		-ms-border-radius: 100%;
		-o-border-radius: 100%;
		border-radius: 100%;
	}
  #logo-fyn-gradient div#logo-outside-ring {
		width:240px;
		height:240px;
		top:20px;
		left:20px;
		z-index:100;
		background: #50758d;
  } 
</style>