Making of Devw3 logo with css3 transition

On 27 Feb, 2012 in Design with Comments
Making of Devw3 logo with CSS3 transition in 3-steps

Devw3 logo may look, pretty simple with html and css. But, connecting two images to look like on was not easy as designing one logo. We started with illustrator.

It is a text based logo, for this we used Berlin Sans FB Demi the default windows font. This can be done in photoshop too , but to reduce the blured pixel we chose illustrator.Which, looks like following

Making of Devw3 logo with css3 transition

Once we have two images one with the name “devw3” and another with angled brackets. The image size of first image would be 200px by 48px and second would be 200px by 96px.

Make sure that angled bracket lies at the bottom of the inage. That is centered inside 48px height and aligned bottom to the image height 96px.

Now, its time get our hands dirty with html

<div class="logo">
     <a href="#"><img src="[image url]" alt="[alternate title]"></a>
</div>

We kept logo inside a div with class logo. Inside this div, there is hyperlink inside we will embed our first image i.e logo name.

Now its time for some css

.logo{
	float:left;
	padding:10px 0;
}
.logo a{
	display:block;
	width:200px;
	transition:all .2s linear;/* transition for all */
	-webkit-transition:all .2s linear; /* webkit transition for all */
	-o-transition:all .2s linear; /* opera transition for all */
	-moz-transition:all .2s linear; /* mozilla firefox transition for all */
	background:url(images/web/code.png) no-repeat;
	background-position:0 10px;
}
.logo a img{
	display:block;
}
.logo a:hover{
	background-position:0 -48px;
}

In css, we set a background image i.e our second image and set the background position to 10px. Once hyperlink is hovered, we set position to -48px.We used the css3 transition to get that sliding effect

Tags: ,