Create a Simple Logo With Pure CSS
Nowadays, some web developers are creating fabulous and cool stuff with CSS3 that was impossible without a design software including icons, animations and logos. In this CSS tutorial, I will show you how to create a simple and fairly good logo with pure CSS.
Final Result
Click on the image below to see a live demo.
First of all, you can download the font I used from fontsquirrel.com, or use any font you want. Now we start with the following markup:
<div id="logo">
<div id="dots"></div>
<h1 id="name">Geeksband</h1>
<h2 id="tagline">Interested in a better web !</h2>
</div>So, here is my plan, I enclosed the whole logo with a <div> tag and gave it “logo” as an id, just for the background. Then, another <div> tag for the top dots, I’ll use border-bottom property for the bottom dots. Everything else is clear.
Now we include the font that we want to use in the CSS file, remove margins and paddings and apply some style on the name (Geeksband here) and the whole logo:
@font-face {
font-family: 'LeagueGothic';
src: url('fonts/League_Gothic-webfont.eot');
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/League_Gothic-webfont.woff') format('woff'),
url('fonts/League_Gothic-webfont.ttf') format('truetype'),
url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#logo, #name, #dots, #tagline{
margin: 0;
padding: 0;
}
#logo{
background-color: #121212;
width: 180px;
padding: 6px 8px 6px 6px;
box-shadow: 3px 3px 0 #3a3a3a;
}
#name{
font-family: LeagueGothic, sans-serif;
font-weight: normal;
text-transform: uppercase;
color: #fff;
border-bottom: 1px dashed #fff;
height: 33px; /*to raise the border bottom*/
padding-left: 2px;
}
We will have something like that:
Finally we’re gonna add the top dots and style the tagline, and we’re done.
#dots{
height: 1px;
border-bottom: 1px dashed #fff;
margin-bottom: -3px;
}
#tagline{
font-size: 10.5px;
color: #fff;
font-family: Tahoma, sans-serif;
font-weight: normal;
padding-left: 3px;
}Feel free to leave a comment if you have any question about this tutorial or just want to say thanks, Thank you for reading and have a great day !
Thanks for the nice CSS logo. Would you please post more CSS tutorials like this one
@Omar
I’m looking forward to do it
Nice logo! simple and sexy. waiting new tutorials
@Ay
Thanks Ay…I’m working on new tutorials, I was just occupied with some new CSS templates for our Portfolio