Gegen das „Mac“kern oder was ist CSS-Alpha/Opacity?

So praktisch wie der CSS Code „opacity:0.5;“ auch ist, Mac-Nutzer halten davon nichts. Na gut, das ist etwas verallgemeinert, aber welche Probleme auftauchen und wie man sie umschifft, erfährst du heute.

„opacity:X;“ soll eigentlich das Bild „transparenter“ machen, wobei 0.1 für 10% Sichtbarkeit steht. Doch so schnell man den Code auch nutzt, er ist nicht optimal. Ich habe mich auch dazu verleiten lassen, es in meinem Channel Besserwisser zu nutzen und schon nach einigen Tagen beschwerten sich Nutzer, dass sie keine Buttons sehen. Wie sich herausstellte, haben sie alle einen Mac.

Ansicht von MAC-Nutzern
Die gewünschte Ansicht

 

 

div[data-actions="gamestart"]{
background-image:url(start.png);
background-repeat:no-repeat;
width:    165px;
height:   60px;
position: absolute;
top:      100px;
opacity:  0.8;
}

div[data-actions="gamestart"]:Hover{
opacity:1;
}

Damit es nun bei jeden Nutzer funktioniert, müssen wir etwas mit Photoshop-Transparenzen arbeiten. Dabei können Gimp und eine Vielzahl anderer Programme das genauso. Dafür nehmen wir einfach von den Button die Deckkraft weg. Das schaut dann so aus:

Bedenken wir nun, dass JPG keine Transparenz darstellen kann, nehmen wir das Bild mit 80% Deckkraft und speichern es als StartNoHover.png. PNG kann die Transparenz darstellen, ideal für uns. Dafür entfernen wir einfach opacity: 0.8;(Zeile 8 im oberen Beispielcode) aus unserem CSS-Block und schon gehört das Problem der Vergangenheit an.

div[data-actions="gamestart"]{
background-image:url(start.png);
background-repeat:no-repeat;
width:    165px;
height:   60px;
position: absolute;
top:      100px;
}

div[data-actions="gamestart"]:Hover{
opacity:1;
}

Nun wird das Bild ohne Hover mit 80% Transparenz angezeigt und sobald die Maus über das Bild streicht (Hover), wird es mit 100% Deckkraft angezeigt. Nun haben wir den selben schönen Hover Effekt wie mit „opacity“, nur dass Mac-User nun kein Anzeigefehler mehr haben und das Spiel voll und ganz genießen können.

3 Gedanken zu “Gegen das „Mac“kern oder was ist CSS-Alpha/Opacity?

  1. Mit Bildern ist keine Transition möglich. Bizarrus Vorschlag ist auch nicht praktikabel, da man mit rgba keine schönen Bilder/Texturen malen kann und zu guter letzt, kann MAC sehr wohl problemfrei mit opacity umgehen. Hier im Büro haben wir ein MAC mit Standalone App der es problemfrei darstellt.

    Gefällt mir

  2. Ich denke das problem ist eher ein Safari problem als ein Mac Problem, und wer heute noch Safari verwendet det hat es einfach nicht anders verdient.

    Gefällt mir

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s