MoonLich.Tr.Gg | MoonLich Kişisel | Bedava Sitem

cssresim

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.

2) HTML kodlarının hazırlanması

Yuvarlak köşeli kutumuzu oluşturan HTML kodları şöyle:

İlk önce "class" özniteliği "yuvarlak" olan bir DIV etiketi açıyoruz. Bu etiket, yuvarlak köşeli kutumuzu kapsamakla görevli. Bunun hemen altında "class" özniteliği "ust" olan bir DIV etiketi açıyoruz ve içerisine <div>&nbsp;</div> kodlarını yazıyoruz.

Bunun hemen altındaki "class" özniteliği "ort" olan DIV etiketi ise bizim içerik alanımız oluyor. Dolayısıyla bu alana kutu içerisinde görünecek olan yazılarınızı ve resimlerinizi ekleyebilirsiniz. Sonra "class" özniteliği "alt" olan bir DIV etiketi daha ekleyip içerisine yine <div>&nbsp;</div> kodlarını ekliyoruz.

3) CSS ile biçimlendirme yapılması

Yukarıdaki HTML kodlarını CSS ile biçimlendirmek için şu 4 adımı takip etmeliyiz:

Birinci adımda, kutumuzu kapsayan ve "class" özniteliği "yuvarlak" olan DIV etiketini biçimlendirdik. Genişliğini de 484 piksel olarak atadık. Siz bu değeri değiştirebilirsiniz. Sonra bir arkaplan rengi atadık. Burada önemli olan, yukarıda hazırlamış olduğumuz yuvarlak resimde kullandığımız renk değerini aynen kullanmaktır (#5577bb).

İkinci adımda yazılarımızı ve resimlerimizi, yani içerik eklemesi yapacağımız orta alanı biçimlendiriyoruz. Sırasıyla yazı tipini, hizalamasını ve rengini atıyoruz. Son olarak ise Padding ile içeriğimizin sağ ve sol kenarlardan uzaklığını 20 piksel olarak belirliyoruz.

Önemli olan bu üçüncü adımda, kutumuzun sol (left) tarafındaki üst ve alt köşelerini biçimlendiriyoruz. Buradaki kritik nokta, arkaplan ataması yaparken kullandığımız 0px ve -15px değerleridir. Bu değerlerin nasıl belirlendiğini aşağıdaki koordinat düzleminde görebilirsiniz.

Son adımda ise kutumuzun sağ (right) tarafındaki üst ve alt köşeleri biçimlendiriyoruz. Buradaki önemli nokta, height:15px ile bu üst ve alt köşelerin yüksekliğinin 15 piksel olmasını sağlamak. Hatırlarsanız bizim yuvarlak resmimiz 60 piksel yüksekliğindeydi. Ama bu resmimizi 4 parça olarak düşündüğümüz için (60 / 4) 15 değerini kullandık.

Toplam 4 adımda yazmış olduğumuz kodların tamamı şöyle oldu:

Koordinat Düzlemi

3. ve 4. adımlarda arkaplan resmi tanımlarken 0px, -15px, -30px ve -45px değerlerini kullanmıştık. Peki ama bu değerler nasıl belirlendi? Ben, arkaplan resmini bir koordinat düzleminin 4. bölgesindeymiş gibi düşünüyorum.

Biliyorsunuz, hazırladığımız yuvarlak resmi 4 parçadan oluşuyormuş gibi düşünüyoruz. Her bir parçayı da 15 piksel olarak kabul ediyoruz. İşte böyle olunca her bir parçanın başlangıç noktası, koordinat düzleminin -y eksenindeki noktalara tekabül edecektir. Ve biz de bu noktaları CSS içerisinde arkaplan ataması yaparken aynen kullanıyoruz.

Sonuç

Yazının başında da dediğim gibi yuvarlak köşeli kutular yapmanın bir çok yöntemi var. Bana en uygun yöntem buymuş gibi geliyor. Sizin de kendinize özgü bir yönteminiz varsa lütfen yorum kısmında belirtin. Böylece en uygun yöntemi birlikte bulmuş oluruz.

Yapmış olduğumuz uygulamanın demosuna buradan ulaşabilirsiniz.

Alıntıdır, Anlatanlara Teşekkürlerimizi Sunuyoruz.