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.
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:
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:
We will have something like that:
Finally we’re gonna add the top dots and style the tagline, and we’re done.
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 !