Kullanıcı Giriş Paneli

Çeşitli sitelerde gördüğünüz kullanıcı giriş panellerinin Html & Css'e dökülmüş halinin birinci örneği

Öncelikle arkaplan resmini indirmeniz gerekmektedir.
Arkaplan Görseli
Giriş Arkaplan Resmi

Şimdi ise bunu CSS'e döküp, eklemeler yapalım.
CSS Kodları
*{margin:0px;padding:0px;border:0px;font-size:100%;font:inherit;vertical-align:baseline;border-spacing:0px;}
#yonetim_giris_body{background-color:#edf0f5;font-family:"Verdana", Lucida Grande, Tahoma, Arial, sans-serif;font-size:13px;}
#yonetim_giris_kapsayici{margin:15% auto;width:297px;height:235px;padding:37px 25px 0 25px;background:url('images/1.png');}
#yonetim_giris_kapsayici input[type=text], #yonetim_giris_kapsayici input[type=password]
{
    width:190px;
    padding:0 5px 0 5px;
    height:46px;
    border:1px solid #e1e1e1;
    margin-bottom:12px;
    border-radius:5px;
    color:#9e9696;
    float:left;
}
#yonetim_giris_kapsayici p {
    width: 90px;
    padding: 15px 5px 0 0;
    float: left;
    font-size: 13px;
}
#yonetim_giris_kapsayici input[type=submit] {
    width: 295px;
    height: 46px;
    border: 1px solid #a2c359;
    margin-bottom: 12px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #525b3d;
    background-color: #b3d175;
    cursor: pointer;
}
#yonetim_giris_kapsayici span {
    color: #990000;
}
#yonetim_giris_kapsayici a {
    color: #0000CC;
    text-decoration: underline;
}

HTML taslağımızı oluşturalım.
HTML Kodları
<body id="yonetim_giris_body">
    <form method="post" action="">
        <div id="yonetim_giris_kapsayici">
            <p>Kullanıcı Adı</p><input name="kullanici_adi" type="text" />
            <p>Şifre</p><input name="sifre" type="password" />
            <input type="submit" value="Giriş Yap" />
        </div>
    </form>
</body>

Sonuçta şöyle bir görünüme sahip olacaktır.
Örnek
Kullanıcı Giriş Paneli CSS-XHTML Döküm

Yorumlar

  • Bekir Büyük

    Bekir Büyük:

    1 yıl önce

    Kardeşim ben bunu bir projemde kullanmak istiyorum yayında olacak bir şey bu proje. Telif falan diye bir sıkıntı çıkar mı sonradan başımıza. Cevabını bekliyorum. İyi günler.
    1 cevapla
  • Yönetici Yorumu:

    1 yıl önce

    Herhangi bir sıkıntı çıkarmaz. Güle güle kullan.
  • Kadir Yıldırım

    Kadir Yıldırım:

    1 yıl önce

    Arkadaş, armut piş ağzıma düş diyor.
    0 cevapla
  • Yönetici Yorumu:

    1 yıl önce

    Biz de olabildiğince giriş seviyesinde yardım etmeye çalışıyoruz. Gerisini kendilerinin getirmelerini istiyoruz.
  • Fatih Sayın

    Fatih Sayın:

    3 yıl önce

    Bir şey sorucam bunu sitemize eklediğimizde nasıl üye olunup giriş yapılacak ?
    3 cevapla
  • Yönetici Yorumu:

    Verilen şablonu dinamik diller ile (asp, .net, php vs..) programlayıp aktif kullanıma sunmanız gerekir. Veritabanı ve ilgili tabloları oluşturup (Üyeler, haberler vs..) programlama yapmanız gerekmektedir.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum