CSS 3 ile Resimsiz Oval Köşeler

10-11-2008 09:11 PM

CSS 3 ile hiç resim kullanmadan düz köşeleri oval hale getirebileceğinizi biliyor muydunuz?

Baştan uyarayım arkadaşlar, css 3 kullanarak oval köşeler yaparsanız şu tarayıcılarda düzgün olarak gözükür:

- Mozilla Firefox
- Google Chrome
- Safari

Razıysanız derse geçelim. Öncelikle oval köşeler yapmak için iki ayrı kod kullanacağız çünkü firefox ile safari’nin algıladıkları kodlar farklı. ( Chrome ve Safari aynı CSS altyapısını kullandığı için, ikisinde bir kodla oval köşeler oluşturabiliyoruz. )

Firefox’ta oval köşeler için aşağıdaki kodu kullanıyoruz:

Kod:

-moz-border-radius

Chrome ve Safari için ise:

Kod:

-webkit-border-radius

Bunlar px cinsinden değerler alırlar. ( Radius değeri px cinsinden olur çünkü ) Örnek:

Kod:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

Tabi isterseniz her köşe için tek tek değerler atayabilirsiniz. 4 köşe için ayrı ayrı kodu kullanmak isterseniz:

Kod:

-moz-border-radius-topleft / -webkit-border-top-left-radius

-moz-border-radius-topright / -webkit-border-top-right-radius

-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius

-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Yukarıdaki kodları çok az İngilizce biliyorsanız anlayabilirsiniz ama yinede Türkçe karşılıklarını verelim:

- top: üst
- bottom: alt
- left: sol
- right: sağ

Örneğin sadece üst köşeleri yuvarlatmak istiyorsanız:

Kod:

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

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

-webkit-border-top-left-radius:10px;

-webkit-border-top-right-radius:10px;

Bir dersimiz daha bitti. Hoşçakalın…

Kaynak:

http://www.css3.info/preview/rounded-border/

10-12-2008 11:26 AM

sağolun ama bu kodları dreamweawer da nasıl kullanıcaz biraz daha bil verirseniz sevinirim...

Benzer Konular...
Konu:		Yazar	Cevaplar:	Gösterim:	Son Mesaj
	CSS ile Birkaç Tıkla Oval Köşeler	SoniQuake	0	12	10-11-2008 09:10 PM Son Mesaj: SoniQuake

Normal Mod \| Çizgisel Mod CSS 3 ile Resimsiz Oval Köşeler
Yazar	Mesaj