Bol bol seyahat ederim, fotoğraf çekerim, film izlerim ve kitap okurum. Genel anlamda insanları anlamam ve onlar da beni anlamazlar. Zaten sessizlik hakkında söylenen herşey gürültüden ibaret değil midir? 
RSS ile takip edin
CSS ile Yuvarlak Köşeler Oluşturmak
Web sitesi ya da tema tasarımı yaparken yuvarlak köşeler kullanmak bir tercih meselesi olabilir. Statik grafikler kullanarak bu işi halletmek daha kolay olsa da dinamik yani değişken boyutlu dikdörtgenler için de bu işi halletmenin bir yolu var. Hazır javascript kodlarını kullanarak yapabilir ya da şimdi anlatacağım şekilde CSS tabanlı olarak çözüme ulaşabiliriz.
Öncelikle kullanmak istediğimiz rengi seçelim, örnek olarak burada da kullandığım #94D730 rengini seçiyorum. Tasarımcılar için vazgeçilmez olan Photoshop programını açıyorum. 40×40 piksellik bir döküman ile başlıyorum ve 40 piksel çapında bu renkte bir daire çiyorum. Anti-alias seçili olması sizi keskin ve pikselleşmiş görüntüden kurtararak yumuşak kenarları olan bir çizim yapmanızı sağlar. Bu dairenin dörtte birini kırparak 20×20 piksel boyutlarında bir çeyrek daire oluşturup bunu kaydediyorum. Sonra 90 dereceler halinde döndürerek diğer köşeleri de kaydediyorum ve elimde dört adet köşe grafiği oluyor.
Sol Üst için grafik
Sağ Üst için grafik
Sol Alt için grafik
Sağ Alt için grafik
CSS dosyamıza aşağıdaki biçimlendirmeyi ekliyoruz;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .yuvarlak_kose { background-color:#94D730 ; color: #FFFFFF; width: 400px; } .yuvarlak_kose p { margin: 0 15px; } .yuvarlak_kose_ust { background: url(ustsag.jpg) no-repeat top right; } .yuvarlak_kose_alt { background: url(altsag.jpg) no-repeat top right; } img.koseler { border: none; width: 20px; height: 20px; display: block; } |
PHP veya HTML sayfamızda ise aşağıdaki şekilde kullanıyoruz:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="yuvarlak_kose"> <div class="yuvarlak_kose_ust"> <img src="ustsol.jpg" alt="" width="20" height="20" /> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. <div class="yuvarlak_kose_alt"> <img src="altsol.jpg" alt="" width="20" height="20" /> </div> </div> |
Köşelerin boyutunu 20 piksel olarak değilde daha küçük alabilirsiniz. Dikdörtgenin boyutunu da temanıza göre düzenleyebilirsiniz. Aşağıya örnek dosya ve grafikleri incelemeniz için ekliyorum. Tüm dosyalar aynı klasör içinde olacak şekilde açarak test edebilirsiniz. Kolay gelsin..
Bu yazımı beğendiyseniz, RSS ile yeni yazılarımdan haberdar olabilirsiniz. Gmail hesabınız varsa tüm beğendiğiniz siteler için Google Reader kullanabilirsiniz.
Daha az kod daha yenilikçi bir hareket ile bu işlemi CSS3 teknikleri ile yapmak daha mantıklı olabilir..
Daha az kod ve grafiksiz bir uygulamayla sitenizin yükünü hafifletebilirsiniz..
.yuvarlak_kose {
background-color:#94D730 ;
color: #FFFFFF;
width: 400px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat
massa quis enim.
FF4+ie7+vs..
-moz-box-shadow: 0 0 5px #779900;
-webkit-box-shadow: 0 0 5px #779900;
box-shadow: 0 0 5px #779900;
kodunu ekleyerek gölgelendirmede verebiliriz..
Hehe, elbette.. yazının 2007 de yazıldığı düşünüldüğünde güncelleme iyi olmuş.
Güzel bilgi, teşekkürler.
.koseyuvarla{
border-radius: 10px;
}
bu kod ile resim kullanmadan her türlü nesnenin köşesini yuvarlayabilirsiniz..
Benim isteğim yumuşak köşe öyle değil benim istediğim bir tablo çizdik ve tablo bildiğimiz gibi köşeli oluyor ama bazı sitelerde tabloların kenarlarının yumuşatılmış şekilde görüyorum ve bildigim kadarı ile onu css ile yapıyorlar onu nasıl yapıyorlar bilmiyorum bilen varsa yardımcı olabilirmi
şuan klasik yöntem denebilir fakat bundan sağlıklısıda pek yok benim gördüğüm teşekkürler hocam ellerinize sağlık
Arkadaşların yazdığı gibi bu biline klasik bir yöntem. Emeğe saygı ve paylaşım için teşekkürler.
Javascript ile bu olay yapılıyor fakat ben denediğimde sayfayı biraz kastığını gördüm.
2009 da herkese başarılar dilerim.
işime yaradı teşekkürler.
Arkadaşlar bir soru sormuştum ama kendim cevabını buldum. JS veya herhangi bir eklenti kod kullanmadan sadece CSS ile köşe oluşturabiliyorsunuz. Buyrun sitemde gerekli kodu paylaştım.
Selamlar
Bu şekilde köşe oluşturmak sorun değilde, sanırım hiç resim kesmeden veya resimlerle uraşmadanda yuvarlak köşe oluşturabiliyormuşuz. Bu konu ile ilgili olarak bilgisi olan varmı ?
Kolay Gelsin
Ayrıca böyle birşey buldum, umarım yardımcı olur
Bu arada yine de emeğin ve paylaşım için sağol, ellerine sağlık siten de harika ;)
bu yöntem çok klasik, resim kullanmadan da css’de yuvarlak köşe yapılabiliyor.
Şurada da konu ile ilgili bir yazım mevcut.
hüseyin Bey o konuda birşey bilmiyorum, ama wordpress-tr forumlarında yardım bulabilirsinizx.
Merhaba hakkı hocam.
sorum bu konuyla biraz alakasız olabilir kusuruma bakma.
ben blog umda bir köşe yapıp orada yeni bir yazar oluşturup o yazar üzerinden yazdığım yazıların listelenmesini istemekteyim. mesela en çok okunan yazılar kısmı gibi. burası en çok okunan değilde a yazarının yazdığı yazıların listeleneceği bir yer olucak. oraya nasıl bir kod koymam lazım?
Eğer grafiklerle ve kodlarla fazla uğraşmayı sevmiyorsanız bu işi sizin yerinize yaptıracağınız bir site olarak http://www.roundedcornr.com adresini deneyebilirsiniz.
Hocam verdiğiniz link ölmüş, başka alternatifler var mı?
link çalışıyor, geçici bir kesilme olmuş sanırım
harikasın yaw…bütün işlerimi bitirirsem bunu da denicem hoşuma gitti