css ile grafiklerde seffaflik saglamak

bybart · 05.08.2007 | 17:53 | #1

http://www.bobek.co.uk/blog/?p=8

Bu tema tam aradığım tema fakat CSS ve PHP bilgim olmadığı için bazı ayarlarını değiştirmekte zorlanıyorum. tema ana sayfasındaki birkaç grafik ve sidebardaki menü başlıklarıyla noktalar CSS ile transparan yapılmış. Ama yapılan şeffaflık sadece firefoxta çalışıyor ie için bir yolunu bulabilirmiyiz ?

bu temaya takmış konumdayken örnekte vereyim: http://blog.rocktuel.net çözüm bulana dek kalacak : ) ie6 ile sorunlu çıkıyor : (

pardonan · 05.08.2007 | 21:36 | #2

Merhaba,

ben temada transparan birşey göremedim?
header ve footer'da ki şu jenga tahtalarından bahsediyorsan, onlara herhangi bi transparan efekti verilmemiş, grafik o şekilde hazırlanmış ve olması gerektiği gibi IE'de de normal görünüyor.

şayet lazım olan her iki tarayıcıda da sorun yaratmayacak bir transparan kodu ise, vereyim;

Kod:

	opacity:.40;
	filter:alpha(opacity=40);
	-moz-opacity: 0.5;

ibrahimsar · 05.08.2007 | 21:59 | #3

Sanırım bahsettiği ilk linkteki sitenin tasarımı değil, aynı bağlantıda screenshot'ı verilen tasarım (şu gece manzaralı olanı).

Onda da transparan olması gereken bir yer göremedim aslında.

fikirbozan · 06.08.2007 | 00:10 | #4

Evet bende hiç bir şey göremedim ve anlamadım. Eğer biraz daha açıklayıcı olursan ne istediğin konusunda eminim yardımımız olacaktır.

bybart · 06.08.2007 | 10:49 | #5

arkadaşlar üstteki vermiş olduğum screen görüntülü sayfadan download edilebilidiği için vermiştim şöyle izah ediyim internet Explorer 7 ve mozillada sorun yok ama internet Explorer 6 da problemli..

Explorer 6 da görüntüsü: http://img373.imageshack.us/img373/6...gorunumlf0.jpg
mozillada görüntüsü: http://img467.imageshack.us/img467/3...llagoruog8.jpg

bir arkadaşın dediğine göre ise transparan görüntü sağlamak için .png ler kullanılmış bu pnglerin sayfada çalışmasını ie6 desteklemiyor... Olabilir mi ?

pardonan · 06.08.2007 | 11:10 | #6

anladım sanırım. yazı başlıklarında ki tarih grafiği ve menü başlıklarında ki o noktalardan bahsediyorsun.

evet transparan png'ler sorun yaratıyor IE'de,
onun da çözümü burada

http://forum.zoque.net/www/22866-ie-...ununun-cozumu/

cansurmeli · 06.08.2007 | 12:08 | #7

Size CSS ile ilgili önerebileceğim çok güzel bir site var.Stu Nicholls tarafından yayınlanan CSSPLAY.

Nicholls, CSS'in sınırlarını iyice zorlamış.Bana göre iyi CSS biliyorum diyenler Nicholls'a göre daha başlangıç seviyesinde.Çünkü hepimiz resimlerle boğuşurken Nicholls CSS ile kolay ama az bilinen bir yoldan gitmiş ve harikalar yaratmış.

bybart · 06.08.2007 | 16:42 | #8

style.CSS yi ekledm ama bir tanesini örnek olarak göstereblrmsnz .png li komutlar nasıl olması gerekiyor anlatılanlara göre ?

meteryus · 06.08.2007 | 19:27 | #9

Alıntı:

style.CSS yi ekledm ama bir tanesini örnek olarak göstereblrmsnz .png li komutlar nasıl olması gerekiyor anlatılanlara göre ?

CSS ve htc ile uğraşma, aynı linkte 3. mesajdaki js kodunu kullan. Hemn daha kolay hem de daha güvenli olur.

bybart · 06.08.2007 | 20:47 | #10

peki Wordpress temasında js kodunu nerede çalıştırmalıyım bir kaç denemem olumsuz olduda...

Kod:

<script language="JavaScript" type="text/JavaScript">
<!--
function fixPng() {
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}
}

window.onload = fixPng;
//--></script>

