CSS3 ile gelen en önemli yeniliklerden birisi de görsel kullanmadan yuvarlak köşeler oluşturabilmemize imkan sağlayan border-radius özelliğidir. Eskiden hatırlıyorum da basit bir yuvarlak köşe oluşturmak için hem köşeler için görseller kullanır hem de bu yuvarlak köşeleri nesnemize eklemek için iç içe satır satır kod yazmak zorunda kalırdık. Neyse ki standartlar zamanla çok daha yaygın hale geliyor. Bu sayede böyle çok kullanılan teknikler için her gün daha pratik çözümler üretiliyor.
border-radius
CSS3 ile birlikte gelen border-radius ile hiç görsel kullanmadan nesnelerimizin köşelerini yuvarlak yapabiliriz. Örnek kullanımı ise aşağıdaki şekildedir.
Tüm köşeleri aynı anda yuvarlamak için:
|
1 |
border-radius:2em; |
Köşeleri tek tek yuvarlamak için:
|
1 2 3 4 |
border-top-left-radius:2em; //Üst sol köşe border-top-right-radius:2em; //Üst sağ köşe border-bottom-right-radius:2em; //Alt sağ köşe border-bottom-left-radius:2em; //Alt sol köşe |
Not: Yuvarlama miktarını belirlemek için kod içerisinde benim kullandığım 2em şeklinde olduğu gibi uzunluk ölçüsü yerine yüzde (%) değer de girebilirsiniz.
Örnek
CSS
|
1 2 3 4 5 6 7 8 |
.kutu{ border: 2px solid #797c83; border-radius: 10px; width: 100px; padding: 10px; text-align:center; color:#e65d10; } |
HTML
|
1 |
<div class="kutu">yakuter</div> |
Sonuç
Kaynaklar ve Araçlar
Kimi zaman hem vakit kazanmak hem de ek yükten kurtulmak için çevirimiçi araçlardan faydalanırız. CSS3 ile yuvarlak köşeler oluşturabileceğiniz bazı siteler aşağıda listelenmiştir.
- W3Schools CSS3 Border Radius
- http://border-radius.com
- http://cssround.com
- http://css3gen.com/border-radius/
- http://www.cssmatic.com/border-radius
- http://www.cssportal.com/css3-rounded-corner/
