Yuvarlak köşeli tablo veya kutu oluşturma

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

CSS3 yuvarlak köşe oluşturma örnekleri Kendin Dene
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;

    }



YORUMLAR




10510  kez okundu.

Online Kullanıcı Sayısı 1012