Mehmet Fatih YILDIZ (mfyz.com)

Menü



CSS ve Transparanlık

Kategori : (X)HTML, CSS ve JavaScript Dökümanları
Eklenme Tarihi :
15 Eylül Cuma ´06
css, opacity, transparent, transparanlık, saydamlık




Dikkat : Dökümanın yazılma tarihi üzerinden en az 60 gün (2 ay) geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir, uygulamada ufak sorunlar oluşabilir. Yorumları ve güncellemeleri göz önünde bulundurarak dökümanı 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 :

  1. .transparan {
  2.   opacity : 0.5;
  3.   filter : alpha( Opacity=50 );
  4.   -moz-opacity : 0.5;
  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

  1. document.getElementById("nesne_id").style.opacity = '0.' + deger;
  2. 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 :-)

  1. // dogrudan transparanlık ayarlayabilir
  2. $('nesne_id').setOpacity(0.5);
  3.  
  4. // veya geçiş efekti vererek yapabiliriz
  5. $('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 (8 yorum/ping var)



Üye Resmi Üye : superselo
17 Şubat Pazar ´08 19:31 tarihinde yazmış
Ö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?
 


Üye Resmi Üye : mfyz
17 Şubat Pazar ´08 22:26 tarihinde yazmış
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.
 


Üye Resmi Üye : superselo
17 Şubat Pazar ´08 22:32 tarihinde yazmış
Benimde aynısı geçti aklımdan. Sonra sorduğum soru aklıma geldi, bir danışayım dedim   :-)
 


Üye Resmi Üye : superselo
18 Şubat Pazartesi ´08 00:44 tarihinde yazmış
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?
 


Üye Resmi Üye : mfyz
18 Şubat Pazartesi ´08 02:24 tarihinde yazmış
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 Ziyaretçi : Serkan As
4 Kasım Salı ´08 20:54 tarihinde yazmış
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.
 


Üye Resmi Üye : the_nobody
4 Kasım Salı ´08 21:25 tarihinde yazmış
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? =/
 


Üye Resmi Üye : the_nobody
3 Temmuz Cuma ´09 23:06 tarihinde yazmış
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 isteyen http://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ği http://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

Önce Okuyun Yorumlarınızda sosyal, dini ve politik taraflı mesajlar, başkalarına saldırı sayılabilecek laflardan kaçının. Argo kelimeler, küfürler otomatik olarak silinecektir. Bu kural ihlalleri ip, üyelik, isiminizin banlanmasına yol açabilir.

Lütfen yardıma yönelik, konuyu uzatacak sorularınızı/yorumlarınızı forumda yazınız. Burası konu dahilindeki kısa soluklu öneri/yorumlar içindir. Aksi halde yorumunuzu göremeyebilir, uyarı alabilirsiniz.

Hatırlatmak amacıyla : html kodlarının, link yapmak, vb amacıyla gireceğiniz ekstra bilimum şeylerin çalışmayacağını belirteyim. Yorumlayıcı zaten linklerinizi otomatik çevirecek, gülücüklerinizi dönüştürecektir. Zengin metin özellikleri için araç çubuğundaki butonları kullanın.


İletişim Bilgileri


E-Posta adresiniz gösterilmeyecektir.

(unut)

Üye iseniz, giriş yapıp bu bilgileri girmeden hızlıca yorum yapabilirsiniz. Yorumunuzda resminiz/ikonunuz ve profil bağlantınız görüntülenecek, aynı zamanda güvenlik kodu girmek zorunda da kalmayacaksınız.
Üye olmak için buraya tıklayın.

Güvenlik Kodu
Güvenlik kodunu göremiyorsanız sayfayı yenileyin!


Yukarıdaki güvenlik kodunu bu kutuya yazın.

Yorum   
- +

Ad soyad, eposta ve yorum alanları
(⊗ işaretli alanlar) zorunludur.





mfyz.com'da şu an 11 ziyaretçi geziniyor. Toplam 114 makale, 202 yazı, 2938 gönderi var



  • RSS mfyz.com'u RSS beslemeleri ile takip edebilirsiniz
  • ServerTR Hosting Sponsoru ServerTR.com'a çok teşekkür ederiz
  • CC 2.5 Sitedeki materyalleri Creative Commons 2.5 Lisansı çerçevesinde kullanabilirsiniz. Lisans hakkında bilgi almak için tıklayın
  • İstatistikler Site ziyaret istatistikleri, konu, eğilim gibi ilginç istatistikler hakkında
  • Site Hakkında Site altyapısı, hazırlanışı, kurallar ve felsefesi hakkında
  • İletişim İletişim formu, iletişim bilgileri

mfyz.com Türk Programcılığının Gelişmesine Adanmıştır
HTML Standartlarına Uygundur

CSS Standartlarına Uygundur