CSS ve Transparanlık

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.
CSS'de kullanacağınız transparanlık kuralları web standartlarına göre geçersizdir. Bu kurallar css dosyanızın geçersiz sayılmasına neden olacaktır. Eğer transparanlık kullanmak zorundaysanız javascript ile ayarlayarak css dosyalarınızın stabilitesini korur ve transparanlığı uygulamış olursunuz. En pratik çözüm olarak mootools'u öneriyorum.
Bazı web sayfalarında scriptler ile veya bazı nesnelerin yarı-saydam olduğunu görmüşsünüzdür. Bakınız sitedeki hata pop-upları, ipucu kutucukları (fade-in ve fade-out olması da bu methodla yapılıyor).

Bu nitelik, yani objelerin transparan olması tarayıcıların destekledikleri filtrelerdir. Modern internet tarayıcıları şu an bu niteliği barındırıyorlar. Mozilla, Firefox, Safari (KHTML motoru olduğundan Konqueror da destekler), Internet Explorer (5.5'den sonra desteklemeye başladı) ve Opera (9'dan sonra desteklemeye başladı).

Fakat tarayıcılar kendi filtre erişimlerine göre farklılık göstrerir. Fakat bazıları da ortak.

Bu nitelik tabiki CSS ile yönetiliyor ve biz de kullanırken CSS ile yapacağız. Fakat biliyorsunuz ki javascript ile css stilleri ile oynayabilirsiniz, dökümanın ilerleyen kısımlarında JavaScriptlerinizde transparanlığı yöneterek nasıl geçiş efektleri uygulayacaksınız onu göstereceğim.

CSS ile class atanmış bir objenin saydamlığını değiştirelim :
.transparan {
  opacity : 0.5;
  filter : alpha( Opacity=50 );
  -moz-opacity : 0.5;
}
Bu kodda “transparan” sınıflı nesneler 50% saydam görünecektir. Tabiki block level elementler olması gerekir bu objelerin.

filter : alpha( Opacity=50 );
Internet Explorer ve Opera 9+ tarayıcılarda transparanlığı sağlayacaktır.

opacity : 0.5;
Mozilla, Firefox, Safari, Konqueror tarayıcılarında transparanlığı sağlayacaktır.

-moz-opacity : 0.5;
Bu gereksiz bir koddur fakat bilmeniz açısından yer veriyorum, Mozilla ve türevi tarayıcılar daha önceden böyle transparanlık sağlıyordu. Artık doğrudan “opacity” özniteliğini de destekliyor.

JavaScript ile nasıl?

Kodunuzda interval koyarak belirli sürede 1'er 1'er veya 5'er 5'er opacity düştüğünüzü varsayarsak
document.getElementById("nesne_id").style.opacity = '0.' + deger;
document.getElementById("nesne_id").style.filter = 'alpha(Opacity=' + deger + ')';
nesne adreslemeleri ile obenin anlık transparanlığını değiştirebilirsiniz. Interval'in boyutuna göre nesne o hızda ya kaybolur ya da oluşur.

Mootools?

Transparanlığı javascript ile yapabiliyoruz fakat mootools ile tabiki hepsinden daha kolay yapılıyor :-)
// dogrudan transparanlık ayarlayabilir
$('nesne_id').setOpacity(0.5);

// veya geçiş efekti vererek yapabiliriz
$('nesne_id').effect('opacity').custom(0, 0.9);
Aynı zamanda Fx.Style ve çoğu Fx sınıfı fonksiyonlarında da rahatlıkla opacity tanımı kullanabilirsiniz.


Hazırlayan : Mehmet Fatih YILDIZ

Not : Bu döküman 31.01.2008 tarihinde yeniden düzenlenmiştir

Yorumlar

17 Şubat Pazar ´08 19:31
Öncelikle teşekkürler, lazım oldukça dönüp dönüp bakıyorum bu dökümana   :-)

