Wnas logo in css3

css3

Just to have some fun I tried to build a mockup of my logo in html, without images...

I haven't done anything to make it work in IE and probably won't. If I do this, the logo will be an image in IE.

<em><i><span>wnas logo in css3</span></i></em>

I am still in doubt whether I should do this, as the css isn't exactly IE friendly. But for those of you who want to see it and maybe learn a thing or two, here is my code WITH explanations...

Code, with comments

We begin with the em that is our outer ring.

#homeTest {
	width: 98px;
	height: 98px;

We give it a width and height...

	float:left;

And we float it to the left to get it to accept a width and height.

	font-size: 1px

we hide the text in plain sight.

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

three different ways to say border-radius.

We now move onto the inner white circle.

#homeTest i {
	background-color: #fff;
	border: 1px solid #fff;

This one is the only one with different colors.

	height: 59px;
	width: 60px;

Set some width and height.

display: block;

A block accepts width and height as well.

	margin: 20px 19px 20px 20px;

Not quite symmetrically my logo is, hence the different margins...

	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

And again border radius in three different accents

#homeTest i span {
	height: 36px;
	width: 36px;
	display: block;

width, height, yada yada...

	margin: 8px 9px 8px 8px;

Not quite symmetrically my logo is, it really isn't.

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

And again three different ways to say border-radius. This is getting annoying people...

	text-align: center;

Set text in center.

	color: #39c;
}

And let it blend into the background. At last we set the colors of the outer and very inner circle, as they are the same.

#homeTest, #homeTest i span {
	border: 1px solid #39c;
	background-color: #39c;
}

There you have it, my logo in a couple of lines of css. For IE I could just set up a background image and nullify the borders and background, but why bother...

Css explanation will be published tomorrow

← Home