Beşiktaş Haber Portalı

CSS3 ile birlikte artık oval köşelerimizi, yuvarlak köşelerimizi çok daha kolay yapabileceğiz. CSS’yi geliştirenler işimizi daha da kolaylaştırabilmek için Photoshop gibi resim editörleriyle yaptığımız ve resimlerle sitelere eklediğimiz oval köşeler için yeni kodlar eklemişler. Bu kodları yazarak grafiksiz olarak oval köşelerimizi halledebiliriz. Bu özellik kodu “border-radius”tur. Şimdi örnek bir uygulama yapalım o zaman. İlk olarak Xhtml dosyamıza şu kodu ekleyelim:

1
2
3

<div class=”oval-kutu”>
<p>Bu bir paragraftır.</p>
</div>

Gördüğünüz gibi div etiketimize oval-kutu sınıfını atadık. Şimdi de CSS ile oval-kutu sınıfının özelliklerini yazalım:

1
2
3
4
5
6
7
8
9

.oval-kutu {
	background-color: #666; 
	color: #fff; 
	line-height: 20px; 
	width: 200px; 
	padding: 10px; 
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
}

Yukarıdaki kodlardan ilk 5 özellik ve değeri bildiğimiz ve şu anda kullanılan CSS özelliklerdir. Ancak altta gördüğünüz iki özellik kodu biraz farklı. Bu kodlar sayesinde kutumuzu oval yapıyoruz. Bu kodlar 10px.lik değerler almışlardır. Bu demektir ki kutumuz 10px.lik oval köşelere sahip olacaktır.

Peki, bu webkit ve moz ne demek diyebilirsiniz. Webkit Safari için, moz da Firefox içindir.

Ayrıca her köşeye de ayrı ovallik değerleri verebiliriz. Aşağıda ayrı ayrı tüm köşeler için kodları verdim, onları inceleyebilirsiniz:

1
2
3
4
5
6
7
8
9

border-radius: 10px 10px 10px 10px; /* ÜstSol ÜstSağ AltSağ AltSol */
border-radius: 10px 10px 10px; /* ÜstSol ÜstSağ+AltSol AltSağ */
border-radius: 10px 10px; /* ÜstSol+AltSağ ÜstSağ+AltSol */
border-radius: 10px; /* Tüm Köşeler */
 
-webkit-border-bottom-left-radius: 10px; /* Alt Sağ Ovallik Değeri */
-webkit-border-top-right-radius: 10px; /* Üst Sağ Ovallik Değeri */
-moz-border-radius-bottomleft: 10px; /* Alt Sağ Ovallik Değeri */
-moz-border-radius-topright: 10px; /* Üst Sağ Ovallik Değeri */

Görüldüğü gibi köşelere ayrı ayrı değerler verirken son 4 kodda Firefox kodlarının ve Safari kodlarının yazılışı farklı. Çünkü bu standartlar tam oturmuş standartlar değildir.

Unutmayın! Bu özellikleri şu anda hiçbir IE sürümü desteklemiyor.

Not: Bu yazıyı kaynak ve site adres linkini belirterek paylaşabilirsiniz.

Yorumlar