Jag gjorde idag en upptäckt som kommer påverka allt mitt kommande designarbet - jag testade att spara bilder från photoshop i PNG-format iställer för gif eller jpg.
Det är ju hur bra som helst, bilderna får transpoarenta tilljämningspixlar osv och man kan placera kritterna vart som helst på en sida och det ser bra ut.
Jag upptäckte det hela i samband med ett enkelt DHTML-skolarbete jag ville göra http://www.gurkean.com/fun (bildkällor finns i CSS-mallen för den som är intresserad)
Jag vill veta vad det är för nackdelar med att använda PNG - vilka webläsare har svårt för formatet osv. Och vad är det för skillnad mellan PNG-8 och PNG-24.
Jag har länge undrat hur fanken man placerar bilder som "sticker ur boxarna" innan utan att hålla på att tjafsa med att spara med rätt bakgrundsfärg osv (som man ju måste göra med gif). Idag kom ljuset=) :birp
Fördelarna är många, jämfört med gif iaf.
Nackdelarna: IE6 och lägre, vet inte hur det är med de andra större webläsarna, kan inte visa .png bilder utan diverse hacks...
Övrigen kan jag tipsa dig om att du gärna kan ersätta 8-bitars giffar med 8-bitars png'r, då de senare oftast är mindre i storlek för samma bild-data utan förlust.
Men när jag använder png så blir bakgrunden grå i IE men inte i FF. Fast det kan bero på mitt hemsideprogam också kanske?
Kolla och jämför med IE och FF: www.ifk95.se
PNG-8 då, har den inte samma genomskinlighet som PNG-24?
PNG-8 har en palett på 256 färger. Varje färg kan ha en transparens mellan 0-255, men får program kan skapa sådana filer. I Photoshop är PNG-8 likvärdigt med GIF när det gäller transparens.
I Photoshop är PNG-8 likvärdigt med GIF när det gäller transparens.
Jofan, märkte det.
Nog för att olika läsare kan tolka koden olika, men bilder!? Diversity is not a preference in this area.
Nu blir det lite av en kodfråga - men jag hopppas moderatorn är snäll nog och låter den vara kvar här ändå för det handlar ju om grafiken...
Min meny på http://www.gurkean.com/ har nu blivit uppdaterad med PNG-24 bakgrund. bilden som används är följande:
I IE7 (ingen aning om hur den ser ut i IE6, förmodligen inte heller mycket att hurra för) blir det svarta kantpixlar istället för transparenta. I Firefox (the most beloved browser) blir bilden precis som jag vill ha den.
Finns det något enkelt sätt som jag kan använda mig av JavaScripts-lösningen på problemet när det är följande CSS-kod som styr meny-listan:
#menybox
{
width: 700px;
opacity: 0.7; filter: alpha(opacity=70);
position: absolute;
top: 90px;
left: 170px;
}
/*själva menyn*/
#meny
{
margin: 0;
padding: 0;
}
#meny ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
#meny ul li {float: left;}
#meny ul li a
{
text-decoration: none;
background: url(layout/menu.png) no-repeat;
font-size: 16px;
font-weight: bold;
float: left;
margin-left: 5px;
height: 20px;
width: 90px;
padding: 5px;
color: black;
}
#meny ul li a:hover
{
background-position: right;
}
menyn är infogad via SSI på alla sidor. (ska nog byta till php-include i framtiden när jag lärt mig lite mer av det språket)
Nån som har en bra idé? :stud
Så som jag ser det ser det mycket rörigt ut... kanske bara ska försöka mig på en GIF-bild och ta bort kantpixlarna istället...
Man kan väl knappast kräva att ens sidas besökare skall iväg och installera någon fix för att dom skall se bilder okej ?
Inte tycker jag det iaf...
Nu har du inte uppenbarligen inte läst länken. :i Den fixen är nåt som sidskaparen använder på sin sida. Vad den gör är att nyttja små egenskaper/filter i directx om appliceras på bilden, då directx uppenbarligen har fullgott stöd. :OO
En vanlig "dum" användare har ingen som helst aning om vad som händer bakom kulliserna.
Förresten, använder du det filtret helt och hållet kan du skippa cssen som inte validerar, då du kan kasta in opacityn direkt i pngen när du skapar den.
Nu har du inte uppenbarligen inte läst länken. :i Den fixen är nåt som sidskaparen använder på sin sida. Vad den gör är att nyttja små egenskaper/filter i directx om appliceras på bilden, då directx uppenbarligen har fullgott stöd. :OO
En vanlig "dum" användare har ingen som helst aning om vad som händer bakom kulliserna.
Erkänner att jag inte kollade länken.
Skit som händer..... skål.. :bire
I övrigt tycker jag att .png bilder är kanon, skulle önska att IE hade fullgott stöd utan att man var tvungen att mickla för mycket.
#meny {background: url(layout/menu.png);}
* html #meny {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='layout/menu.png', sizingMethod='crop');}
r\ Fixade lite.
silfver skrev:
Nja, det är på elementet som ska innehålla bilden du ska ha den.
Okej... Jag antar att det inte ska vara ett sånt mellanrum mellan t rue i scriptkoden.
Bakgrunden ligger i listlänkarna enligt nedan
#meny ul li a
{
text-decoration: none;
background: url(layout/menu.png) no-repeat;
font-size: 16px;
font-weight: bold;
float: left;
margin-left: 5px;
height: 20px;
width: 90px;
padding: 5px;
color: black;
}
ska jag då lägga in scriptet så här?
#meny ul li a
{
background: url(layout/menu.png);
}
* html #meny ul li a
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='layout/menu.png', sizingMethod='crop');
}
312 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
