Setzen Sie Ihr Logo doch einfach mal in CSS um. Die verschiedenen Shapes von CSS bieten hierfür vielfältige Möglichkeiten.
Speichern Sie untenstehenden Code in HTML Datei und öffnen Sie diese in Ihrem Browser um das gezeichnete Litschi-Logo zu sehen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#squaretl { width: 85px;
height: 50px;
background: black;
position:fixed;
top:150px;
left:160px;}
#circletlo { width: 100px;
height: 100px;
background: black;
position:fixed;
top:100px;
left:200px;
-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
#circletli { width: 80px;
height: 80px;
background: red;
position:fixed;
top:110px;
left:210px;
-moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
}
#squarel { width: 50px;
height: 150px;
background: black;
position:fixed;
top:200px;
left:200px;}
#squarebl { width: 85px;
height: 50px;
background: black;
position:fixed;
top:350px;
left:200px;}
#circleblo { width: 100px;
height: 100px;
background: black;
position:fixed;
top:350px;
left:150px;
-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
#circlebli { width: 80px;
height: 80px;
background: red;
position:fixed;
top:360px;
left:160px;
-moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
}
#litschi { width: 355px;
height: 150px;
position:fixed;
top:200px;
left:300px;
font-family: Impact, Charcoal, sans-serif;
color: black;
text-align: center;
font-size:130px;
margin: auto;
}
#squaretr { width: 85px;
height: 50px;
background: black;
position:fixed;
top:150px;
left:705px;}
#circletro { width: 100px;
height: 100px;
background: black;
position:fixed;
top:100px;
left:655px;
-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
#circletri { width: 80px;
height: 80px;
background: red;
position:fixed;
top:110px;
left:665px;
-moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
}
#squarer { width: 50px;
height: 150px;
background: black;
position:fixed;
top:200px;
left:705px;}
#squarebr { width: 85px;
height: 50px;
background: black;
position:fixed;
top:350px;
left:670px;}
#circlebro { width: 100px;
height: 100px;
background: black;
position:fixed;
top:350px;
left:700px;
-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
}
#circlebri { width: 80px;
height: 80px;
background: red;
position:fixed;
top:360px;
left:710px;
-moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px;
}
#line1 { width: 355px;
height: 5px;
background:black;
position:fixed;
top:350px;
left:300px;}
#line2 { width: 355px;
height: 5px;
background:black;
position:fixed;
top:395px;
left:300px;}
#boxl { width: 60px;
height: 30px;
background:black;
position:fixed;
top:360px;
left:300px;}
#boxr { width: 60px;
height: 30px;
background:black;
position:fixed;
top:360px;
left:595px;}
#boxm { width: 215px;
height: 30px;
position:fixed;
top:354px;
left:370px;
font-family: Impact, Charcoal, sans-serif;
color: black;
text-align: center;
font-size:34px;
margin: auto;}
#boxu { width: 375px;
height: 30px;
position:fixed;
top:410px;
left:288px;
font-family: Impact, Charcoal, sans-serif;
color: black;
text-align: center;
font-size:44px;
margin: auto;}
</style>
</head>
<body>
<div id="squaretl"></div>
<div id="circletlo"><div id="circletli"></div></div>
<div id="squarel"></div>
<div id="squarebl"></div>
<div id="circleblo"><div id="circlebli"></div></div>
<div id="litschi">Litschi</div>
<div id="squaretr"></div>
<div id="circletro"><div id="circletri"></div></div>
<div id="squarer"></div>
<div id="squarebr"></div>
<div id="circlebro"><div id="circlebri"></div></div>
<div id="line1"></div>
<div id="line2"></div>
<div id="boxl"></div>
<div id="boxr"></div>
<div id="boxm">www.Litschi.de</div>
<div id="boxu">EDV & Werbetechnik</div>
</body>
</html>
