Friday, February 15, 2013

CSS ile Metin Kutusuna Resim Koyma

Sitenizde kayıt formlarında javascript ve Ajax ile (email,username,password confirm gibi) belli kontroller yapıp, kullanıcıya geri bildirim yapmak isteyebilirsiniz. Ben istiyorum en azından ve bunu formun sağına soluna köşesine taşırmadan direk text box'ın üzerinde bir resimle göstermek tasarımınıza daha şık bir görünüm katacaktır.

"no-repeat" ile resmin tekrarlaranarak tüm metin kutusunu doldurmasını engelleniyor.
170px resmi metin kutusu içerisinde soldan kaydırılma miktarı,
0px ise metin kutusunun üst hizası göre mesefe miktarı oluyor.
height ile de resmin boyutune uyumlu olarak metin kutusunun yükseliğini ayarlayabilirsiniz.

Yukarıdaki kod browser üzerinde derlendikten sonra aşağıdaki gibi gözükecek :




Yukarıdaki örnekte yazının boyutu metin kutusunda daha iyi durması için fontsize 14px yaptım.
Fakat resim üste dayanmış. Biraz daha aşağıda durması gerekiyor.


Bu örnekte ise fontsize'ı biraz daha büyütüp 17px yaptım ve resmi ortalamak için 0px'i 7px yaparak resmi biraz daha aşağıya çektim.

Bi ara üşenmezsem yukarıdaki gibi bir form için AJAX kodlarını ve anlatımını da paykaşırım.
Şimdlik burdaki linkten faydalanabilirsiniz.

Kolay gelsin.