Anasayfa

ASP.NET

Asp.net Button ve Textbox nesnelerinin Css ile tasarlanması
Facebookta Paylaş

Asp.net Button ve Textbox nesnelerinin Css ile tasarlanması

Bu konumuzda Asp.net de kullandığımız Button ve Textbox nesnelerimizi css ile tasarlayarak, nesnelerin sitelerimizin genel tasarıma uygun hale gelmesini sağlayacağız. Daha önce burdaki konumuzda css tanımlamaya giriş yapmıştık. Css oluşturma ve tanımlama işlemi hakkında bilgisi olmayanlar o konudan başlayıp sonra bu aşamaya geçebilirler. 

İlk olarak resim kullanmadan sadece css özelliklerini kullanarak bir tasarım yapıyor olacağız sonrasında ise tasarlanmış bir resim için css yazıp uyguluyor olacağız.

Css özellikleri ile
 

.text  {width:150px;height:35px;background:#ccc;border:1px solid #000;line-height:35px;color:#000; }
.buton {width:75px;height:30px;background:#000;color:#fff;cursor:pointer;border:none;}

Cssleri yukarıdaki gibi tanımladık, gelelim şimdi webform üzerinde bu cssleri nesnelere eklemeye,web form üzerine attığımız textbox ve buttonların Properties kısmından CssClass özelliğine geliyoruz. Textbox için cssclass özelliğine text yazıyoruz, button 'un cssclass özelliğine de buton yazıyoruz. Css ve Classları doğru tanımladıktan sonra textbox ve butonumuz aşağıdaki gibi gözükecektir. Css özelliklerini değiştirerek farklı şekiller de verebilirsiniz. 

Asp.net nesneleri tasarlarken nesnenizde, örneğimizdeki textboxdaki gibi özel bir border kullanmayacaksak css de border:none; özelliğini eklemeniz gerekiyor tam görünüme ulaşmak için.

      

Css Özellikleri ile Resim Kullanarak

Tasarımda kullanacağımız resimler şunlar , resimleri sağ tıklayıp farklı kaydet diyerek kaydedebilirsiniz;

      

Bu işlemimiz sonunda yukarıdaki görünüme sahip textbox ve butona ulaşmış olacağız.Bu resimleri cssi yazdığımız sayfayla aynı dizine atıyoruz. Sonrasında yazacağımız css şu şekilde;

.text  {width:243px;height:40px;background:url(txt.png) no-repeat;padding-left:40px;line-height:40px;border:none;}
.buton {width:30px;height:30px;background: url(btn.png) no-repeat;cursor:pointer;border:none;}

Bu cssleri yazıp textboxamıza bir kez tıklayığ Properties penceresinde CssClass özelliğine text giriyoruz. Daha sonra aynı işlemi buton için yapıyoruz ,bir kez tıklayığ Propertiesden CssClass özelliğine btn giriyoruz.
Böylelikle işlemimiz sonlanmış oluyor resimdeki görüntülerdeki textbox ve butonumuz tamamlanmış oluyor.

Örnek projeyi BURADAN indirebilirsiniz.

 

20 Eylül 2013 15:22 Kategori :ASP.NET10370
Sitene Ekle :
Yukarıdaki kodu sitenize ekleyerek bu konuyu sitenizde yayınlayabilirsiniz.