Css Kenar Yuvarlama
22 Ağustos 2015
Css Uygulamaları
Günümüz de css kullanmayan web sitesi yoktur sanırım. Benimde kullanmaktan kaçınmadığım “Border Radius” denilen “Kenar Yuvarlama” işleminin nasıl yapılacağından bahsedeceğim. Internet Explorer’ın eski sürümlerini kullanmıyorsanız, bilinen tüm tarayıcılarda çalışacaktır.
Border Radius özelliği CSS3 ile birlikte geldi ve HTML elemanlarına yuvarlak kenar özelliği verme işini yapıyor. Web 2.0 ve yeni stiller ile birlikte bir çok sitede yerini almış durumda.
Köşeli tasarımlardan hoşlanmıyorsanız bu uygulamadan yararlanabilirsiniz.
Tarayıcı Uyumu: Internet Explorer desteklemiyor (İE9 da gelecek) Firefox 2+ Safari 3+ (kısmen) Opera 10.50+ W3C’s CSS Level 3+ CSS Profile 3.0
- Safari yüzdeli değerleri desteklemiyor.
- Safari/Webkit tabanlı tarayıcılar her 4 köşeye sadece bir tanımı kabul ediyor.
- Safari/webkit tarayıcıları (/) ile ayrılan değerleri kabul etmiyor. Bu gibi değerleri kullanmak için aşağıdaki gibi bir atama yapmalıyız. Elips şeklinde sonuçlar elde etmek için (/) ayracı kullanılır.
-webkit-border-radius: 40px 10px; -moz-border-radius: 40px/10px; border-radius: 40px/10px;
O zaman bir tane örnek yapalım.
div #kutu {
width: 400px;
padding: 20px;
border-radius: 10px; /* Standart */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari ve Chrome */
background: #34b890;
margin-bottom: 10px;
}
İkinci örneğimiz ise istediğimiz köşeleri yuvarlamak.
div #kutu{
width: 400px;
padding: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
background: #34b890;
white-space:pre}
Bunlarla hiç uğraşamam derseniz.. http://border-radius.com/ adresini kullanabilirsiniz.. 🙂