Facebook’un birkaç gün önce kullanmaya başladığı yeni giriş ekranı çoğunuzun dikkatini çekmiştir. Bu sayfada dikkat çeken pek çok yenilik olmasına karşın tasarımla ilgilenenlerin çabucak farkedecekleri bir değişiklik de düğme tasarımlarında yapılmış.
Facebook anasayfasındaki düğmeler, Google Analytics’te de benzer bir şekilde kullanılan yuvarlak köşeli düğmelerden. Fakat Facebook sadece 1 piksellik bir müdahale ile sayfaya güzelce entegre olan bir düğme görüntüsü elde etmiş. Peki bunu teknik anlamda nasıl yapmış? Bu yazımda kısaca bu konudan bahsedeceğim.
Köşeli butonlar çok farklı tekniklerle üretilebilir. Fakat eğer CSS 3 kullanmayacaksanız, bu tekniklerin tümünde resim dosyalarından yardım almanız gerekir köşelerdeki bu yuvarlak etkiyi yaratabilmek için. Şimdi gelin Facebook bu düğmeleri oluştururken hangi yolu izlemiş bakalım!
Facebook, bu düğmeleri 2 parça halinde oluşturuyor:
İlk parça, düğmenin sol kenarını ve düğme metnini içeriyor. İkinci parça ise düğmenin yalnızca sağ kenarını içeriyor. Her iki parça da arka plan olarak şu resmi kullanıyor:
Kullanılan düğmenin istenilen boyutta oluşturulması için ilk parçanın arka plan resmi sola, ikincisinin ki ise sağa hizalanıyor. Böylece ilk parçadaki metin ne kadar uzun olursa olsun (arka plan resminden daha geniş olmamak kaydıyla) düğmenin genişliği gerektiği kadar artabiliyor.
Peki bu ne sağlıyor?
· Kolay entegrasyon
· 4 köşeye ait yuvarlak kenar grafiklerini teker teker oluşturmaktansa tek bir grafik oluşturarak 423 byte’lık tek bir HTTP isteği ile buton için gereken kaynakları sağlayabilme
Ne sağlayamıyor?
· Metin boyutunu büyütmek mümkün değil.
Düğme içindeki metin boyutu büyütülürse düğmenin yüksekliği aynı kalacağından dolayı taşma problemi yaşanabilir.
Neden Facebook’un bu uygulamasını inceleme ihtiyacı hissettim?
Çünkü farkedeceğiniz için pek çoğumuz için kutsal sayılan temel XHTML ve CSS felsefesine çok da uygun bir yaklaşım değil bu. Fakat oldukça pratik bir yöntem. Dolayısıyla oyunu kurallarına göre oynamak, yani düzgün HTML ve CSS kodları kullanarak tasarım yapmak ile pratiklik ve ihtiyaçlarınız arasında bir denge kurmak , standartları körü körüne takip etmekten daha mantıklı olabiliyor çoğu zaman.