Css Giriş Ekranına Arka Plan Yapma - Webmaster Forumu

**Onur** · #1 (**permalink**) 12-07-2008, 08:56:58

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..

**system.26** · #2 (**permalink**) 21-07-2008, 11:58:10

yararlı bi çalışma

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder
Stil
Normal Hybrid-Şeklinde gösterime geç Ağaç şeklinde gösterime geç

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
arka plan resmini ortalama	oneuss	Webmaster Genel	3	16-05-2008 22:26:09
Firefox Ve Css Güzellikleri Mouse (fare) Arka Plan Resmi	OmAr	HTML CSS DHTML	0	11-05-2008 22:04:50
CSS Background Özellikleri Arka Plan	OmAr	HTML CSS DHTML	0	11-05-2008 21:59:01
Web 2.0 Arka Plan Yapıcı	CCS	Photoshop, Corel, Freehand, Fireworks	1	15-11-2007 01:48:57
Orta Noktadan Dağılan Arka Plan	CYBERAY	Photoshop, Corel, Freehand, Fireworks	9	29-08-2007 09:28:16

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)