Zeichnen mit CSS

Setzen Sie Ihr Logo doch einfach mal in CSS um. Die verschiedenen Shapes von CSS bieten hierfür vielfältige Möglichkeiten.
litschi_css_logoSpeichern 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 &amp; Werbetechnik</div>
</body>
</html>

 

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.