Yuvarlak Köşeli Linkler | bildirgec.org

Bildirgec'de daha önce şu yazıda css round ile yuvarlak köşeli kutucuklar hazırlanmasından bahsedilmişti.

CSS Round ile kutucuk yapma

Yazıyı çevreleyen yuvarlak köşeli bloklar oluşturmadan farklı olarak genellikle tablarda gördüğümüz üzerine gelince değişen yuvarlak köşeli linkler oluşturmak istersek şu CSS kodları kullanılabilir.

1. HTML içinde şu DIV'i yazın:

<div id="navigation"><a href="#">redingot.bildirgec.org</a></div>

2. CSS içinde şu kodları yazın:

#navigation a
{
color: #000;
background: #ffa20c;
text-decoration: none
}

3. Görünümünüz şu şekilde olacak:

Köşeli CSS

4. Sol kenar resmini yükleyin:

Sol Kenar

5. CSS'de değişiklik yapın:

#navigation a
{
color: #000;
background: #ffa20c url(left-tab.gif) left top no-repeat;
text-decoration: none
}

6. Görünümünüz şu şekilde olacak:

Yuvarlak Sol Kenar

7. Şimdi solda gördüğümüz taşmayı önleyelim. Kaydırma yapalım:

#navigation a
{
color: #000;
background: #ffa20c url(left-tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}

8. Yeni görünüm şu şekilde olacak:

Yuvarlak ve Ötelenmiş Sol Kenar

9. Şimdi tab linkimizin sağ tarafının yuvarlaklaştırılmasına gelelim:

<div id="navigation"><a href="#"><span>redingot.bildirgec.org</span></a></div>

10. Sağ kenar resmini yükleyin:

Sağ Kenar

11. Eklenen span elementi için CSS:

#navigation a span
{
background: url(right-tab.gif) right top no-repeat;
}

12. Sağ kenar için de öteleme yapalım:

#navigation a span
{
background: url(right-tab.gif) right top no-repeat;
padding-right: 10px
}

13. Linkin görüntüsü:

CSS Rounded Corners

14. Üzerine gelince kenarlar:

Sol Kenar - üzerine gelince

Sağ Kenar - üzerine gelince

15. Üzerine gelince linkin görüntüsü:

Hover effect

16. Bunun olması için eklenmesi gereken CSS:

#navigation a:hover {
color: #fff;
background: #781351 url(left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}

#navigation a:hover span
{
background: url(right-tab-hover.gif) right top no-repeat;
padding-right: 10px
}

Böylece gezinti (navigasyon) bölümümüz için tablar oluşturabiliriz. Kenar resimleri değiştirilerek tamamen yuvarlak köşeli linkler de yapılabilir.

Bu tarz menüler ve linkler için resimler kullanmak yerine CSS'e başvurmak birçok açıdan faydalıdır.

• Resimler oluşturup dosyada tutmaktan kurtuluruz.
• Üzerine gelinince resim değiştirme olayından kurtuluruz.
• En önemli bir nokta da sayfanın boyutlandırılması siteyi kullanan kişi tarafından değiştirilince yazılarda boyut değişimi olurken resimlerde bu olmamaktadır. Zaten resimde boyut değişimi olursa da resimin görünüm kalitesi bozulmaktadır. İşte burada yapılan büyütme ve küçültmeler CSS ile oluşturduğumuz linklerin orijinalliğini kaybetmeden büyüyüp küçülmesini sağlamaktadır.

Bu yazının hazırlanmasında bu yazıdan faydalanılmıştır.