[css/opacity] hoe links en rechts 'faden'?

[decramy]

Stel dat je een rijtje met plaatjes hebt, welke je met een lichte overgang naast elkaar zet, hoe krijg je het dan voor elkaar om opacity op zowel de linker als de rechterkant van alle plaatjes toe te passen?

code:

<style type="text/css">
.ding {
    opacity: 0.5;
    filter: alpha(opacity:95,  finishopacity:35, style:1);
}
</style>
[img]blaat1.jpg[/img]
[img]blaat2.jpg[/img]
[img]blaat3.jpg[/img]

levert ongeveer het gewenste resultaat, maar in IE alleen aan de rechterkant.
In FireFox alleen een wazig plaatje...

Het liefst moet er wel een 'cross-browser' oplossing komen...

[ Voor 7% gewijzigd door decramy op 19-04-2005 11:19 ]

[Cyphax]

Firefox' opacity kun je met -moz-opacity instellen (waarde tussen 0 en 1), ipv "opacity" zoals jij het nu hebt staan?
Cross-browser kan met css eigenlijk alleen door ze beide te implementeren. IE doet met -moz-opacity niets, en Firefox doet met dat IE filter niets.

[ Voor 74% gewijzigd door Cyphax op 19-04-2005 11:23 ]

[Johnny]

Je zou een heleboel keer hetzelfde plaatje kunnen plaatsen, dan clippen (gedeelte onzichtbaar maken) en het zichtbare gedeelte van ieder plaatje een andere opacity geven.

Maar dat wil je niet, de kans dat je browser enorm traag wordt is dan vrij groot.

Je zou ook gewoon in plaats van een JPEG plaatje een 32bit PNG kunnen gebruiken, en dan even zo'n scriptje zoeken waarmee het ook in MSIE werkt.

[disjfa]

Cyphax schreef op dinsdag 19 april 2005 @ 11:22:
Cross-browser kan met css eigenlijk alleen door ze beide te implementeren. IE doet met -moz-opacity niets, en Firefox doet met dat IE filter niets.

Heb je al gezien wat de IE filter doet

Verder is hier op het moment nog geen css manier op zover ik weet. Iig die cross browser is Verder is jou definitie van cross browser IE en FF neem ik aan

Je zou het kunnen proberen met een achtergrond plaatje, maar of dat nu ideaal is...

Johnny schreef op dinsdag 19 april 2005 @ 11:25:
Je zou ook gewoon in plaats van een JPEG plaatje een 32bit PNG kunnen gebruiken, en dan even zo'n scriptje zoeken waarmee het ook in MSIE werkt.

Niet als de gebruiker de daarvoor gewenste plugin niet heeft

[ Voor 23% gewijzigd door disjfa op 19-04-2005 11:27 ]

[r0bert]

disjfa schreef op dinsdag 19 april 2005 @ 11:26:

Niet als de gebruiker de daarvoor gewenste plugin niet heeft

Er is een scriptje beschikbaar welke het mogelijk maakt om ook in IE gebruik te maken van PNG's.. Zal even de link zoeken

edit:
hmm andere oplossing die ik tegen kwam, niet zelf getest:
ie-png.htc
hier de andere link:
http://gathering.tweakers.net/forum/list_messages/843598/

[ Voor 36% gewijzigd door r0bert op 19-04-2005 11:37 ]

[Cyphax]

disjfa schreef op dinsdag 19 april 2005 @ 11:26:
Verder is hier op het moment nog geen css manier op zover ik weet. Iig die cross browser is Verder is jou definitie van cross browser IE en FF neem ik aan

Ja, nouja goed, echt cross-browser is het natuurlijk niet, maar als je IE, Firefox/Mozilla en Opera (ik weet niet of Opera met enige vorm van opacity overweg kan?) gecovered hebt, heb je wel het grootste deel van de internetters te pakken. En als het om een extra'tje gaat moet je je site gewoon zo opzetten dat het ook niet meer is dan dat: in een browser zonder opacity moet het ook gewoon werken.
Dat het niet echt cross-browser is kun je in zo'n geval wel voor lief nemen toch?

Ik zou dit overigens niet met CSS proberen op te lossen als het wat makkelijker met een png of gifje (of flash) gaat, zoals Johnny voorstelde.
Het is eigenlijk een beetje droevig geregeld momenteel met dit soort effecten.

[CrashOne]

http://www.youngpup.net/_...tories/sleight/index.html

Hier mee kan je iig 32bit PNG met alpha channels gebruiken in IE.

[Pelle]

Kom op decramy, een beetje creativiteit mag best.