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: css3