CSS İpucu 19: Tüm Tarayıcılar İçin CSS İle Saydamlık(Opacity)
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>
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
Tüm elemanları etkiliyor bu opacity. Böyle olacaksa neye yarar ki fireworkste opacity yaparım daha iyi. Herşey soluklaşıyor. bu kodlamada -moz, -khtml, -ms gibi tanımlamalar DW CSS editöründe yazarken çıkmıyor. acaba standart tanımlama değilmi. birde tam olarak -moz kaç yerde kullanılıyor. birkaç yerde denk geldi dikkatimi çekti. yoksa bu css nin korsan kodları mı var :)
hayır bazı tarayıcılar stadartlara girmeyen bazı özellikleri kendi bünyelerine ekliyor ve kendi kodlarını üretiyorlar
#secici içinde bu kodları kullandığım zaman her şeyin opacitysini etkiliyor. sadece arkaplanın seffaf olması için ne yapmalıyız?
Bunun için bir çözümyok ne yazık ki. Benim aklıama gelen alternatif çözümler var. Biri saydam png kullanmak diğer ise arkaplanı ayrı katman içeriği ayrı katman için alıp postion ile üst üste gitirmek ama. Bunun yerini tutumayacaktır
Ben bu şekilde yaptım. Arka plan ayrı katman içerik ayrı katman olarak gayette hoş oldu
Güzel bir yöntem. Özellikle tasarıma yeni yeni başlamaya niyetleniyorum. Böyle bir şey aklıma gelmezdi.
Evet gerçekten akla gelmeyen bir çözüm (en azından benim aklıma gelmedi) kara kara düşünüyordum w3c validator ‘u nasıl geçeceğim diye :) Ellerinize sağlık.