bybart Üyelik Tarihi: 12.10.2006 Mesaj: 15	05.08.2007 \| 17:53 \| #1 http://www.bobek.co.uk/blog/?p=8 Bu tema tam aradığım tema fakat CSS ve PHP bilgim olmadığı için bazı ayarlarını değiştirmekte zorlanıyorum. tema ana sayfasındaki birkaç grafik ve sidebardaki menü başlıklarıyla noktalar CSS ile transparan yapılmış. Ama yapılan şeffaflık sadece firefoxta çalışıyor ie için bir yolunu bulabilirmiyiz ? bu temaya takmış konumdayken örnekte vereyim: http://blog.rocktuel.net çözüm bulana dek kalacak : ) ie6 ile sorunlu çıkıyor : (
bybart Üyelik Tarihi: 12.10.2006 Mesaj: 15	__________________ paradox ......... Mesaj bybart tarafından 05.08.2007 (20:05) yeniden düzenlendi.
	Alıntı yap

pardonan Üyelik Tarihi: 31.01.2007 Mesaj: 17	05.08.2007 \| 21:36 \| #2 Merhaba, ben temada transparan birşey göremedim? header ve footer'da ki şu jenga tahtalarından bahsediyorsan, onlara herhangi bi transparan efekti verilmemiş, grafik o şekilde hazırlanmış ve olması gerektiği gibi IE'de de normal görünüyor. şayet lazım olan her iki tarayıcıda da sorun yaratmayacak bir transparan kodu ise, vereyim; Kod: opacity:.40; filter:alpha(opacity=40); -moz-opacity: 0.5;
pardonan Üyelik Tarihi: 31.01.2007 Mesaj: 17	__________________ blog
	Alıntı yap

ibrahimsar Üyelik Tarihi: 01.07.2006 Mesaj: 51	05.08.2007 \| 21:59 \| #3 Sanırım bahsettiği ilk linkteki sitenin tasarımı değil, aynı bağlantıda screenshot'ı verilen tasarım (şu gece manzaralı olanı). Onda da transparan olması gereken bir yer göremedim aslında.
ibrahimsar Üyelik Tarihi: 01.07.2006 Mesaj: 51
	Alıntı yap

fikirbozan Üyelik Tarihi: 29.07.2007 Mesaj: 8	06.08.2007 \| 00:10 \| #4 Evet bende hiç bir şey göremedim ve anlamadım. Eğer biraz daha açıklayıcı olursan ne istediğin konusunda eminim yardımımız olacaktır.
fikirbozan Üyelik Tarihi: 29.07.2007 Mesaj: 8	__________________ fikirbozan bizi seveceksiniz biliyoruz...
	Alıntı yap

bybart Üyelik Tarihi: 12.10.2006 Mesaj: 15	06.08.2007 \| 10:49 \| #5 arkadaşlar üstteki vermiş olduğum screen görüntülü sayfadan download edilebilidiği için vermiştim şöyle izah ediyim internet Explorer 7 ve mozillada sorun yok ama internet Explorer 6 da problemli.. Explorer 6 da görüntüsü: http://img373.imageshack.us/img373/6...gorunumlf0.jpg mozillada görüntüsü: http://img467.imageshack.us/img467/3...llagoruog8.jpg bir arkadaşın dediğine göre ise transparan görüntü sağlamak için .png ler kullanılmış bu pnglerin sayfada çalışmasını ie6 desteklemiyor... Olabilir mi ?
bybart Üyelik Tarihi: 12.10.2006 Mesaj: 15	__________________ paradox .........
	Alıntı yap

pardonan Üyelik Tarihi: 31.01.2007 Mesaj: 17	06.08.2007 \| 11:10 \| #6 anladım sanırım. yazı başlıklarında ki tarih grafiği ve menü başlıklarında ki o noktalardan bahsediyorsun. evet transparan png'ler sorun yaratıyor IE'de, onun da çözümü burada http://forum.zoque.net/www/22866-ie-...ununun-cozumu/
pardonan Üyelik Tarihi: 31.01.2007 Mesaj: 17	__________________ blog
	Alıntı yap

cansurmeli Üyelik Tarihi: 23.12.2006 Mesaj: 234	06.08.2007 \| 12:08 \| #7 Size CSS ile ilgili önerebileceğim çok güzel bir site var.Stu Nicholls tarafından yayınlanan CSSPLAY. Nicholls, CSS'in sınırlarını iyice zorlamış.Bana göre iyi CSS biliyorum diyenler Nicholls'a göre daha başlangıç seviyesinde.Çünkü hepimiz resimlerle boğuşurken Nicholls CSS ile kolay ama az bilinen bir yoldan gitmiş ve harikalar yaratmış.
cansurmeli Üyelik Tarihi: 23.12.2006 Mesaj: 234
	Alıntı yap

Seçenekler
Yazıci Çıktısı Alın Bu Konuyu Arkadaşınıza Gönderin