CSS Basit Giriş Sistemi Tasarımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Basit Giriş Sistemi Tasarımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3049)
RAPOR ET
Daha önceden yaptığım basit bir giriş sistemi tasarımını paylaşmak istedim.
görüntü :
http://ustaderslik.com/resim/ders/rk2bl.png
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;
}



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol