CSS3 ile yuvarlak köşeli kenarlıklar

Yuvarlak köşeler için W3C CSS3 ile birlikte yeni bir özellik ekledi :border-radius. CSS3 ‘ü destekleyen tarayıcıların sayılarının artması sebebiyle bizde yavaş yavaş bu özellikleri kullanmaya başlıyoruz.

Mozilla/Firefox, Safari 3 ve Chrome kullanıcıları burada yuvarlak köşeli bir kutu görecekler.

Aşağıda ilgili kutunun HTML kodu bulunmakta.


<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

Sadece belli köşelere yuvarlak kenarlık vermek için de aşağıdaki özellikleri kullanabiliriz:

  • -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

Kaynak

Etiketler: ,

Dış (harici) linkleri css ile şekillendirmek

Bugün (karşımıza en sık Techcrunch‘da çıkan) sitenin dışına verilen linkleri CSS ile  nasıl şekillendireceğimizi göreceğiz. Bunu yaparken de CSS’de ki attribute özelliğinden yararlanacağız. Öncelikle dış(harici) linklerin yanına ekleyeceğimiz görseli buluyoruz. Ben bu örnekte aşağıda gördüğünüz görseli kullanacağım. Görseli sunucumuzda “images” klasörü altına atıyoruz.

externallink.gif

Bu görseli  http: ile başlayan bütün linklerin yanına eklemek için aşağıdaki kodu css dosyamıza ekliyoruz.


a[href^="http:"] {
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 15px;
}

Bundan sonra http ile başlayan ama kendi sitemize giden linklerin normal gözükmesi için aşağıdaki kodu ekliyoruz.

a[href^="http://www.siteadiniz.com"], a[href^="http://www.siteadiniz.com"] {
background-image: none;
padding-right: 0;
}

Artık dış (harici) linklerimiz yanında yukarıdaki görsel ile gözükecek.

Dış bağlantı:

İç bağlantı:

Google Earth artık tarayıcıda

Etiketler: , , ,

Yeni proje: Validchecker.com

Validchecker

İsmi Validchecker olan yepyeni bir proje ile karşınızdayım. İsim konusundaki yaratıcılığımdan anlayacağınız üzere bu site rss,html ve css dökümanlarının w3 geçerlilik (validation) durumunu periyodik olarak kontrol etmekte. Kontrol etmekle kalmayıp belirlediğiniz sayfalarda eğer hata varsa size RSS veya mail yoluyla da bildirmekte. Kendi sayfama yeni yazı girdiğimde sürekli bozulan validation durumu sinirimi bozunca kendim için yaptım bu siteyi.Umarım sizde beğenir ve kullanırsınız.

Etiketler: , , , ,

Internet Explorer 8 beta 1 çıktı…

Internet Explorer 8 ‘in beta 1 versiyonu yeni 8 özelliği ile artık kullanımda. Yarın işe gidip yükleyip test etmeden önce bu 8 özelliği ve bu haberiyazmak istedim. IE’nin yeni 8 özelliği aşağıdaki gibiymiş:

  1. CSS 2.1 desteği
  2. CSS Certification
  3. Daha iyi performans
  4. HTML 5
  5. Geliştirici Araçları (Umarım bahsettikleri Web Devoloper eklentisinin biraz değişik verdiyonu değildir)
  6. Etkinlik (İçeriğe göre değişen sayfaya özel araçlar)
  7. WebSlices (Sayfanın istenilen bölümüne RSS olmadan abone olmak)
  8. İndirilmeye hazır vede nazır olması
  9. 9′uncuda benden olsun. Acid2 testini geçmiş olması

WebSlices, CSS desteği ve Acid2 testini geçmesi güzel gözükse de konu IE olunca insan önyargıyla yaklaşmaktan kendini alamıyor.Umarım sayfa tasarlarken IE düzgün sonuçlar verirde ekran karşısında çılgına döndürmez bizi.

Etiketler: , , ,

Ücretsiz Türkçe CSS Kitabı

Fatih Hayrioğlu CSS Kitabı

Özenle takip ettiğimiz blogcu Fatih Hayrioğlu bugüne kadar blogunda yazdıklarını toparlayıp bir e-kitap haline getirmiş. CSS öğrenmek veya geliştirmek isteyenler bu kitabı buradan, kaynak kodlarını da buradan indirebilirler. Kendisi ikinci kitabı çıkarmayı da planlamaktaymış.

Etiketler: ,