‘opacity’ etiketi için sonuçlar
CSS İpucu 19: Tüm Tarayıcılar İçin CSS İle Saydamlık(Opacity)
Şubat 23rd, 2009 • 19 yorum CSS, Web Standartları, XHTML
Etiketler: css doğrulama, donuklaştırma, İnternet Tarayıcısı, opacity, saydamlık
Daha önce birçok kez bu konuda bana e-posta geldi. Buraya yazmanın mantıklı olacağını düşündüm.
secici {
opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=75); /* IE lt 8 */
-ms-filter: "alpha(opacity=75)"; /* IE 8 */
-khtml-opacity: .75; /* Safari 1.x */
-moz-opacity: .75; /* FF lt 1.5, Netscape */
}
Örneği görmek için tıklayınız.
Kod aslında tek satır olması gerekir ki CSS 3 ile birlikte bu tek satır olacaktır. opacity: değer; tanımı ile halledeceğiz. Ama şu an yürürlükte olan tarayıcılar için yukarıdaki 5 satır kodu yazmalıyız.
Bu kodu yazmak o kadar da sorun değil, ama eğer bu kodu yazdığınız sayfanızı W3C doğrulamasından geçirirseniz aşağıdaki gibi bir hata alacaksınız.
Bence W3C doğrulması çok önemli olmasada bazen şartlar doğrulama gerektirdiğinde(mesela müşteri istediğinde) bu sorunu çözmek için bir kaç yöntem var.
Bu yöntemlerden biri javascript fonksiyonu hazırlayıp bu fonksiyon yardımı ile elemanlarımızı saydamlaştırma;
function donuklastirma(element, donukDeger){
var oe = document.getElementById(element);
// donuklastirma degeri
oe.setAttribute("style", "opacity:"+ donukDeger +";")
if (oe.style.setAttribute) // IE icin
oe.style.setAttribute("filter", "alpha(opacity="+ donukDeger*100 +");")
}
Örneği görmek için tıklayınız.
Diğer bir yöntemde ise ayrı bir css kodu yazıp bu kodu javascript ile ekleyebiliriz
<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" media="screen" href="style/donuklastirma.css" />');
</script>
Sorun: opacity tanımı kapsadığı elemanın içeriğini de etkiler bunu engellemek için Robert Nyman’ın bir çözümü var. http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ denemedim bir bakın isterseniz.
Kaynaklar
- http://blog.evaria.com/2007/validate-css-style-opacity/
- http://snipplr.com/view/10094/crossbrowser-opacity/
- http://perishablepress.com/press/2009/01/27/cross-browser-transparency-via-css/
- http://www.codeguru.com/forum/showthread.php?threadid=458411
- http://snipplr.com/view/707/setopacity/
- http://www.ertugrulhaskan.com/blog/?p=548
- http://www.aybim.com.tr/progs/acsstxt17.html
- http://www.mehmetduran.com/detay.aspx?detay=19
- http://www.kodaman.org/yazi/sizi-css3-ile-tanistiracak-5
- http://www.ahmetcelik.org/?p=220
- http://mfyz.com/?/dokuman/82/css-ve-transparanlik/
- http://scriptiz.org/?p=1067
31 Aralık 2007 Web’den Seçme Haberler
Aralık 31st, 2007 • 2 yorum Haberler
Etiketler: Firefox, Haberler, innerHTml, linq, opacity
26 Aralık
- “LINQ’nun diğer yüzü :)” Bağlantı
- Doğrulanmış CSS ile saydamlaştırma özelliği eklemek. Bilindiği gibi opacity özelliğinin farklı tarayıcılardaki kodu W3C validator’dan geçmiyor, CSS3 ile bu durum düzeltilmiş olsa bile, şimdilik burada anlatılan metot mantıklı. Bağlantı
- Eburhan’dan “Css ile hazırladığım mesaj kutuları” Bağlantı
- google chart api(grafik) hakkında bir makale. Bağlantı
- Daron Yöndem – LINQ2XML. Bağlantı
- Güzel bir css menü örneği. Bağlantı
- innerHTml kullanımının bize kaybettirdiği zamanı kazanmak. Bağlantı
- javascript’e dair güzel notlar. Bağlantı
- mailing hakkında güzel bir yazı. Bağlantı
- Microsoft Vista’yı hızlandırmanın 5 ipucu. Bağlantı
- Firefox 3(Beta)’ün 5 güzel yenliği. Bağlantı