Diyelim ki bir div e transparanlık uyguladım. Ama o div in içindeki bir elementin transparan olmasını istemiyorum. Bunu nasıl sağlarız?
17 Şubat Pazar ´08 22:26
onu yapamazsın. Ancak şöyle olabilir, 2 farklı div olarak yapıp, position:absolute ayarlar ve üst üste getirirsin. Altta kalan div'e (tabiki z-index ile ayarlaman lazım üçüncü boyut sırasını) düşük transparanlık uygularsın olur biter   :-)

Ama bir elementin transparanlığını ayarladığında içindeki tüm nesneler de o transparanlığa göre görünecektir.
17 Şubat Pazar ´08 22:32
Benimde aynısı geçti aklımdan. Sonra sorduğum soru aklıma geldi, bir danışayım dedim   :-)
18 Şubat Pazartesi ´08 00:44
Peki diyelim üstüste gelecek olan 2 den fazla div imiz var. Hepsine z-index: 1; z-index: 2; z-index: 3; şeklinde değer vermemiz gerekir mi yoksa en üstte olmasını istediğimiz iki katmana 1 ve 2 değeri versek olurmu?
18 Şubat Pazartesi ´08 02:24
hayır. normalde tarayıcılar kod yazım sırasına göre üst üste sıralar fakat bu işi tarayıcıya bırakmayın. tarayıcı nasıl anlamak isterse öyle anlar sonra.

sırayla z-index'lerini ayarlarsan sorun yaşamazsın
Üye Resmi Serkan As
4 Kasım Salı ´08 20:54
Güzel bir kaynak oluyor böyle çalışmalar . Hele de böyle bir tasarımın içinde okumak daha bir zevk veriyor insana.
4 Kasım Salı ´08 21:25
Yalnız bir şey demek istiyorum... mootools, jquery ile yapılan transparanlıkların ie6 ve aşağısında düzgün gözüktüğünden emin değilim, hatta transparanlık olduğundan emin değilim (hatta belki de ie7de de). Çünkü en son denediğimde olmuyordu, bende mi hata var ki? =/
3 Temmuz Cuma ´09 23:06
Firefox 3.1 olarak çıkması beklenen; ancak daha da geliştirilerek çıkartılmak istenen Firefox 3.5 çıktı (sanırım 30 Haziranda çıktı). İndirmek isteyenhttp://www.mozilla.com/en-US/ buradan indirebilir.

Özellikle CSS3 desteği için (Safari ve Google Chrome bu konuda daha hızlı davrandılar) heyecanla bekliyordum, ertelene ertelene bir haller olmuştu ve nihayet çıktı. Başlık açmak istemedim, başka uygun başlık/döküman da bulamadım bunu yazmak için.

Tarayıcıyı bugün yükledim. 3'ten görünüm ve kullanım bakımından pek bir fark yok; ancak sekmelere IE tarzı bir yenilik eklenmiş. O da yeni sekme açmak için küçük bir kutu içinde + tuşu. Deneyimsiz kullanıcıların işine yarar oldukça. Tarayıcı, resmi sitesinde de söylendiği gibi 3'ten daha hızlı. Gerçekten fark ediliyor bu hızı. İkonuna da ufak bir cila çekmiş Firefox, daha şık olmuş eskisine göre. 3.5 versiyonu, 3 için olan neredeyse tüm eklentileri destekliyor; ancak bazı güzel ya da önemli eklentilerde henüz 3.5 desteği yok. O eklentilerin ya da temaların olabildiğince hızlı şekilde uyumlu hale getirileceğini bekliyorum. CSS3 desteğihttp://www.css3.info adresinden test ettiğim kadarıyla sorunsuz ve eksiksiz biçimde var.

Ben açıkçası Firefox 3'ü o kadar çok beğenmemiştim; çünkü adam akıllı yeniliği yoktu. Ancak Firefox 3.5 bence tam anlamıyla olmuş. FF3 nasıl hızlı biçimde yayıldıysa, FF3.5 da aynı hızla (belki daha da hızlı) yayılacaktır. Bu da tasarımcılar için oldukça güzel =)
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor