Daha önceden yaptığım basit bir giriş sistemi tasarımını paylaşmak istedim.
görüntü :
indir : http://ustaderslik.com/dosya/giri%C5%9F%20tasar%C4%B1m.rar
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<link rel="stylesheet" href="stil.css" media="all" type="text/css" />
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<div class="giris"><div class="fontt"><b>Giriş Paneli</b></div></div>
<div class="ana">
<form method=post action="#">
<div class="font"><b>Kullanıcı adı:</b></div><div class="temizsag"></div><input type="text" class="kutu"><br>
<div class="font"><b>Şifre:</b></div><div class="temizsag"></div><input type="password" class="kutu">
<div class="temizsag"></div>
<br><input type="submit" class="buton" value=" Giriş " >
</form></div></center>
</body>
</html>
stil.css
.giris{
width:300px;
background-color:#AC0146;
padding-left:25px;
padding-right:25px;
padding-top:10px;
padding-bottom:10px;
border-top-left-radius:2em;
-moz-border-top-left-radius:2em;
-webkit-border-top-left-radius:2em;
border-top-right-radius:2em;
-moz-border-top-right-radius:2em;
-webkit-border-top-right-radius:2em;
}
.ana{
width:300px;
background-color:#F10061;
padding:25px;
border-bottom-left-radius:2em;
-moz-border-bottom-left-radius:2em;
-webkit-border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
-moz-border-bottom-right-radius:2em;
-webkit-border-bottom-right-radius:2em;
}
.font{
float:left;
color:#fff;
text-shadow:0px 3px 5px #000;
-moz-text-shadow:0px 3px 5px #000;
-webkit-text-shadow:0px 3px 5px #000;
}
.fontt{
color:#fff;
text-shadow:0px 3px 5px #000;
-moz-text-shadow:0px 3px 5px #000;
-webkit-text-shadow:0px 3px 5px #000;
}
.kutu{
float:right;
border: 2px dotted #AC0146;
}
.temizsag{
clear:right;
}
.temizsol{
clear:left;
}
.buton{
color:#fff;
background-color:#AC0146;
border: 2px dotted #AC0146;
border-radius:2em;
-moz-border-radius:2em;
-webkit-border-radius:2em;
cursor:pointer;
}
.buton:hover{
background-color:#F10061;
}
UstaDerslik
