Today, in this tutorial i will teach you how to create a simple and unique css logo in Css, this tutorial will also teach you how to create a text shadow in css…
Lets Start the Beginning
First of all we have to create the html, Copy & Paste the below code in your “<body>” of your html file:
<div id="styletext"> <span class="u">U</span><span class="r">R</span><span class="c">C</span><span class="s">S</span><span class="s2">S</span> <div class="logotext">simple & unique css logo</div> </div>
I have used “URCSS” text for the logo, you can change the text in the “<span>” tag to your own, i have put each letter in a “<span>” tag to make it easy to design each letter.
Designing Logo in Css
Okay, now we are going to design each letter in css, first of all we have to design the “<div id=’styletext’>” in css, add the following code in your “<head>” tag of your html file or add it to your “.css” file:
#styletext{
width:160px;
margin:10px;
padding:20px;
font-family: Tahoma, Geneva, sans-serif;
font-size:58px;
font-weight:bold;
background-color:#cee8a4;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
color:#92bd4f;
}
Some browser doesn’t support rounded corners borders, so we used “-webkit-border” and “-moz-border-radius” for multiple browser support, so in the above code “-webkit-border” is used for WebKit equivalent, and “-moz-border-radius” is used for Mozilla equivalent, to know more about this please go here.
Design “U” letter of the Logo
Now we are going to design the “U” letter of the logo, add the following css:
#styletext .u{
letter-spacing:-15px;
text-shadow:#FFF -2px 1px 1px;
}
“letter-spacing:” it is used for changing the letters space in css.
“text-shadow:” This is the latest css feature, which add a drop down shadow to the text.
Design “R” letter of the Logo
Now we are going to design the “R” letter of the logo, add the following css:
#styletext .r{
letter-spacing:-8px;
text-shadow:#FFF 2px 1px 1px;
}
Design “C” letter of the Logo
Now we are going to design the “C” letter of the logo, add the following css:
#styletext .c{
letter-spacing:-10px;
color:#89b348;
text-shadow:#FFF -2px 1px 1px;
}
Design “S” letter of the Logo
Now we are going to design the “S” letter of the logo, add the following css:
#styletext .s{
letter-spacing:-10px;
color:#719a33;
text-shadow:#FFF -2px 1px 1px;
}
Design “S” letter of the Logo
Now we are going to design the “S” letter of the logo, add the following css:
#styletext .s2{
color:#587d1f;
text-shadow:#FFF -2px 1px 1px;
}
Designing Logo Description
We are about 90% done, now lets design the logo description in css, add the following css:
#styletext .logotext{
margin:0;
padding:0;
font-size:12px;
color: #749e30;
text-shadow: #FFF 1px 1px 1px;
background-color:#c0db95;
padding:5px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
and Thats it, we are finished!
Putting all Css Together
#styletext{
width:160px;
margin:10px;
padding:20px;
font-family: Tahoma, Geneva, sans-serif;
font-size:58px;
font-weight:bold;
background-color:#cee8a4;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
color:#92bd4f;
}
#styletext .u{
letter-spacing:-15px;
text-shadow:#FFF -2px 1px 1px;
}
#styletext .r{
letter-spacing:-8px;
text-shadow:#FFF 2px 1px 1px;
}
#styletext .c{
letter-spacing:-10px;
color:#89b348;
text-shadow:#FFF -2px 1px 1px;
}
#styletext .s{
letter-spacing:-10px;
color:#719a33;
text-shadow:#FFF -2px 1px 1px;
}
#styletext .s2{
color:#587d1f;
text-shadow:#FFF -2px 1px 1px;
}
#styletext .logotext{
margin:0;
padding:0;
font-size:12px;
color: #749e30;
text-shadow: #FFF 1px 1px 1px;
background-color:#c0db95;
padding:5px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
Excellent use of CSS to create nice looking logo. I rerally like that. Will try to use this trick in any of my design as it is SEO friendly too.