Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak
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. ilk ö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:
<div class="yuvarlak">
<div class="ust"><div> </div></div>
<div class="ort">.................</div>
<div class="alt"><div> </div></div>
</div>
ilk ö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> </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> </div> kodlarını ekliyoruz.
Böylece HTML kodlarımız hazırlanmış oldu. şimdi sıra, CSS ile biçimlendirmeye geldi.
3) CSS ile biçimlendirme yapılması
Yukarıdaki HTML kodlarını CSS ile biçimlendirmek için şu 4 adımı takip etmeliyiz:
Adım 1:
.yuvarlak {
width: 484px;
background: #5577bb
}
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).
Adım 2:
.yuvarlak .ort {
font: normal 12px/18px Helvetica;
text-align: justify;
color: #fff;
padding: 0 20px
}
ikinci 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.
Adım 3:
.yuvarlak .ust {
background: url(yuvarlak.png) left 0px no-repeat
}
.yuvarlak .alt {
background: url(yuvarlak.png) left -15px no-repeat
}
Ö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.
Adım 4:
.yuvarlak .ust div {
height: 15px;
background: url(yuvarlak.png) right -30px no-repeat
}
.yuvarlak .alt div {
height: 15px;
background: url(yuvarlak.png) right -45px no-repeat
}
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:
<style type="text/css">
/* = 1. adım
----------------------------------------------------- */
.yuvarlak {
width: 484px;
background: #5577bb
}
/* = 2. adım
----------------------------------------------------- */
.yuvarlak .ort {
font: normal 12px/18px Helvetica;
text-align: justify;
color: #fff;
padding: 0 20px
}
/* = 3. adım
----------------------------------------------------- */
.yuvarlak .ust {
background: url(yuvarlak.png) left 0px no-repeat
}
.yuvarlak .alt {
background: url(yuvarlak.png) left -15px no-repeat
}
/* = 4. adım
----------------------------------------------------- */
.yuvarlak .ust div {
height: 15px;
background: url(yuvarlak.png) right -30px no-repeat
}
.yuvarlak .alt div {
height: 15px;
background: url(yuvarlak.png) right -45px no-repeat
}
</style>
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. iş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
Ellerine sağık, anlaşılır ve güzel bir anlatım olmuş.
Teşekkür ederim. Ben de bu tek resimle koordinatla yapılan mouseoverların, kutuların nasıl yapıldığını merak ediyordum. Öğrenmiş oldum
teşekkürler, çok güzel anlatmışsınız.
Bir noktayı da ben ekleyeyim, resim işleme programı ile hazırladığımız yuvarlakların arka planı da, koyacağımız sitenin arka planı ile aynı olmalı.
Yine çok güzel ve açıklayıcı olmuş. Ellerine sağlık. Çok teşekkür ederim. Sayende yeni birşeyler öğrenerek kendimizi geliştirebiliyoruz.
Öncelikle yazı için ellerine sağlık. şimdi farklı bir yöntemi de ben anlatayım. Bunu anlatıyorum çünkü sanki daha basitmiş gibi geliyor, en azından benim için
imaj dosyası
içerik alanının 500px olduğunu varsayarak 500px genişliğinde üst tarafa koyacağımız sol ve sağ yuvarlaklı bir imaj dosyası (ust_yuvarlak.gif) ile yine 500px genişliğinde alt tarafa koyacağımız sol ve sağ yuvarlaklı imaj dosyası (alt_yuvarlak.gif) gerekli.
Öncelikle senin gibi HTML kısmını anlatayım.
HTML Düzeni
<div id=’kutu_alt’><div id=’kutu_ust’><div id=’kutu_icerik’>Merhaba yeni
dünya…</div></div></div>
CSS Düzeni
<style type=”text/css”>
#kutu_alt {
width:500px;
float:left;
background:url(alt_yuvarlak.gif)
no-repeat left bottom;}
#kutu_ust {
float:left;
width:100%;
background:url(ust_yuvarlak.gif)
no-repeat left top;}
#kutu_icerik {
padding:10px 0 10px 10px;
color:#000000;}
</style>
imaj dosyaları kutu rengi ile aynı olmalı ki yuvarlak bir kutumuz olabilsin.
Adaş gerekli ödemeyi hesabıma havale edebilirsin
Arkaplan sorunu olmaması için gif kullansak ?
@MaFiAMaX
şimdiye kadar senin bahsettiğin yöntemi ben de kullanıyordum. Hatta bu yöntemi en son Gopof‘daki kutuları yuvarlatmak için kullanmıştım.
Fakat bu yöntemin 2 tane dezavantajı var:
Birincisi, yuvarlak resimlerin genişlikleri daha büyük olacağından dosya boyutu artacak ve bu da sayfanın yüklenme hızını az da olsa etkileyecektir. Senin yöntemde yuvarlak resmin genişliği 500 piksel iken, benim yöntemde sadece 15 piksel oluyor.
ikinsici, kutunun genişliğini değiştirdiğinizde mecburen yuvarlak resmin genişliğini de değiştirmelisiniz. Önce kutunuz 500 pikseldi ama sonradan 350 piksel yaptınız. Ne olacak? Yuvarlak resmi, genişliği 350 piksel olacak şekilde yeniden değiştirmek zorunda kalacaksınız.
Ayrıca sen “alt_yuvarlak” ve “ust_yuvarlak” olarak 2 farklı dosya yapmışsın. Eğer kendi yöntemini kullanmaya devam edeceksen bile bunları tek bir dosyada birleştirmeni öneririm
@Deniz
Arkaplan sorunu olmaması için Transparent Gif veya Transparent PNG kullanabilirsiniz elbette. Ben yalnızca tek bir örnek yaptığım için saydamlık efekti kullanma gereği duymadım.
Canım dediğin tüm dezavantajların farkındayım, ancak bu konuştuğumuz dezavantajlar kullanıma göre bize sorun yaşatır. Yani yuvarlatma yaptığın yeri zırt pırt değiştireceksen tabi ki anlattığım yöntem adamı uğraştırır hele bir de bir çok yerde kullanılmışsa.
Dosya boyutları ise zamanımıza göre nerdeyse hiçbirşey. 195 byte
Açıkcası bu zamanda bir kaç kbyte ha eksik olmuş ha fazla.
Dosya birleştirme konusunda ise haklısın.
Bakalım daha hangi yöntemler gelecek, ya sahi yöntemler arttıkça bunları oylatalım mı
@MaFiAMaX
Fakat yine de “genişlik” meselesi bahsettiğin yöntemi kullanmamak için önemli bir sebep. Beni de o yöntemden vazgeçiren bu sebeptir zaten.
Hadi senin güzel hatırın için dosya boyutundaki farkı görmezden gelelim
Çünkü web sayfamızdaki elemanların genişlikleri her zaman sabit olmuyor maalesef. Hele bir de web sayfanızı likid tasarım yöntemiyle tasarlayacaksınız, senin bahsettiğin yöntemin bir geçerliliği kalmıyor.
NOT:
Bu arada yazdığım yorumlar yanlış anlaşılmıyordur umarım. Kendi yöntemimi karşı tarafa kabul ettirme çabası içerisinde değilim. Gerçekten “mükemmeli arama” çabası içerisindeyim. Bu da ancak tartışa tartışa olabilecek birşey. O yüzden farklı yöntemleri bilenler varsa lütfen tartışmaya katılsınlar
Merhaba oldukça güzel bir yöntem ancak daha fazla stilize edilmiş kutular için biraz yetersiz kalacağı düşüncesindeyim.Ben bu tür kutular için 2 yöntem kullanmaktayım;
1. Birinci yöntem sabit kutu boyutuna ihtiyaç duyuyorsam kullandığım yöntem. Ancak yine bunu iki bölüme ayırıyorum. ilk olarak resimlerden fedakarlık ettiğim ama yapımı kolay olan ust bölüm için bir resim, orta için bir resim ve alt için bir resim yöntemi. Bu ben bilindik kutu yöntemi. (Stilize edilmiş kutular için)
ikincisi ise yine sizin yönteminize benzer sağ ve sol köşeler kullandığım yöntem ancak araya bir de orta bölüm için imaj girmekte.
2. Eğer likit tasarım kullanıyorsam resimlerden, işlemci gücü ve bellekten daha fazla harcadığım;
http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/
http://www.schillmania.com/content/projects/even-more-rounded-corners/
bu yöntemi kullanıyorum.Tabi bir de internet explorer hackleri ekleniyor. Ancak bu yöntemlerde tam anlamıyla likit tasarıma uymaz çünkü hazırlayacağınız resim boyutlarına göre çok aşırı yüksek çözünürlüklerde sorun çıkaracaktır.
Ama en güzeli CSS3 ile gelen;
.kutu {
border-radius: 1.6em;
}
yöntemi ancak internet explorer her zaman sorun çıkaracaktır.
Burhan ellerine sağlık. Yine döktürmüşsün. Biz bunun yerine dediğin gibi NiftyCube’ü kullanıyorduk. Güzel oldu anlaşılır bir şekilde artık seninkini kullanırız. Teşekkürler.
Faydalı bir anlatım olmuş, teşekkürler.
Teşekkürler Burhan, ellerine sağlık
Tartışmalara son noktayı koyacak şey sanırım tarayıcıların CSS3 desteği olacak, bekliyoruz 
ben 3 div ve 4 imaj ile yapıyordum. bu yöntem çok kullanışlı geldi bundan sonra böyle yapacağım. teşekkürler.
Nifty Corners ile ilk kez karşılaştım. Oldukça güzel. Bence bunca kod kalabalığına deymez gibi geliyor, nifty corners kullanılmalı. “Bence” tabiki
@superselo
bu kod kalabalığı değil,sanat
bu tekniği tasarımda birçok yerde kullanabilirsin sadece burada değil, ayrıca bu tasarım dünyasında bilinen bir tekniktir expandable box denir buna kimisi 4 resimle yapar kimisi 2 resimle yapar kimisi erhan gibi tek resimle yapar, hatta bazıları abartıp 2 resimle mouseover da yaparlar.
nifty corners bu işi border verdiği kutuları belli pixel aralıklarla kaydırarak yapıyor yani yuvarlak değil onlar yuvarlak efekti verilmiş kareler. dolayısıyla dikkatli bakıldığında özellikle bazı reklerde köşeler tırtıklı görülür şık durmuyor
erhan’ı da tebrik ediyorum çok profesyonel anlatıyor örneklerle resimlerle filan. çok emek verdiği görülüyor. çok faydalandım işlerinden. eyceks ten faydalandım, css mesajboxlardan faydalandım jquery makalelerinden faydalandım hepsini işlerimde kullandım bundan da faydalanıcam. hakkını helal et
Başarılı bir çalışma olmuş diğer çalışmaların gibi
benim geçenlerde yaptığım teknikle birebir aynı diyebilirim çok daha öncesinde bir kaç sene evvel eski bir yöntemle css ile fieldset örneğini açıkladığım formda yeniden soru gelince senin tarif ettiğin şekilde bir örnek hazırlamıştım.
http://forum.ceviz.net/showpost.php?p=362790&postcount=5
şu da video eğitim dosyası:
http://rapidshare.com/files/97169307…alico.rar.html
Ayrıca şu anda site açık olmasada aşağıdaki linkden de sadece iki köşesi yuvarlatılmış olan kutu modelli örneği görebilirsiniz.
bu sayfada sidebar ve content bölümü ölçüleri sabit olduğundan 4 parça yapıp html çoğaltmama gerek yoktu.
http://www.ailetip.com/alico.php
Güzel açıklama eburhan kolay gelsin.
çok önemli bir konuya değinmişsin sevgili Erhan..yazını okuduktan sonra ben de resmi parçalamadan bunu yapmaya çalıştım..yani bütün daire halindeki tek resimle ve sanırım başardım..nasıl yapıldığını aşağıdaki linkte anlattım isteyen inceleyebilir
http://boracanbula.wordpress.com/2008/04/18/tek-arkaplan-resmiyle-yuvarlak-kenarli-tablolar/
çok güzel basit ve anlaşılır bir anlatım olmuş bir kutu için 2-4 resime gerek kalmıyo böylece ve boyutu da düşüyo haliyle, süper düşünce!
daha önce hiç aklıma gelmemişti tek resimle yapmak …
siteni sık kullanılanlara ekledim takip edicem üstat.
insanın kendi yöntemi gibisi yok!
Ben de Apple’ın sitesindeki yöntemi kendi yöntemim olarak benimsedim.
Çok güzel bir yazı olmuş elinize sağlık. Arkadaşlar resim veya JS kullanmadan da köşeli tablolar oluşturabilirsiniz. Bloğumda gerekli makaleyi yazdım.
Kolay gelsin
merhabalar.. bir şey sorucam.. ben bu arkaplan resmini bölmeyi başka türlü yapıyorum… background-position:0px -30px; gibi… yalnız bu kullandığım ie6′da her zaman olmuyor.. aynı site içerisinde bir yer olurken başka bir yerde olmuyor mesela… padding’i hiç denemedim, acaba onda da aynı sorunu yaşar mıyım?
teşekkürler..
JS, resim kullanmadan halletmiştik, şurdaki yöntemle: http://www.html.it/articoli/nifty/index.html
Arkadaşım niftyde de JS kullanman gerekiyor. JS veya resim kullanmadan oluşturmak istiyorsan aşağıdaki adrese bakabilirsin
Resim ve JS kullanmadan CSS ile köşeli tablolar
çok güzel paylaşımlar çok güzel makaleler yayınlamışsın.. ellerin dert görmesin benimle iletişime geçmen mümkün mü?
Çok güzel bi uygulama olmuş. Paylaşım için saol. Ancak 5.1 – 5.5 ve ie6 da açtığımda alt kısım düzgün görüntülenmiyor. diğerlerini geçtim ama ie6 kullanan çok fazla.
Kodu siteden alıp yazdım onda da hata veriyor sizin demonuzda da aynı tepkiyi veriyor.
Tercihe edilesi hoş bir yöntem ama bu yüzden vazgeçecek gibiyim.
Saygılar.
IE6 bu yöntem de IMG dosyasını kutunun altından taşırıyor. Onun için bir çözüm yolu yok mu?
IE 6′da sorun yaşayanlar
1. HTML kodlarındaki karakterlerini silin.
2. CSS kodlarının 4. bölümüdeki height: 15px; satırlarını padding: 7px 0 8px; ile yer değiştirin.
bu şekilde sorunun çözülmesi gerekiyor.
ie6 da problem yaratıyor bence garantili yöntemler kullanmak daha iyi ama yine de güzel olmuş.
Merhaba,
Sonuçta tek bir parça PNG dosyası üzerinden stil uygulanıyor fakat site içerisinde diyelim ki sağda ortada ve solda toplam 10-12 adet kutu yaptım. Arkaplan özel bir tasarım olduğu için saydamlığı yani bu PNG yi kullanmak zorundayım. O kadar kutularda bu stilin uygulaması işlemciyi yorar mı yada sitenin açılışını etkiler mi?
Açıkçası yazıdan çok etkilendim ve şuan üzerinde klasik tablolar ile çalışmakta olduğum resmi bir kurum sayfasında bunu kullanmak istiyorum.
Fakat benim takıldığım kısım önemli. Cevabınızı merakla bekliyorum.
Bu yöntemi arkaplan tasarımı özel olupta yuvarlatma rengini beyaz yapacak olanlar boşuna uğraşmasın. Saydamlık efekti bile işe yaramıyor.
ie6 sorununu kaldırmak için background olan class’lara font-size:0px; yazıldığında sorun ortadan kalkıyor..
Erhan Abi selamlar,
Beni hatırlar mısın bilmem, PCnet’ten hemşerin Aykut.
Uzun zaman olmuştu seni görmeyeli. Tam yuvarlak köşeli kutular yapmak için bir döküman arıyordum ki senin sayfan çıktı karşıma. Siten ne zamandır açık bilmiyorum, ama tam bir bilgi yuvasına çevirmişsin. Umarım keyfin yerindedir.
Aydın’dan selamlar.