HTML Image Map b2s1 Ek4 Ek 6 Ek5 b8s1 b1s1  Ek7 Nitelikler b5s1.htm Ek2 b3s1 Ek3 b7s1 Ek7 Elementler Ek1 b4s1 b6s1  Ek7 Catalogue index previous next

Katlı Stil Sayfaları (Sürüm 3)

Kenar (Border)

Sayfa 3 / 4


 

Kenarların Yuvarlatılması

CSS3 spesifikasyonu, elementlerin kenar çizgilerinin yuvarlatılmasına olanak vermektedir. Bir elementin kenarları dik köşeler halinde birleşebildiği gibi, köşeler yuvarlatılmış da olabilir. Köşelerin yuvarlatılması, teknik resimde, bir düz çizgi ile bir eğrinin birleştirilmesi gibi deterministik bir yönteme dayandırılmıştır. Yuvarlatılmış kenarlı bir poligon, dört tane elipsten oluşmuş gibi kabul edilir. Bu elipslerim merkezleri, bir dörtgenin köşelerine yerleşmiş olduğu varsayılır. Herköşe için elipsin uygun çeyreği (quadrantı) çizilir ve bunlar birer doğru parçası ile birleştirilir. Hepsi bukadar. Aşağıdaki şema bu oluşumu, her elipsin eksenlerinin eşit olduğu bir durum için görüntülemektedir.

border-smoothing

 

Köşelerin yuvarlatılmaları için tanımlanan elipslerin eksenleri, her köşe için farklı olduğu hallerde, yukarıdaki şemaya benzer başka bir yerleşim modellerinden yararlanılarak, köşelerin yuvarlatılmaları sağlanacaktır.

 

Kenar Yuvarlatma Yarıçapları, 'border-x-radius' Özellikleri(IE 6.02 SP2 bu özelliği henüz desteklememektedir)

 

CSS3 de tanımlanmış dört tane kenar yuvarlatma yarıçapı özelliği bulunmaktadır. Bunların tümünün tanımı aynı olduğundan sadece bir tanesi örnek olarak verilecektir.

Üst sağ kenar yarıçapı, 'border-top-right-radius' özelliği, aşağıda verildiği gibi tanımlanmıştır:

 

İsim: 'border-top-right-radius'

Değer: <uzunluk> <uzunluk>

Başlangıç Değeri: 0

Uygulanabilecek Elementler: tüm elementler

Kalıtım: hayır

Yüzde: bildirilmemiştir

Medya: görsel (visual)

Hesaplanan Değer : bildirilen değer

Bu özelliğe ait bir uygulama, border-top-right-radius.htm dosyasında incelenebilir.

Diğer kenar yuvarlatma özellikleri olan, 'border-top-left-radius', 'border-bottom-right-radius' ve 'border-bottom-left-radius' özelliklerinin tanımları yukarıdaki tanımlarla tıpatıp aynıdır.

(IE 6.02 SP2 'border-x-radius' özelliklerinin hiçbirini henüz desteklememektedir)

 

Kenar Yuvarlatma Yarıçapı Kısayol İfadesi, 'border-radius' Özelliği(IE 6.02 SP2 henüz bu özelliği desteklememektedir)

 

Kenar yarıçapı kısayol ifadesi, 'border-radius' özelliği, aşağıda verildiği gibi tanımlanmıştır:

 

İsim: 'border-radius'

Değer: <uzunluk> <uzunluk> ?

Başlangıç Değeri: 0

Uygulanabilecek Elementler: tüm elementler

Kalıtım: hayır

Yüzde: bildirilmemiştir

Medya: görsel (visual)

Hesaplanan Değer : bildirilen değer

Bu özelliğe ait bir uygulama, border-radius.htm dosyasında incelenebilir.

(Kısayol 'border-radius' tanımı, IE 6.02 SP2 de henüz desteklenmemektedir)

Thursday, October 6, 2005 20:27

validate in W3C !