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. İ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> </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
-
}
İ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.
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. İş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
Yorum takibi
Geri izleme
Yazıyı Paylaş
29 Mart 2008, 17:07
Programlama
Bugün 4 kez, toplam 2,491 kez okundu.
css, yuvarlak
29 Mart 2008, 17:31
Ellerine sağık, anlaşılır ve güzel bir anlatım olmuş.
29 Mart 2008, 18:40
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
29 Mart 2008, 20:42
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ı.
29 Mart 2008, 22:19
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.
29 Mart 2008, 22:31
Ö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
İmaj dosyası
İç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>
İmaj dosyaları kutu rengi ile aynı olmalı ki yuvarlak bir kutumuz olabilsin.
Adaş gerekli ödemeyi hesabıma havale edebilirsin
29 Mart 2008, 23:00
Arkaplan sorunu olmaması için gif kullansak ?
30 Mart 2008, 00:10
@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.
İkinsici, 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.
30 Mart 2008, 09:09
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ı
30 Mart 2008, 09:47
@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
30 Mart 2008, 14:32
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. İlk 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)
İkincisi 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.
30 Mart 2008, 14:54
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.
30 Mart 2008, 23:07
Faydalı bir anlatım olmuş, teşekkürler.
30 Mart 2008, 23:12
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 
31 Mart 2008, 15:46
[…] “Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak” Bağlantı […]
31 Mart 2008, 17:01
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.
1 Nisan 2008, 12:49
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
5 Nisan 2008, 12:31
@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
8 Nisan 2008, 10:18
Başarılı bir çalışma olmuş diğer çalışmaların gibi
8 Nisan 2008, 12:00
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.
18 Nisan 2008, 08:32
ç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/
19 Nisan 2008, 09:52
ç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!
21 Nisan 2008, 09:10
daha önce hiç aklıma gelmemişti tek resimle yapmak …
siteni sık kullanılanlara ekledim takip edicem üstat.
22 Nisan 2008, 10:19
İnsanın kendi yöntemi gibisi yok!
Ben de Apple’ın sitesindeki yöntemi kendi yöntemim olarak benimsedim.
29 Nisan 2008, 09:48
Ç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