[CSS] Alpha zorgt voor diverse problemen

[Verwijderd]

De volgende CSS code gebruik ik om delen van een pagina transparanter te maken.

code:

filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.70; opacity: 0.70;

Dit werkt in de geteste browsers prima, alleen onderling zit er nogal wat verschil. Wellicht dat jullie suggesties hebben om dit op te lossen:

1. Erg vervelend is dat Iexplorer de fonts weer korrelig maakt. Het renderen van fonts lijkt compleet te worden uitgeschakeld.
2. Alle browsers met uitzondering van Iexplorer maken de tekst die getoont wordt in de transparante div ook transparant, dit zou niet het geval moeten zijn. Ik heb hierover wel het een en ander gevonden maar niet iets dat universeel werkt.
3. Alle browsers behalve Safari kappen sommige letters lelijk af. Zo mist een stukje van de linkerstok van de hoofdletter 'W'.

[Verwijderd]

Volgens mij klopt 2 wel hoor... je geeft immers aan dat de gehele DIV (of whatever) transparant moet worden, alles wat er vervolgens ondervalt wordt daarmee ook transparanter. Je zou wel een tekst 'eroverheen' kunnen zetten zonder dat deze transparanter wordt. Overigens gebruik ik zelf toch liever (in meer of mindere mate) transparante PNG's om deze effecten te creëren.

[Verwijderd]

Verwijderd schreef op donderdag 23 oktober 2008 @ 21:59:
Volgens mij klopt 2 wel hoor... je geeft immers aan dat de gehele DIV (of whatever) transparant moet worden, alles wat er vervolgens ondervalt wordt daarmee ook transparanter. Je zou wel een tekst 'eroverheen' kunnen zetten zonder dat deze transparanter wordt. Overigens gebruik ik zelf toch liever (in meer of mindere mate) transparante PNG's om deze effecten te creëren.

Verrek, ik had niet gedacht dat semi-transparante PNG bestanden universeel als achtergrond zouden werken. Mooi wel dus! Dit lost in een keer alle problemen op. Bedankt!

[Verwijderd]

check wel ff IE6,, daarvoor moet je met een aparte stylesheet zorgen dat de PNGs ook daadwerkelijk transparant worden:

code:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='http://domein.nl/plaatje.png');

[Bosmonster]

Dat de fonts in IE mis gaan komt door ClearType. Even zoeken op opacity cleartype bug bijvoorbeeld levert je daar al een hoop resultaten op.

Al is het nu niet meer van toepassing begrijp ik

[ Voor 16% gewijzigd door Bosmonster op 24-10-2008 09:40 ]

[mithras]

Verwijderd schreef op donderdag 23 oktober 2008 @ 21:59:
Volgens mij klopt 2 wel hoor... je geeft immers aan dat de gehele DIV (of whatever) transparant moet worden, alles wat er vervolgens ondervalt wordt daarmee ook transparanter. Je zou wel een tekst 'eroverheen' kunnen zetten zonder dat deze transparanter wordt. Overigens gebruik ik zelf toch liever (in meer of mindere mate) transparante PNG's om deze effecten te creëren.

Het is inderdaad normaal gedrag dat alle childs ook transparant zijn. Zomaar een divje met 100% opacity erin zetten werkt helaas niet. Er zijn wel nare oplossingen om met een tabel te werken, maar dat is niet heel fijn.

Wat een leuk CSS3 truukje is om gebruik te maken van het rgba model:

Cascading Stylesheet:

.transparant{
  background-color: rgba( 255, 0, 0, 0.5); /* Red and 50% opacity */
}

Is natuurlijk niet een all-browser oplossing, helaas...

[Kiphaas7]

Wat veel gedaan wordt, is door middel van absolute positionering en z-index, een div met text over een div met de opactiy settings heen te plaatsen. Nadeel is natuurlijk de extra div, maar het voordeel is dat je text geen last heeft van de opacity settings.

[ Voor 8% gewijzigd door Kiphaas7 op 24-10-2008 11:18 ]

[Verwijderd]

Bedankt voor alle reacties!

Bo-oz > Dat was inderdaad de rede waarom ik dacht dat het niet werkte. Ik heb iexplorer 6 er bij gehaald alleen ik krijg het met jouw stukje css niet werkend. Ik heb louter de image gewijzigd en in de body gezet. Hierbij gebeurde er niets. Vervolgens heb ik het rechtstreeks in de class gezet en op een of andere manier verdwijnt het onderdeel dan gewoon in zijn geheel uit beeld of verschuift het naar een vreemde plaats. Ik gebruik op de onderdelen een z-index en javascript, maar verder is er weinig overeenkomst.

code:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='images/b87.png');

[DiSiLLUSiON]

