Design a logo with CSS Tag(s): HTML/CSS
While you can design your logo with a JPG or PNG file with an on-line tool, the CSS approach a very lightweight and it is easy to customize.
Version 1
Real's HowTo
<style>
.logo1 {
margin:.25em;
font-size:1.5em;
padding:.1em .5em .2em .5em;
color:white;
background: rgb(77,144,254);
background: -moz-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
background: -ms-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
background: -o-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(77,144,254,.8)), to(rgba(71,135,237,1)));
background: -webkit-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
background: linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
-webkit-border-radius: 1em;
border-radius: 1em;
-webkit-box-shadow: .1em .1em .5em rgba(0,0,0, 0.4);
box-shadow: .1em .1em .5em rgba(0,0,0, 0.4);
text-shadow: 0 2px 2px rgba(0,0,0, 0.4);
}
</style>
<p/>
<span class="logo1">Real's HowTo</span>
Version 2
Real'sHowTo
<style>
.logo2a {
display: inline-block;
position: relative;
padding: 0 0.25em 0.7em 0.25em;
text-decoration:none;
background: #2ab0ed;
background: -moz-radial-gradient(ellipse,#bfe8f9, #2ab0ed 75%);
background: -ms-radial-gradient(ellipse,#bfe8f9, #2ab0ed 75%);
background: -o-radial-gradient(ellipse,#bfe8f9, #2ab0ed 75%);
background: -webkit-radial-gradient(ellipse, #bfe8f9, #2ab0ed 75%);
background: radial-gradient(ellipse,#bfe8f9, #2ab0ed 75%);
border:3px solid #f4f4f4;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
-webkit-box-shadow: .1em .1em .5em rgba(0,0,0, 0.4);
box-shadow: .1em .1em .5em rgba(0,0,0, 0.4);
color: #fff;
text-shadow: 0 2px 2px rgba(0,0,0, 0.4);
font-size: 1.5em;
font-weight:bold;
line-height: 1.3;
text-align:center;
}
.logo2b {
position:absolute;
font-size:66%; left:0.4em; top:1.5em;
letter-spacing:0.2em;
}
</style>
<p/>
<span class="logo2a">Real's<span class="logo2b">HowTo</span></span>
Version 3
Real'sHowTo
<style>
.logo3a {
display:inline-block;
position:relative;
font-family: "Courier New", Courier, monospace;
font-size:2em;
line-height:1;
font-weight:bold;
color:rgba(0,0,0,.2);
text-shadow:0 0 .5em rgba(255,255,255,1);
text-decoration:none; /* remove <a> decoration */
}
.logo3b {
position:absolute;
left:1.25em;
bottom:.10em;
font-size:50%;
letter-spacing:.3em;
text-shadow:2px 2px 2px rgba(255,255,255,1);
color:rgba(0,0,0,.8);
}
</style>
<p/>
<span class="logo3a">Real's<span class="logo3b">HowTo</span></span>
Version 4
Real'sHowTo
<style>
.logo4a {
display: inline-block;
position: relative;
margin:.25em;
padding: 0 0.25em 0.7em 0.25em;
text-decoration:none;
background: rgb(77,144,254);
background: -moz-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
background: -ms-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
background: -o-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(77,144,254,.8)), to(rgba(71,135,237,1)));
background: -webkit-linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
background: linear-gradient(rgba(77,144,254,.8), rgba(71,135,237,1));
-webkit-border-radius: 50% / 7px;
border-radius: 50% / 7px;
-webkit-box-shadow: 0 .25em .25em -.25em rgba(0,0,0, 0.4);
box-shadow: 0 .25em .25em -.25em rgba(0,0,0, 0.4);
color: #fff;
text-shadow: 0 2px 2px rgba(0,0,0, 0.4);
font-size: 2em;
font-weight:bold;
line-height: 1.3;
}
.logo4b {
position:absolute;
font-size:66%; left:0.4em; top:1.5em;
letter-spacing:0.2em;
}
</style>
<p/>
<span class="logo4a">Real's<span class="logo4b">HowTo</span></span>