Bu Yazıyı Yazdır
Etiketler:arama, css, estetiik, görünüm, kutusu, şekillendirme, tasarım, textbox
Ciddi yapılan her tasarım, ne kadar basit olursa olsun yine de çok zamanınızı alıcaktır. Renk uyumu ve kullanılacak renk tonlarına harcadığımız zamandan tutunda, kenar yuvarlamadan diğer görsel öğelere kadar pek çok ince detayı tekrar tekrar gözden geçirir ve son olarak tasarımımızı bitirir ve kodlamaya geçeriz. Ancak ne var ki pek çok güzel tasarımlı site, kullandığı varsayılan yazı kutuları(text box) ve butonlarla “tasarımlarını zedeliyor“. Aslında bunun sebebi, tasarım yapılırken bu alanların unutulması veya bu butonların, yazı kutularının tasarımının zor olması değil. Kullandığımız bütün grafik yazılımları için bir buton ve bir yazıkutusunu çizmek çok basit. Asıl sorun, bu tasarımların html üzerinde uygulanması sırasında başlıyor. Okul ve kurslarda verilen html eğitiminde ayrıntılara girilmeyişi ve bu tür detayların atlanması, tasarımlarımızı da kısıtlamamıza neden oluyor. Bu yazımda CSS bilgisi ile aşağıdaki gibi bir arama kutusunu yapmanın aslında çok da zor olmayacağını göreceğiz.
Yukarıdaki resimde designcase.com sitesinin arama kutusunu görüyorsunuz. Resme tıklayarak siteye gidin ve bu kısma varsayılan yazı kutusunun eklendiğini düşünerek bu tasarımı tekrar hayal edin. Bir arama kutusunun sitenin estetiğini ne kadar çok etkilediğini göreceksiniz. Smashing magazine sitesi bu konuyu 4 Aralık 2008′de yayınladığı bu konuda ele aldı ve pek çok güzel örneğini verdi. Buradaki siteleri inceleyebilirsiniz.
Nasıl yapılır?
Biraz CSS bilgisi ile arama kutusu tasarımlarımıza sitelerimiz için uyarlayabiliriz. Yazı kutusunun ve butonun tasarımına göre pek çok farklı CSS kombinasyonu olacaktır tabi fakat işin mantığını kavradığımızda hepsini yapabiliriz. Öncelikle varsayılan kutumuzu inceleyelim: Tarayıcıların eklediği varsayılan yazı kutusundaki kenarlıkları fark etmişsinizdir. Bunların CSS’de “border” etiketi ile verildiğini biliyoruz. Öncelikle “border”a 0(Sıfır) değeri verip bunu ortadan kaldırırsak bembeyaz düz bir yazı kutumuz olur. İşten bu noktadan sonra bu kutuya tasarladığımız kutunun resmini arkaplan olarak atar ve yükseklik-genişlik ayarlarını doğru yaparsak güzel bir CSS hilesi ile bu kutumuza daha estetik bir grafikle güzel görünüm verebiliriz.
Örnek bir CSS kodunu inceleyelim:
.aramakutusu {
border:none; /*Bu satırda kenarlıkları kaldırdık. Düz, beyaz bir yazı kutumuz var. */
background-image:url(resimler/arama.jpg); /*Bu satır ise arkaplan resmini tanımlıyor.*/
background-repeat: no-repeat; /* Arkaplan resmimiz sabit kalacağı için tekrar etmesini istemedik. */
background-color: #1d1d1d; /* beyaz yazı kutusunun rengini sitenin arkaplanına göre ayarladık ki, kutumuza verdiğimiz resim küçük gelirse beyaz renkte sırıtmasın. */
margin-top: 2px; /*Kutumuzun yerini ayarlıyoruz. Yukarıdan 2 pixel mesefa uzaklıkta. */
margin-left: 35px; /*Kutumuzu sol kısımda 35 pixel içeri aldık. sizde kendinize uygun şekilde sayfaya oturtun.*/
height: 23px; /* Yazı kutumuzun yüksekliğini grafiğimizin yüksekliğine göre ayarlıyoruz. */
width: 157px; /*Yazı kutumuzun uzunluğunu grafiğimizin uzunluğuna göre ayarlıyoruz. */
padding-top: 3px; /*Sıra geldi kutunu içine yazılan yazıya, bunu da bu ve aşağıdaki padding değerleri ile ziyaretçilerin yazıkları yazının doğru kısma yazılmasını sağlıyoruz.*/
padding-left: 3px;
padding-right: 3px;
}
Hepsi bu kadardı. Şimdi aramakutusu ismiyle oluşturduğumuz CSS sınıfını HTML tasarımımızda yazı kutumuza class=”aramakutusu” şeklinde vererek tanıtabiliriz.
Buton yapımı içinse 320volt.com‘daki CSS ve Photoshop ile buton yapımı konulu yazı gayet açıklayıcı.
Henüz yorum yapılmadı, ilk yorumu yapmak ister misin?
Yorum Ekleyin