RSSCSS ile Yuvarlak Köşeler Oluşturmak
28 Temmuz 2007, 15:26 • Kategori: Blog, CSS • 10 yorum var (RSS).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. 40x40 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 20x20 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;
.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:
<div class="yuvarlak_kose"> <div class="yuvarlak_kose_ust"><img src="ustsol.jpg" height="20" width="20" /></div> Son zamanların gözde dijital manipülasyonu hdr. Yani tam açılımıyla High Dinamic Range. Elimizin altındaki en büyük bilgi kaynağımız internete şöyle bir baktığımızda bu konuda yeterince kaynak bulabiliyoruz. Yine de bu işi hiç bilmeyenlere ve balıklama dalmak isteyenlere açıklama gereği duydum.. <div class="yuvarlak_kose_alt"><img src="altsol.jpg" height="20" width="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çin olacak şekilde açarak test edebilirsiniz. Kolay gelsin..
harikasın yaw…bütün işlerimi bitirirsem bunu da denicem hoşuma gitti
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.
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?
hüseyin Bey o konuda birşey bilmiyorum, ama wordpress-tr forumlarında yardım bulabilirsinizx.
Şurada da konu ile ilgili bir yazım mevcut.
bu yöntem çok klasik, resim kullanmadan da css’de yuvarlak köşe yapılabiliyor.
Bu arada yine de emeğin ve paylaşım için sağol, ellerine sağlık siten de harika ;)
Ayrıca böyle birşey buldum, umarım yardımcı olur
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
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.
http://www.aybardumlu.com