Kutu veya tabloların köşelerini yuvarlama
Aşağıdaki örnekte kutu1 isimli html elemanının köşeleri yuvarlanmıştır.
CSS3'te border-radius özelliği ile yuvarlak köşeler elde edilebilmektedir. Tüm tarayıcıların yeni versiyonları bu özelliği tanımaktadır.
Ancak tarayıcıların eski versiyonları için -webkit- veya -moz- şeklinde ön ek kullanmak gerekmektedir.
Örnekte tüm şekillerde kullanılarak mümkün olduğunca fazla tarayıcıda çalışması sağlanmıştır.
İçinde radius geçen satırlarda (kırmızı renkle gösterilen), köşeleri yuvarlama miktarı ayarlanmıştır. Shadow geçen satırlarda (turuncu gösterilen) ise tablo veya kutuya gölge verilmiştir.
Shadow ve radius özelliklerinin ikisini bir arada kullanmak şart değildir. İstenirse sadece radius veya shadow da kullanılabilir.
Tarayıcıların çok eski versiyonlarında bu css kodları işe yaramayacaktır.
#kutu1
{
background-color:#ffffff;
color: #696969;
width: 360px;
padding: 7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px #779900;
-webkit-box-shadow: 0 0 5px #779900;
box-shadow: 0 0 5px #779900;
}
Her Köşeyi Farklı Miktarda Yuvarlama
Dilersek nesnelerin her köşesine farklı açılar ile yuvarlama uygulayabiliriz.
border-top-left-radius: 20px;
border-top-right-radius: 50px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 5px;
Ayrıca tek satırda tüm köşeler belirtilebilir:
border-radius: 20px 50px 30px 5px;
border-radius: 20px 50px;
border-radius: 15px 50px 30px:
Bu tür kullanımlarda sol üstten başlayarak saat yönünde sırayla tüm köşeler belirtilebilir.
Eliptik Köşeler Oluşturma
Köşeleri dairesel yapmak yerine eliptik de yapabiliriz. Konu örnekleri kısmını da inceleyiniz.
border-radius: 20px/50px;
border-radius: 50px/20px;
border-radius: 50%;
css tablonun köşelerini yuvarlama, kutuların köşelerini yuvarlama, yuvarlak köşeli tablo, radius, css oval köşe, css yuvarlak köşe
KONU İLE İLGİLİ ÖRNEKLER
|
Tablo veya kutuların köşelerini yuvarlama ve gölge efekti uygulama
|
Kendin Dene
|
Aşağıdaki Css class'ı ile html elemanlarına yuvarlak köşeli kenarlık ve gölge efekti uygulayabilirsiniz. Denemek için yukarıdaki butona tıklayınız.
.kutuYuvarlak
{
background-color:#ffffff;
color: #696969;
width: 360px;
padding: 7px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px #779900;
-webkit-box-shadow: 0 0 5px #779900;
box-shadow: 0 0 5px #779900;
}
17623 kez okundu.