atib3rk # h4ck3r’s d4iLy » aB » Firefoxda Resim Kullanmadan Oval Köşeler Yapmak

Firefoxda Resim Kullanmadan Oval Köşeler Yapmak

Günümüzde artık bir çoğumuzun normal tablo sitilleri yerine kullandığı oval köşeli tablo sitillerini firefox tarayıcımızda resim kullanmadan yapacağız.Küçük bir ayrıntı fakat paylaşmak istedim işe yarar ve yeni başlıyan arkadaşlar bilmeyebilir diye düşündüm Firefox tarayıcılarımızda tablo köşelerimize ovallik vermek için bir kaç satır CSS koduyla bu işi çözebiliriz.Öncelikle tablomuzu oluşturalım.Ben yeni yaptığım tasarım üzerindeki kodları düzenliyip bu kodlar üstünde anlatıcam;

<!--HTML-->
<div id="menu">
<ul>
	<li><a href="#">atib3rk</a></li>
	<li><a href="#">.</a></li>
	<li><a href="#">oRg</a></li>
</ul>
</div>

<!--CSS-->
body{
background:#333;
}
#menu{
margin:0;
}
#menu ul {
margin:0;
padding:0;
list-style:none;
}
#menu li {
display:inline;
float:left;
margin-left:5px;
padding:0;
}
#menu a {
margin-top:10px;
padding:5px 5px 4px 5px;
text-decoration:none;
font:bold 20px Verdana;
color:#000;
background:#fff;
border:2px solid #ff0048;
display:block;
float:left;
}
#menu a:hover {
background-position:right bottom;
border-color:#FF9300;
}

Şuanki elde ettiğimiz görüntü

Buraya kadar herşey tamam Sıra geldi Firefox için bir kaç satır ufak kodla bu şekli dahada estetik hale getirmek.Kodumuz -moz-border-radius. Bu kod ile sadece Firefox tarayıcılarımızda belirttiğimiz nesnenin köşelerini oval şekle sokabiliriz.Kullanım şekilleri;

-moz-border-radius-bottomleft - Sol Alt Köşe Derecesi
-moz-border-radius-bottomright - Sağ Alt Köşe Derecesi
-moz-border-radius-topleft - Sol Üst Köşe Derecesi
-moz-border-radius-topright - Sağ Üst Köşe Açısı

CSS kodlarımızın arasına ekliyoruz ve son şekline bakalım;

body{
background:#333;
}
#menu{
margin:0;
}
#menu ul {
margin:0;
padding:0;
list-style:none;
}
#menu li {
display:inline;
float:left;
margin-left:5px;
padding:0;
}
#menu a {
margin-top:10px;
padding:5px 5px 4px 5px;
text-decoration:none;
font:bold 20px Verdana;
color:#000;
background:#fff;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
border:2px solid #ff0048;
display:block;
float:left;
}
#menu a:hover {
background-position:right bottom;
border-color:#FF9300;
}

Örnek Çalışma

Bilgiler
Geri İzleme
Benzer Yazilar
Yaziyi Paylaş
Sosyal İmleme

Kategoriler: Güncel, Web Tasarım - Programlama
Etiketler: border, CSS, mozilla firefox border, oval köşeler
Toplam Okunma Sayısı 384 | Bugün Okunma Sayısı 2
Konu Yayınlanma Tarihi: 2 Ekim 2008, 23:58
Yazıya Yapılan Yorumlar İçin RSS

9 Yorum Yapılmış

1

Storm-X
Perşembe 2 Eki 2008 3:17 am

Teşekkürler ATiB3RK Güzel Bir Paylaşım.Ama İşte Tek Sorun İE’de Aynı Göstermemesi.İE’de Aynı Olsa Çok Güzel Olucak.
2

müJdaT
Perşembe 2 Eki 2008 8:29 am

Anlaşılır bir anlatım olmuş teşekkür ederim Berkan.
3

Mehmet Selim
Perşembe 2 Eki 2008 12:57 am

Güzel anlatım berkan. İE 8 de sanırım bu sorun ortadan kalkar hatta İE8 BETA 2 bilgisayarında yükle olan biri test edebilir.
4

ATiB3RK
Perşembe 2 Eki 2008 11:42 pm

Bu özellik diğer tarayıcılar için bir sorun değil sadece Firefox’un ayrıcalığı sanırım
5

Mehmet Selim
Perşembe 2 Eki 2008 2:04 am

Berkan o zaman şu açıdan bakalım bu özelliğin firefox’da olması hiç bir işe yaramaz.

İE’nin pazarda ki payı ;
%71,5

Şöyle bir düzeltme yapalım o zaman İE 8′de bu özellikte eklenirse iyi olur.
6

ATiB3RK
Perşembe 2 Eki 2008 10:31 am

Ah abi ahhh biz senle bu konuda hiç anlaşamıycakmıyız
7

renkli teneke » Renkli Arşiv » İnternet Çöplüğünden Seçmeler #2
Perşembe 2 Eki 2008 2:10 pm

[...] # - Bir Telefondan Daha Fazlası: Omnia # - Firefoxda Resim Kullanmadan Oval Köşeler Yapmak # - Jaiku ve Özellikleri # - 15 Photoshop Yazı Efekti! # - Lego Mac Pro (Şiddetle tevsiye - [...]
8

#1 Seçme 5 | HedeHödö
Perşembe 2 Eki 2008 3:21 pm

[...] 5-Firefoxda Resim Kullanmadan Oval Köşeler Yapmak [...]
9

Mehmet Selim
Perşembe 2 Eki 2008 7:16 pm

Zamanı gelince anlaşıcaz berkan sende yola geliceksin : )

Forever MS : )