Flying memes

Building a company logo using CSS3

I’ve recently left my job to found a new company called ‘Comparto Web‘; to showcase some of our CSS3 skills I decided to implement the logo using only HTML elements and taking advantage of┬ásome new properties such as transitions and animations.


Here’s the HTML code:

<div id="background_gears">
<img src="svg/gear.svg" class="big_gear">
<img src="svg/gear.svg" class="small_gear">
</div>

<div id="home">
<figure>
<img src="svg/gear.svg" class="big_gear">
<img src="svg/gear.svg" class="small_gear">
<h2><a data-title="Comparto Web">Comparto Web</a></h2>
</figure>
<div>

To animate the two gears I used CSS3 animations:

.big_gear{
	position: absolute;
	opacity: 0.85;
	width: 7.6em;
	top: -3.0em;
	right: -2.7em;
	animation-name: clockwise;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.small_gear{
	opacity: 0.8;
	position: absolute;
	width: 4em;
	bottom: 0.2em;
	left: -0.8em;
	animation-name: counterclockwise;
	animation-duration: 12.808s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes clockwise{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
		
@keyframes counterclockwise{
	from{
		transform: rotate(360deg);
	}
	to{
		transform: rotate(0deg);
	}
}

and to create a text inset shadow effect I followed this beautiful example from Daniel Hug found on Dabblet.

You can check the result simply by visiting http://www.compartoweb.com

Tags: