Gönderen Konu: Css Dersleri (Okunma sayısı 1475 defa)

sevdaligul · « : 09 Mayıs 2010, 18:34:16 »

Internet Explorer 6 için saydam PNG desteği

“PNG, “Taşınabilir Ağ Grafiği” anlamındaki (Portable Network Graphics) ‘in kısaltmasıdır ve kayıpsız sıkıştırarak görüntü saklamak için kullanılan bir saklama biçimidir. PNG biçiminde paletli ya da gerçek renkte görüntüler seçimlik bir saydamlık kanalıyla saklanabilir.” şeklinde tanımlanmış vikipedi’da

PNG – GIF

* PNG dosyaları GIF’e göre daha fazla sıkıştırılır, yani daha az yer kaplar
* GIF 256 renk desteklerken PNG 48 bit trucolor destekler
* GIF sadece binary saydamlığı desteklerken PNG alfa kanal desteğiyle sınırsız saydamlık sağlar.

PNG’nin GIF’e göre tek dezavantajı hareketli resimler desteklememesi idi ki bunuda hallettiler. Firefox3 ile birlikte Hareketli PNG desteğinin geleceğine dair haberler geliyor kulağımıza.

PNG kullanımın en büyük avantajı alfa kanılı desteği ile bizlere kusursuz geçiş efekti olanağı sunmasıdır.

Web dünyasında PNG yayılmasını engelleyen en büyük sebep Internet Explorer’ın PNG desteğini 7. sürümüne kadar desteklememesidir. Tabi web kodlayıcıları Internet Explorer’ı beklemeden bazı düzeltme kodları üretti. Internet Explorer’ın desteklediği filter‘ın AlphaImageLoader özelliği sayesinde saydam PNG desteği sağlanmıştır.
kaynağı göster
yazdır?
1.img {
2. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
3.}

Bu kod problemimizi çözdü, ancak tümünü değil.
Saydam PNG düzeltmesi ile ilgili sorunlar

W3C ve Diğer farklı tarayıcı desteğinin olmayışı.

Bu kodu w3c ve diğer tarayıcılar desteklemediği için site doğrulamalarında(validation) sorun yaşamaktadır.

Artalan(background) olarak kullanımdaki sorunlar

Artalan olarak kullanılan saydam PNG’lerde konumlandırma ve yenileme özelliklerinin kullanılamaması sorunlarına neden oldu.

Geç yükleneme ve fazla kaynak kullanımı

AlphaImageLoader ile yüklenen resimler normal resme göre daha yavaş yükleniyor ve daha fazla kaynak tüketiyor. Ancak bu durum sadece ie6 kullanıcıları için geçerlidir.

Linklerde tıklama ve formlarda odaklanma sorunları

Artalan resmi olarak saydam png uygulanan elemanların içinde link bulunuyorsa bu linkler üzerine gidince tıklanamaz görünüyor ve form elemanlarıda odaklanamaz oluyor.

İlk yüklemede gösterilmeyen png’lerde ve Javascript ile oluştulmuş pnglerde sorun çıkarıyor

Bir içerik sayfa yüklendiğinde görünmez ise ve linke tıklayınca açılıyorsa png düzenlemesi işe yaramıyor.

Bir çok sorunları olmasına karşın tasarımcıların kod yazarlarını zorlayan sayfa tasarımlarını saydam PNG desteği olmadan çözmemiz çok zor. Bu nedenle sizlere saydam PNG kullanmanın yolları gösterecek bir iki örnek yapacağım. Benim kullandığım yöntem çok iyidir süperdir sakın başka yöntem kullanmayın demiyorum ben bu yöntemi kullanıyorum çünkü karşılaştığım tüm sorunların üstesinden bu yöntem geldi. Siz kaynaklar kısmındaki linkleri takip ederek farklı yöntemleri uygulayabilirisiniz.

İlk olarak bir saydam PNG resmini sitemize ekleyelim. Benim logomun bir gif birde png halini hazırlayıp saydam PNG’nin gözle görülür faydasını anlayalım.
kaynağı göster
yazdır?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Linklerin Görülmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap">
02.<html xmlns="Linklerin Görülmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>Saydam PNG</title>
06.<style>
07..kutu{
08. background:url(images/ardalan.gif) top left no-repeat;
09. height:80px;
10. padding:10px
11.}
12.</style>
13.</head>
14.<body>
15. <div class="kutu"><img src="images/fatihhayri_logo.gif" alt="Logo" width="166" height="82" /></div>
16. <p>fatihhayri_logo.gif uygulaması</p>
17. <div class="kutu"><img src="images/fatihhayri_logo.png" alt="Logo" width="166" height="82" /></div>
18. <p>fatihhayri_logo.png uygulaması</p>
19.</body>
20.</html>

Örnek sayfayı görmek için Linklerin Görülmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap

Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap

Yukarıdaki örnek görüldüğü gibi logonun kenarlarındaki geçiş kısmında gif ve png arasında bariz farklar var. Yukarıdaki görüntüyü yeni nesil tarayıcılarda göreceğiz. Ama İnternet Explorer 6 ve önceki versiyonlarda görüntü aşağıdaki gibi olacaktır.

Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap

Kırmızı ile işaretlediğim ve resmi saran bir gri alan gibi saracaktır. Bunun anlamı bu tarayıcının saydam PNG desteğinin olmadığıdır. Bu sorunu gidermek için yukarıda bahsettiğimiz İnternet Explorer 6′nın desteklediği filter tekniği uygulayacağız.
kaynağı göster
yazdır?
01.function fixpngs(){
02.var l = document.getElementsByTagName('img');
03.for(i=0;i<l.length;i++){
04.p = 'images/0.gif';
05.n = l.getAttribute('src');
06.g = n.toLowerCase();
07.if(g.substring(g.length-3)=="png"){
08.l.setAttribute('src',p);
09.l.style.cssText="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='"+n+"')";
10.}
11.}
12.}
13.window.onload = fixpngs;

Yukarıdaki js dosyasını incelersek. Sayfadaki tüm resimleri tarayıp png uzantılı olanları bulup IE’nin göstereceği stil özelliklerini bu png’ye atayacaktır. Birde burada bize saydam 1×1 saydam gif resmi gerekecektir. Bu saydam gif resim alanını dolduracaktır. Bu saydam gifi koymazsak resmin sol üstünde kırmızı x işareti çıkacaktır.

Yukarıdaki kodlamada kalın olarak belirttiğimiz yere siz kendi saydam 1×1 gif’inizin yerini yazacaksınız.

Benim bu yöntemi kullanmamın nedeni bir projede dinamik oluşturduğum saydam PNG ve sayfa yüklendiğinde görünür olmaya(display:none) sonradan görünen alanlardaki saydam PNG ile yaşadığım sorunları bu kodun çözmesidir.

Yukarıdaki kodu sayfamıza sadece IE7 öncesi görecek şekilde eklersek
kaynağı göster
yazdır?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Linklerin Görülmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap">
02.<html xmlns="Linklerin Görülmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>Saydam PNG</title>
06.<style>
07..kutu{
08.background:url(images/ardalan.gif) top left no-repeat;
09.height:80px;
10.padding:10px
11.}
12.</style>
13.
16.</head>
17.<body>
18. <div class="kutu"><img src="images/fatihhayri_logo.gif" alt="Logo" width="166" height="82" /></div>
19. <p>fatihhayri_logo.gif uygulaması</p>
20. <div class="kutu"><img src="images/fatihhayri_logo.png" alt="Logo" width="166" height="82" /></div>
21. <p>fatihhayri_logo.png uygulaması</p>
22.</body>
23.</html>

Örneği görmek için Linklerin Görülmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap

Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap

Yukarıdaki ekran görüntüsü Internet Explorer 6′da sayfamızın görüntüsüdür.
Ardalan resmi olarak saydam PNG kullanımı

Resimlerde kullanımının dışında ardalan(background) resmi olarakta saydam PNG resimlerini kullanmamız gerekebilir. Benim en çok karşılaştığım durumlar resimlerin üzerine dinamik içerikli gölgeli kutular eklemk istediğimde ve renk geçişli ardalanların üzerine konan dinamik içerikli kutular eklemek istediğimde saydam PNG kullanmam gerekiyor. Tabi bir çok durumda gerekebilir, ben burada kafamızda bir örnek oluşması için bu örnekleri verdim.

Bu duruma örnek bir tasarıma bakarsak.

Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap

Yukarıdaki bir tasarımda. Ardalanında resim olan tasarım üzerindeki gölgeli dinamik içerikli kutu bizi saydam PNG kullanmaya itiyor. Ardalandaki resmin farklı sayfalarda değişeceğini düşünerek kodlayalım.

Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap

Bu bölüm farklı düşünülerek de kodlanabilir. Ben photoshop’da üç alanı saydam png olarak kaydettim

Resimlerin Görüntülenmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap

Saydam png kullanımının farklı yönlerini anlatmak için bu bölümü 3 kısma ayırdık. Bu şekilde kodumuzu yazarsak:
kaynağı göster
yazdır?
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Linklerin Görülmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap">
02.<html xmlns="Linklerin Görülmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>Saydam PNG</title>
06.<style>
07.#resim{
08.background:url(images/ardalan_resmi.jpg) top left no-repeat;
09.width:400px;
10.padding-top:15px;
11.height:300px;
12.}
13.#icerik{
14.width:207px;
15.margin-left:15px;
16.}
17.#icerikUstu{
18.background:url(images/icerik_ust.png) top left no-repeat;
19.height:10px;
20.}
21.#metinAlani{
22.background:url(images/icerik_orta.png) top left repeat-y;
23.font:11px Arial, Helvetica, sans-serif;
24.padding:0 10px
25.}
26.</style>
27.</head>
28.<body>
29.<div id="resim">
30.<div id="icerik">
31.<div id="icerikUstu"><img src="images/0.gif" width="1" height="1" /></div>
32.<div id="metinAlani"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ultricies orci quis erat. Nulla vulputate sapien sit amet elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed nunc. In at ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut augue. Phasellus scelerisque vehicula orci.</div>
33.<div id="icerikAlt"><img src="images/icerik_alt.png" width="207" height="18" alt=" " /></div>
34.</div>
35.</div>
36.</body>
37.</html>
Linklerin Görülmesine İzin Verilmiyor. Üye Ol ya da Giriş Yap

Alıntı

sevdaligul · « **Yanıtla #1 :** 09 Mayıs 2010, 18:35:25 »

Genişlik ve Yüksekliğin Sınırlarını Belirlemek(min-width, min-height,max-width, max-height)

Bir kapsayıcı kutunun genişlik değerini minimum ve maksimum değerleri ile sınarlandırabilriz. Bu özellikler CSS2 ile birlikte gelmiştir.
min-width, min-height

Yapısı : min-width, min-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok

min-width, min-height kapsayıcı kutunun minimum alacağı değerleri belirtmek için kullanırız.
kaynağı göster
yazdır?
1.p.menu {
2.float:left;
3.width:200px;
4.min-width:150px;
5.}
Web Tarayıcı Uyumu:

Internet Explorer 7+
Netscape 6+
Opera 6+
W3C’s CSS Level 2+
CSS Profile 2.0

Aynı şekilde max-width ve max-height tanımlamalarıda yapılır.
max-width, max-height

Yapısı : max-width, max-height: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | none | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: inline nonreplacement elementler ve tablo elementlere
Kalıtsallık: Yok

max-width, max-height kapsayıcı kutunun maksimum alacağı değerleri belirtmek için kullanırız.
kaynağı göster
yazdır?
1.p.menu {
2.float:left;
3.width:200px;
4.max-width:400px;
5.}
Web Tarayıcı Uyumu:

Internet Explorer 7+
Netscape 6+
Opera 5+
W3C’s CSS Level 2+
CSS Profile 2.0

şžöyle bir sonumuz vardır ki oda IE’nin 7 versiyonundan sonra bu özellikleri desteklemeye başlamasdır. Bu çok kullanışlı özellikleri bu nedenden dolayı kullanmamazlık yapmayacağız tabi.

IE için bir çözüm vardır. expression() özelliği bu özellik sadece IE tarafından yorumlanır. Bu özellik dinamik özellik olarak tanımlanır. Yani bu kod normalde bir javascript kodudur.
kaynağı göster
yazdır?
01.#icerik
02.{
03.min-width: 600px;
04.max-width: 1200px;
05.width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
06.}
07.<body>
08.<div id="icerik">
09.....
10.</div>
11.</body>

Yukarıdaki tanımlamda css içerisinde javascript komutları kullanılmıştır. Bu tanımlamaları sadece IE anlayacaktır ve uygulayacaktır. Kodda eğer genişlik belirtilen maksimum değerden büyükse atanan değeri alacak değilse auto değeri alacaktır.

Ayrıca min-height için daha kısa bir çözüm vardır
kaynağı göster
yazdır?
1.#menu {
2.min-height:500px;
3.height:auto !important;
4.height:500px;
5.}

Ayrıntılı Konu Bilgileri

	Sayfa BaşlığıKonu: Css Dersleri	Mesaj SayısıMesaj Sayısı: 1 cevap var
	OkumaGösterim: 1475	Google Özel Arama

Konu / Başlatan	Yanıt	Son İleti
Üniversite Öğrencisinden Bilarda Dersleri Başlatan sevdaligul Manzara Resimleri ve Duvar Yazıları	0 Yanıt 1025 Gösterim	29 Temmuz 2010, 22:29:27 Gönderen: sevdaligul
Photoshop Dersleri Başlatan nullsix Site Tanıtımı ve Hostingler	0 Yanıt 910 Gösterim	06 Kasım 2010, 15:57:46 Gönderen: nullsix
Php Dersleri Başlatan sevdaligul Webmaster Sorunları	0 Yanıt 960 Gösterim	27 Mart 2011, 09:52:18 Gönderen: sevdaligul
Fotoshop yapma dersleri Başlatan nullsix Site Tanıtımı ve Hostingler	0 Yanıt 1040 Gösterim	10 Ağustos 2011, 17:51:41 Gönderen: nullsix
SEO Hocası ile Güncel SEO Dersleri Başlatan mydg Site Tanıtımı ve Hostingler	0 Yanıt 804 Gösterim	10 Kasım 2011, 01:15:58 Gönderen: mydg

Gönderen Konu: Css Dersleri (Okunma sayısı 1475 defa)

sevdaligul

Css Dersleri

sevdaligul

Css Dersleri

Konuyu Paylaş

Benzer Konular