Programalama > HTML

HTML / Css3 Ve Html Karisimi Güzel Bir Menü

Bu Menüyü Css3 Ve Html İle Güzel Bir Şekle Soktum Umarım Beyenilir. Aşağıdaki Html Kodunu Css Ve Html Dosyası Diye Ayırmanıza Gerek Yok. Sadece Kopyalayın Ve Html Dosyasına Yapıştırın.

Etiketler: css3, html, karisimi, güzel

Ort. 5

Puan ver:

hazirkod 14 June 19:34 0

4 kişiden 20 puan aldı

10137

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> menu v. 0.1</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <META content=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
 </head>
<style>
#menu{
cursor:pointer;
background:;
width:250px; height:210px;
margin:0px;
color:#fff;
}
.link{
-moz-user-select:none;
-webkit-user-select:none;
float:right;
background:#333333;
font-family:sans-serif;
width:200px; height:35px;
color:#fff;
padding-left:50px;
margin-left:15px;
font-size:20px;
margin:0px;
text-decoration:none;
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1;)
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
}
.link:hover{
background:#292929;
text-decoration:none;
font-size:20px;
text-shadow:0px 0px 15px #fff;
-webkit-transform:rotate(-7deg) scale(1.2);
 -moz-transform:rotate(-7deg) scale(1.2); 
}
.link:active{
background:#363636;
color:#222222;
text-decoration:none;
font-size:20px;
-webkit-transform:rotate(-6deg) scale(1.1);
 -moz-transform:rotate(-6deg) scale(1.1); 
}
.link2{
-moz-user-select:none;
-webkit-user-select:none;
float:right;
background:#333333;
font-family:sans-serif;
width:200px; height:35px;
color:#fff;
padding-left:50px;
margin-left:15px;
font-size:20px;
margin:0px;
text-decoration:none;
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1;)
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
}
.link2:hover{
background:#292929;
text-decoration:none;
font-size:20px;
text-shadow:0px 0px 15px #fff;
-webkit-transform:rotate(3deg) scale(1.2);
 -moz-transform:rotate(3deg) scale(1.2); 
}
.link2:active{
background:#363636;
color:#222222;
text-decoration:none;
font-size:20px;
-webkit-transform:rotate(2deg) scale(1.1);
 -moz-transform:rotate(2deg) scale(1.1); 

}
</style>
 <body>

	<div id="menu">
		
		<h1 onclick="document.location='http://www.hazirkod.com';" class="link">link1</h1>
		<h1 onclick="document.location='http://www.hazirkod.com';" class="link2">link2</h1>
		<h1 onclick="document.location='http://www.hazirkod.com';" class="link2">link3</h1>
		<h1 onclick="document.location='http://www.hazirkod.com';" class="link">link4</h1>
		<h1 onclick="document.location='http://www.hazirkod.com';" class="link2">link5</h1>
		<h1 onclick="document.location='http://www.hazirkod.com';" class="link">link6</h1>

	</div>

 </body>
</html>