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>
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
Robert Nyman çözümü biraz karışık. Burada gördüğüm çok daha basit ve uygulanabilir geldi.
http://mron.us/web-development/css3/css-backgroun…
robert Nyman ın bir çözümü var http://robertnyman.com/2010/01/11/css-background-… denemedim bir bakın isterseniz.
Merhaba;
opacity değerini sadece background için kullanmak istiyorum.Ancak div içindeki nesnelerinde opacity değeri düşüyor.Bunu nasıl sağlayabilirim.
CSS3 standart doğrulamasında opacity değerinin belirtilmesi yeterli. Tüm tarayıcılarda aynı sonucu alıyorsunuz ve W3C doğrulamasından başarıyla geçmektedir. Saygılar
Testi CSS2.1 ile yaptığınızda aynı şeyi söylemek zor
fatih hocam opacity değeri zaten tüm tarayıcılarla uyumlu olan bir değeri.Diğer özel tanımlamaları neden kullanıyoruz acaba ?
ilk başta yazdığım kodda yanlarına ilgili kod satırının ne için yazıldığı yazıyor. Belki 5. ve 6. satırdakiler kaldırılabilir ama diğerleri gerekli.
fatih hocam ben sadece opacity değerini kullanıyorum ve tüm tarayıcılarda çalışıyor.(ie'de test etme fırsatım olmadı ama orda da çalışacaktır.).Sadece opacity değerini kullanarak doğru sonuçları alıyorum.Sormak istediğim farklı tarayıcılar için verilen opacity tanımlayıcılarını gerçekten kullanmamıza gerek var mı?
teşekkürler.
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
Fatih Abi, aslında bunun için bir çözüm var background:rgba(0,0,0,0.4) şeklinde kullanmak, lakin rgba IE'de sorun çıkartıyor bunun için nasıl bir çözüm geliştirilebilir.
Bildiğim bir çözümü yok
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.