Giriş sayfalarında v.b. giriş yapılan her yerde kullanabileceğiniz giriş arka planı diyebileceğimiz bir örnek yapacağız.
Daha iyi anlamanız için hemen bir demo resmi eklemek istiyorum:
Şimdi kodları verip onları inceleyelim:
Aşağıdaki kod Css kodudur. Dosyanızda
<head> - </head> arasına eklenmelidir.
Kod:
<style type='text/css'>
.kullaniciadi {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #333333;
background:url('karkaplan.gif') no-repeat right top;
}
.sifre {
width: 150px;
margin: 0 0 1em 0;
border: 1px solid #333333;
background:url('parkaplan.gif') no-repeat right top;
}
</style> Burda kullanıcı adı alanı ve şifre alanı için 2 tane oluşturulmuş kod görüyorsunuz.
Burada
width: 150px; koduyla girilen yerin genişliğini ayarlayabilirsiniz.
Arka plan olayının kodunu incelemek istersek
background:url('img/parkaplan.gif') no-repeat right top;
background yeni arka plan olarak parkaplan.gif resmini tanımlayıp sağa yaslı bir şekilde çıkmasını istemiş. Çünkü sola yaslarsak resmin sağındaki küçük simge çıkmaz. Bu yüzden resim sağa yaslı olmalıdır.
Diğer koddada aynı şekilde başka bir resmi yukarıdaki gibi tanımlamış.
Şimdi form'daki kodu inceleyelim. Bu kod
<body> - </body> arasında olmalıdır.
Kod:
<form id="GirisFormu" name="GirisFormu" method="post">
<input class="kullaniciadi" type="text" size="15" name="kadi" />
<input class="sifre" type="password" size="15" value="" name="sifre" />
</form>
Burada normal formdan tek fark
class="kullaniciadi" kodudur. Bu kodda Css olarak yazdığımız arka plan resmini forma monte etmek içindir.
Aşağıda benim bulup kullandığım resimleri veriyorum :
Yabancı kaynaklardan yararlanılarak hazırlanmıştır.
Herhangi bir sorunuz olursa bu başlıktan sorabilirsiniz.
Zone.Org için
Onur Selek hazırlamıştır.
Kolay gelsin..