Je zou gebruik kunnen maken van het IE7 script, al werkt dit niet in 100% van de gevallen geloof ik (css stretch backgrounds bijvoorbeeld als ik me niet vergis):

http://dean.edwards.name/IE7/

Natuurlijk niet vergeten deze via een conditional comment alleen voor IE5 en 6 te includen.

[ Voor 20% gewijzigd door DiSiLLUSiON op 25-10-2008 10:00 ]

[Verwijderd]

@funks... volgens mij moet je bij DXImageTransform het volledige pad gebruiken dus: http://www.domain.nl/img/plaatje.png.

Overigens is het handig deze css rules in een apart document te plaatsen die je pas oproept na het normale .css. Dit kan je doen door conditional statements te gebruiken <!-- IF[lt IE7] !> (of iets dergelijks). In dit document benoem je nogmaals de gewenste CSS class:

code:

.class {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image src='http://www.domain.nl/'images/b87.png');
}

Deze wordt dan slechts gebruikt door IE6. Bij mij werkt dit namelijk prima, indien het nog niet werkt, geef ff linkje naar een pagina, kan ik ff kijken.

[Fietslamp398]

DiSiLLUSiON schreef op zaterdag 25 oktober 2008 @ 10:00:
Je zou gebruik kunnen maken van het IE7 script, al werkt dit niet in 100% van de gevallen geloof ik (css stretch backgrounds bijvoorbeeld als ik me niet vergis):

http://dean.edwards.name/IE7/

Natuurlijk niet vergeten deze via een conditional comment alleen voor IE5 en 6 te includen.

De vraag is alleen of je conditional statements wil gebruiken. Ik persoonlijk begin te nijgen om alleen nog maar pure html/css te willen gebruiken en zo proberen gebruikers van non-standaard browsers te pushen naar het updaten van hun browser. Overigens hangt deze keuze natuurlijk erg van de opdrachtgever(s) af

[DiSiLLUSiON]

Fietslamp398 schreef op zondag 26 oktober 2008 @ 10:19:
[...]
De vraag is alleen of je conditional statements wil gebruiken. Ik persoonlijk begin te nijgen om alleen nog maar pure html/css te willen gebruiken en zo proberen gebruikers van non-standaard browsers te pushen naar het updaten van hun browser. Overigens hangt deze keuze natuurlijk erg van de opdrachtgever(s) af

Ik begrijp je standpunt. Daarnaast ben ik het er ook nog eens mee eens.

Maar, ik denk niet dat het niet gebruiken van conditional statements dan de juiste keuze is. Het enige wat je dan voor elkaar krijgt, is dat andere browsers die troep over zich heen krijgen, meer niet.

Persoonlijk denk ik dat het dan verstandiger is om (wanneer de projecten zich daartoe lenen) zoveel mogelijk gebruik te maken van nieuwe technologieën zoals Canvas, SVG, XBL, enzovoorts. Maak je charts niet in flash, maar gebruik daar SVG/SMIL voor. Gebruik fatsoenlijke get'ers / set'ers in je Javascript, blijf met je handen af van XAML/Silverlight , VML, HTC, ActiveX en dergelijke en degradeer functionaliteit in deze gevallen tot het hoogst noodzakelijke -- het is afhankelijk van het project, maar denk aan bijvoorbeeld maximaal 5% aan extra ontwikkeltijd om het compatible te maken met browsers als IE; dus niet alle fancy, mooie en handige stuff proberen te porten door middel van javascript en andere workarounds.

Het ligt natuurlijk aan het type project en aan de opdrachtgever (as usual), maar op deze manier laat je de gebruikers van outdated browsers niet in de kou staan (de meeste dingen werken immers wel, hetzij wat lastiger en/of minder mooi), wordt je niet geconfronteerd met een extra ontwikkeltijd van in de 30%-40% en werk je de ontwikkeling van het internet niet tegen door te kiezen voor oude methodes terwijl er al prima alternatieven beschikbaar zijn op moderne browsers.

Als het dan een beetje meezit, komen de outdated browsers vanzelf wel mee voordat ze uit de markt gedrukt worden.

[ Voor 3% gewijzigd door DiSiLLUSiON op 27-10-2008 09:24 ]

[Verwijderd]

@Fietslamp, zolang het, wat betreft defecte browsers, zich beperkt tot IE, ben ik bang dat je kan wachten tot je een ons weegt, het blijft immers nog steeds de meestgebruikte (op mijn webpagina's is nog zeker 60% van de gebruikers de 'trotse' bezitter van IE6)! Zelf voor IE7 ben ik correct XHTML aan het trucen om dingen werkend te krijgen in IE7 omdat het zich net even anders gedraagd dan FF en Chrome bijvoorbeeld. (Laatst genoemden zijn wat mij betreft prima voorbeelden van hoe het zou moeten!)