Create eBay and Google Logo using CSS

In this tutorial we will learn how to create eBay and Google logo using CSS. It is very easy to create logo using CSS and the output will be like below. Lets follow the step by step task.

[wp-js-fiddle url=”http://jsfiddle.net/moinsam/cnya3psg/” style=”width:100%;height:400px;border:solid #4173A0 1px;”]

Step 1:

Create a html page and paste the following code inside the body tag.

<span class="logo-ebay"><span class="ebay-e">e</span><span class="ebay-b">b</span><span class="ebay-a">a</span><span class="ebay-y">y</span></span><span></span>
<br><br>
<span class="google-logo"><span class="google-G">G</span><span class="google-o1">o</span><span class="google-o2">o</span><span class="google-g">g</span><span class="google-l">l</span><span class="google-e">e</span></span>

Step 2:

Create a css file and linked it into the html file. In the stylesheet paste the following code snipts.

.logo-ebay { 
	font-family: Helvetica,Sans-serif;
    font-size: 50px;
    letter-spacing: -4px;
}
.ebay-e { 
	color: #CC0000; 
}
.ebay-b { 
	color: #0000FF; 
}
.ebay-a { 
	color: #FFA500; 
}
.ebay-y { 
	color: #008000; 
}
@-moz-font-face { 
	font-family: Catull; 
	src: url(../font/Catull.ttf); 
	font-weight:400; 
}
@-webkit-font-face { 
	font-family: Catull; 
	src: url(../font/Catull.ttf); 
	font-weight:400; 
}
@-o-font-face { 
	font-family: Catull; 
	src: url(../font/Catull.ttf); 
	font-weight:400; 
}
@-ms-font-face { 
	font-family: Catull; 
	src: url(../font/Catull.ttf); 
	font-weight:400; 
}
@font-face { 
	font-family: Catull; 
	src: url(../font/Catull.ttf); 
	font-weight:400; 
}
.google-logo {
	font-family: Catull,Sans-Serif;
    font-size: 50px;
}
.google-G { 
	color:#0047F1; 
}
.google-o1 { 
	color:#DD172C; 
}
.google-o2 { 
	color:#F9A600; 
}
.google-g { 
	color:#0047F1; 
}
.google-l { 
	color:#00930E; 
}
.google-e { 
	color:#E61B31; 
}

Look at the code at line 11-15, here I add a font to that is being used for google logo.

In this way you can create any text based logo using CSS if you know which font has been used on that logo.

Download Source Code

Books you should read :

[amazon template=findsourcecode&asin=1492337110,1118356543,1849693269]

Post Tagged with ,

One Response so far.

  1. toplu mail says:

    perfect!!! thank you for sharing

Leave a Reply

Your email address will not be published. Required fields are marked *

7 + twelve =

This site uses Akismet to reduce spam. Learn how your comment data is processed.