[GIF/HTML] Jagged edges bij een .gif file op een site?

[Verwijderd]

Ik heb een gifje gemaakt van een logo. Nou heb ik dit op een HTML pagina op een grijze achtergrond gezet, en hij weergeeft het logo met een hele slechte kwaliteit.

Ik heb het geprobeerd met een <img src...> tag, en ook met een <div id="logo"> tag met dan in de css een background-image eigenschap. Ik snap echt niet hoe dit kan, want als ik in photoshop er een grijze achtergrond achterzet (niet in de psd, maar echt in de gif zelf) dan krijg ik geen jagged edges. Ik snap er niets van

Hier is de url naar de site, hij is maar tijdelijk online:

http://samchestido.nl.eu.org/Telanaxrev/index.php

[Zoefff]

Als ik de gif in Photoshop open en er vervolgens een layer met grijze achtergrond onder leg, zie ik ook gewoon gekartelde randjes (aliasing) hoor. Als je dit wilt voorkomen moet je het plaatje in Photoshop opslaan met 'save for web' (CTRL + SHIFT + ALT + S) en dan als GIF met als 'matte' de beoogde achtergrondkleur, of als PNG-24 met transparency (maar dan moet je er wel iets op verzinnen in IE aangezien die zonder extra javascript geen alpha-transparency in PNG ondersteund). Het opslaan moet je uiteraard wel vanuit het bronbestand doen, en niet vanuit de gif

[Verwijderd]

Ok, super, bedankt. Maar nu is het zo dat ik als achtergrond eigenlijk een gradient heb. Kan ik een gradient matte color instellen of moet ik maar gewoon een zo neutraal mogelijke kleur gebruiken?

Thanks alot

[Rowanov]

Een gradient kan niet; wat wel kan is van je hele header (dus met gradient) een plaatje maken.

[Zoefff]

Iets als een 'gradient matte' bestaat niet, een oplossing is zoals Rowanov al zegt om dan een plaatje van de volledige header te maken (of iig het deel waar de tekst van je logo overheen staat). Wat je ook kan doen is het plaatje opslaan als PNG met transparency, dan kan je het wél over een gradient leggen. Punt is alleen (zoals ik al eerder aangaf) dat dit in IE niet goed werkt. Je zal dan met javascript aan de slag gaan om ook PNG alpha-transparency support in IE te krijgen. Google maar eens op 'png transparency ie'

[Verwijderd]

"gradient" matte kan natuurlijk prima, alleen vziw niet automatisch, maar met wat handwerk. Kwestie van gradient op de achtergrond, mergen, en dan wat transparant moet worden (de volle gradient) wegpoetsen (misschien kan je nog iets slims doen met difference). De "bijna transparant" pixels waar het om gaat zitten dan wel goed

wat je ook kan doen is als matte kleur een soort gemiddelde kleur pakken. Als het allemaal niet te veel afwijkt ziet dat er ook nog wel ok uit

[Zoefff]

Ja oke, op die manier kan het wel ja. Maar dan kan je jezelf de moeite van het wegpoetsen beter besparen en gewoon het volledige plaatje een gradient geven

Mij lijkt de PNG oplossing iig het beste in dit geval

[Verwijderd]

Top, bedankt allemaal.

De oplossing met PNG en javascriptfix had ik even bekeken, maar ik houd niet van javascript (ik weet het, slaat nergens op eigenlijk, maar als er iets fout gaat kan ik het niet zelf fixen, want ik spreek geen javascripts )

Ik heb nog een vraag, maar weet niet of ik die in dit topic mag stellen of dat ik een nieuw topic moet openen. Ik vraag hem gewoon, en als het niet mag, sluit deze dan maar, alvast bedankt!

Als je nu kijkt op http://samchestido.nl.eu.org/Telanaxrev, dan ziet hij er in principe goed uit in firefox. In IE daarentegen, ziet het er totaal niet uit. Wat doet dat rare programma toch met mijn code? Ik heb het idee dat mijn code wel goed zit, of kan Internet Explorer niet omgaan met margins ofzo?
De code staat gewoon in de bron van de site, en de css staat op http://samchestido.nl.eu....v/styles/styleTelanax.css.

Bedankt!

[Zoefff]

Voor zover ik kan zien ziet het er best netjes uit in IE? Maargoed, je hebt om te beginnen niet eens een doctype declaratie in je code zitten. IE schiet daardoor in quirksmode, waarin het boxmodel anders is dan in Fx. IE gaat dan dus inderdaad anders om met margins en paddings.

Haal je site dus eerst eens door de validator (http://validator.w3.org/c...nl.eu.org%2FTelanaxrev%2F) en zorg dat die puntjes allemaal in orde zijn. Loop je dan nóg tegen verschillen aan in IE, dan zijn dat waarschijnlijk bugjes die je met nare CSS hacks zal gaan moeten fixen. En daar is een hele hoop over te vinden @ GoT en Google, succes