Düz köşeli divler fazla estetik durmazlar. İstisnalar çok tabi, bu bir seçim meselesi. Ben genelde yuvarlak köşeli kutuları kullanmayı severim. Bunu CSS‘de yapmak biraz sıkıntılı. Kutuların köşesini kullanmak için değişik yöntemler mevcut. Bu yöntemlerden birini Erhan Burhan kendi blogunda anlatmış. Çok yararlı bir ders, okumanızı tavsiye ederim:

CSS tekniğini ile köşeleri yuvarlatılmış yani yuvarlak köşeli kutular yapmak için birden fazla yöntem var. Hatta yalnızca bu iş için özel olarak yazılmış javaScript uygulamaları bile bulunuyor (Nifty Corners gibi). Fakat ben bu yazımda kendi kullandığım bir yöntemi anlatacağım. Hadi başlayalım

hazırlayacak olduğumuz uygulama

1) Yuvarlak resmin hazırlanması

Diğer yöntemlerde genel olarak sol-üst, sol-alt ve sağ-üst, sağ-alt olmak üzere 4 farklı resim kullanılıyor. Ama bence bu iş için 1 tane resim dosyası yeterli. Biz 1 tane resim dosyası hazırlayıp sanki 4 parçaymış gibi düşüneceğiz. Resim dosyasını hazırlamak için ben Adobe Fireworks yazılımını kullandım. Hazırlanması kolay olduğu için siz başka yazılımlar kullanarak da aynı sonucu elde edebilirsiniz.

Yuvarlak resmi hazırlamak için üstte belirtilen adımları takip etmelisiniz. İlk önce genişliği ve yüksekliği 30 piksel olan bir daire çizin. Sonra bu daireyi tam ortadan keserek sağ ve sol olmak üzere iki parçaya ayırın. Son adımda ise parçaları alt alta hizalamaya çalışın. Sonuç olarak genişliği 15 piksel, yüksekliği 60 piksel bir resim elde etmiş olacaksınız.
Devamını oku »

Bu Yazıyı Paylaşın

Normal, bildiğimiz yazı kutusunun(textbox) boyutlanabilir hali. Siteniz ekleyerek daha dinamik görünmesini sağlayabilirsiniz

Demo - Kodu İndir

Bu Yazıyı Paylaşın