CSS 2 nin ardından gelen CSS 3′de işimize yarıyacak bir çok yeni görsel özellik geldi..Bunları gerek yeni temalarımda gerekse yaptığım diğer bir çok işte kullanıyorum..

Fakat her ne kadar eski browserlarda yani internet explorer ve opera (10.5 üstünde destekliyor) gibi eski sürüm tarayıcılarda desteklemese de gün gittikçe artan kullanıcı sayısıyla Firefox ve Chrome tarafından destekleniyor..

Bu kodlardan en çok sevdiğim ise daha önceleri yapmak istediğimiz de photoshopta tek tek köşelerini oluşturup background vs vererek resimlerle yaptığım oval köşeli tablolardı..CSS3 de gelen bu özellik sayesinde artık kolaylıkla istediğimiz tabloyu istediğimiz şekilde ovalleştirebiliyoruz..

Yuvarlak Köşe (Border Radius) kullanımıyla ilgili birkaç örnek vermek istedim..

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Kodları sayesinde 10 pixel’lik oval kenarlar oluşturabiliyoruz..İsterseniz bu kodları her köşeye göre de özelleştirebiliyoruz..

-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 1px;
border-top-left-radius: 4px;
border-top-right-radius: 3px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 1px;

Bu kodları ayrı ayrıda kullanabiliyoruz..

Bildiğiniz gibi top (üst) bottom (alt) left (sol) right (sağ) demekti ingilizcede bu değerlere göre sitemizdeki istediğimiz bir css tablosuna atayabiliyoruz..

Eğer bu kodlara kafanız bulandıysa CSS Rounded Corner aracı sayesinde köşelerine kaçar pixel olacağını yazarak css kodunuzu üretebilirsiniz..

Örnek bir tablomuzda kullanmak isterken;

.anasayfa {
 border: 1px solid #CCCCCC;
 background-color: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Şeklinde kullanabiliriz.İsterseniz border kullanmadan yani tablo kenarlığı kullanmadan da background u ovalleştirebiliyorsunuz fakat tablo kenarlığı olarak açık renkler kullanarak veya tabloyla ilgili renkler kullanarak daha hoş görsele sahip bir tablo oluşturabilirsiniz..

Kullanım örneğini vermek gerekirse şu an sitede kullandığım ve bu yazıyı okuduğunuz tabloların köşeleri..Eğer internet explorer veya eski sürüm diğer tarayıcılarla girmiyorsanız oval şekilde gözükecektir..

Tema yaparken arada kodları unutuyorum o  yüzden buraya yazmak istedim :) Belki işine lazım olan olabilir..