Matthias Scharwies: button verliert durch background-image Funktionalität

Servus!

Ich bin gerade völlig ratlos. Ich will als Alternative für das CSS-Bilderkarussell einen JS-Player bauen. Die Normal-Variante arbeitet mit Unicode-Zeichen. Da es für shuffle kein Unicode-Zeichen ohne Hintergrund gibt, setze ich es als SVG-Hintergrundbild ein:

Button mit Hintergrundbild (größer Zoomen)

Das funktioniert, aber plötzlich sind die Einstellungen für border (jetzt style:outset), background-color und die :hover-Effekte weg???

Habt ihr ...

eine Erklärung???

eine Lösung???

(Dass ich den Player völlig umbauen muss, ist mir klar.) Im vorigen Beispiel bedeutete ► das Abspielen der Animation.

Eigentlich müssten diese Buttons ► ◄ ja "Bild vor" und "Bild zurück" bedeuten, oder?

►► könnte dann ja automatisch abspielen bedeuten und könnte mit "Pause" toggeln oder "Pause" müsste zwei Farben bekommen - sonst weiß man nicht, was aktiviert wurde und was nicht.

Herzliche Grüße und vielen Dank im Voraus!

Matthias Scharwies

--
25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
  1. Hallo Matthias Scharwies,

    Ja, das ist so. Steht auch im Wiki. Ich finds grad nicht (Gestaltung mit CSS pro und kontra).

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  2. Servus!

    Ich bin gerade völlig ratlos. … Da es für shuffle kein Unicode-Zeichen ohne Hintergrund gibt, setze ich es als SVG-Hintergrundbild ein:

    Button mit Hintergrundbild (größer Zoomen)

    Das funktioniert, aber plötzlich sind die Einstellungen für border (jetzt style:outset), background-color und die :hover-Effekte weg???

    Habt ihr ...

    eine Erklärung???

    eine Lösung???

    Ein Hack: Ich setz das SVG in button span. Dann funzt es!

    Herzliche Grüße

    Matthias Scharwies

    --
    25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
    1. Hallo Matthias Scharwies,

      https://wiki.selfhtml.org/index.php?title=Benutzer:Apsel/button&direction=prev&oldid=26512#Buttons_mit_CSS_gestalten_-_contra

      Bis demnächst
      Matthias

      --
      Du kannst das Projekt SELFHTML unterstützen,
      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      1. Servus!

        Hallo Matthias Scharwies,

        https://wiki.selfhtml.org/index.php?title=Benutzer:Apsel/button&direction=prev&oldid=26512#Buttons_mit_CSS_gestalten_-_contra

        Oh, das muss ich wieder rausholen!

        Herzliche Grüße

        Matthias Scharwies

        --
        25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
      2. @@Matthias Apsel

        https://wiki.selfhtml.org/index.php?title=Benutzer:Apsel/button&direction=prev&oldid=26512#Buttons_mit_CSS_gestalten_-_contra

        Darin:

        Buttons gehören wie beinahe alle Formularelemente zu denen, die sich etwas gegen die Gestaltung durch CSS „wehren“.

        ?? Es gibt Formularelemente, die sich etwas gegen die Gestaltung durch CSS wehren. Dazu gehören <select> und <input type="file"/>. Buttons gehören nicht dazu.

        Sowohl Aussehen als auch Funktionalität sollte möglichst nicht durch den Webdesigner beeinflusst werden

        Warum das nicht? Man kann Buttons durchaus anders gestalten – solange sie wie Buttons aussehen.

        Buttons sind Teil der Arbeitsumgebung des Anwenders

        Buttons sind Teil des UI der Anwendung, also der Webseite.

        Es ist sogar sinnvoll, sie anders – besser – zu gestalten als die vom Browser vorgegebenen: größere Schrift, farbliche Hervorhebung, Unterscheidung von call to action und sekundären Buttons u.a.m.

        und deshalb kein Spiel- und Tummelplatz für Autoren von Web-Seiten.

        Wenn man nicht weiß, was man tut, dann nicht mit Buttons rumspielen. Aber wenn man weiß, was man tut, dann nur zu!

        🖖 Stay hard! Stay hungry! Stay alive! Stay home!

        --
        Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! (@heuteshow)
        1. Hallo Gunnar Bittersmann,

          Buttons gehören wie beinahe alle Formularelemente zu denen, die sich etwas gegen die Gestaltung durch CSS „wehren“.

          ??

          genau dasselbe hatten wir schon. Lies einfach genau beide Abschnitte. Insbesondere „Sobald Sie beispielsweise Hintergrund- oder Rahmeneigenschaften ändern, werden sämtliche Gestaltungen, die durch Browser und Betriebssystem vorgegeben sind, durch die CSS-Voreinstellungen ersetzt.“ und den danach folgenden Abschnitt "Pro".

          Sei außerdem beruhigt, das ist kein Teil des Wikis mehr. @Matthias Scharwies hat das raus genommen und ist heute selbst darüber gestolpert.

          Bis demnächst
          Matthias

          --
          Du kannst das Projekt SELFHTML unterstützen,
          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  3. Hallo Matthias,

    warum nimmst du für Shuffle ein Hintergrundbild und keins im Vordergrund?

    Die Doppelpfeile kenne ich als „gehe zum ersten“ / „gehe zum letzten“.

    Wie wäre es, zum Abspielen den einfachen Pfeil zu nehmen, der bei Klick das Pausensymbol bekommt und umgekehrt.

    Für manuelles Wechseln kenne ich es, dass am linken und rechten Bildrand ein Pfeil ist.

    Gruß
    Jürgen

    1. Servus!

      Hallo Matthias,

      warum nimmst du für Shuffle ein Hintergrundbild und keins im Vordergrund?

      Weil dies nicht einfach schwarz-weiß ist, sondern bei mir einen blauen Hintergund hat: Unicode Character 'TWISTED RIGHTWARDS ARROWS' (U+1F500)

      Die Doppelpfeile kenne ich als „gehe zum ersten“ / „gehe zum letzten“.

      Ja die bräuchte man in einem Bildwechsler eigentlich gar nicht.

      Wie wäre es, zum Abspielen den einfachen Pfeil zu nehmen, der bei Klick das Pausensymbol bekommt und umgekehrt.

      Ja, so ist es im Beispiel für "Animationen steuern" drin. Jetzt kam ich drauf, dass man auch manuell wechseln können müsste.

      Für manuelles Wechseln kenne ich es, dass am linken und rechten Bildrand ein Pfeil ist.

      Das wäre dann so: |◄ ►/❙❙ ⤮ ►|

      (Die shuffle-Pfeile hab ich von Gunnar!)

      Herzliche Grüße

      Matthias Scharwies

      --
      25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
      1. Hallo Matthias,

        Hallo Matthias,

        warum nimmst du für Shuffle ein Hintergrundbild und keins im Vordergrund?

        Weil dies nicht einfach schwarz-weiß ist, sondern bei mir einen blauen Hintergund hat: Unicode Character 'TWISTED RIGHTWARDS ARROWS' (U+1F500)

        Die Frage war eher, warum du nicht das SVG als <svg> im Content des Buttons einbindest 😉

        Freundliche Grüße,
        Christian Kruse

        1. Servus!

          Hallo Matthias,

          Hallo Matthias,

          warum nimmst du für Shuffle ein Hintergrundbild und keins im Vordergrund?

          Weil dies nicht einfach schwarz-weiß ist, sondern bei mir einen blauen Hintergund hat: Unicode Character 'TWISTED RIGHTWARDS ARROWS' (U+1F500)

          Die Frage war eher, warum du nicht das SVG als <svg> im Content des Buttons einbindest 😉

          Ja, stimmt, evtl. als Fragment, dass irgendwo anders notiert ist, damit das Bedienfeld selbst überwichtlich bleibt.

          Freundliche Grüße,
          Christian Kruse

          Herzliche Grüße

          Matthias Scharwies

          --
          25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
  4. @@Matthias Scharwies

    Da es für shuffle kein Unicode-Zeichen ohne Hintergrund gibt

    ⤮ U+292E?

    Möglicherweise gibt es aber auch Fonts, die für die Zeichen ⏯ U+23EF, ⏩ U+23E9, 🔀 U+1F500 usw. Glyphen ohne Hintergrund haben?

    bedeutete ► das Abspielen der Animation.

    Ja, das würde ich bei einem Player bei diesem Icon erwarten.

    Eigentlich müssten diese Buttons ► ◄ ja "Bild vor" und "Bild zurück" bedeuten, oder?

    Tricky. Für vor/zurück ⏭ U+23ED und ⏮ U+23EE, aber mit einem Pfeil?

    ►► könnte dann ja automatisch abspielen bedeuten

    Darunter würde ich „schnell vorwärts“ verstehen, keinesfalls „automatisch abspielen“.

    🖖 Stay hard! Stay hungry! Stay alive! Stay home!

    --
    Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! (@heuteshow)
    1. Servus!

      @@Matthias Scharwies

      Da es für shuffle kein Unicode-Zeichen ohne Hintergrund gibt

      ⤮ U+292E?

      Der passt, müsste vergrößert werden!

      Möglicherweise gibt es aber auch Fonts, die für die Zeichen ⏯ U+23EF, ⏩ U+23E9, 🔀 U+1F500 usw. Glyphen ohne Hintergrund haben?

      bedeutete ► das Abspielen der Animation.

      Ja, das würde ich bei einem Player bei diesem Icon erwarten.

      Eigentlich müssten diese Buttons ► ◄ ja "Bild vor" und "Bild zurück" bedeuten, oder?

      Tricky. Für vor/zurück ⏭ U+23ED und ⏮ U+23EE, aber mit einem Pfeil?

      Ja, evtl. könnte man Zwichen kombinieren:

      Das wäre dann so: |◄ ►/❙❙ ⤮ ►|

      ►► könnte dann ja automatisch abspielen bedeuten

      Darunter würde ich „schnell vorwärts“ verstehen, keinesfalls „automatisch abspielen“.

      Stimmt! Vielen Dank!

      🖖 Stay hard! Stay hungry! Stay alive! Stay home!

      Herzliche Grüße

      Matthias Scharwies

      --
      25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
    2. @@Gunnar Bittersmann

      Möglicherweise gibt es aber auch Fonts, die für die Zeichen ⏯ U+23EF, ⏩ U+23E9, 🔀 U+1F500 usw. Glyphen ohne Hintergrund haben?

      Font Awesome bietet auch entsprechende Icons …

      Für vor/zurück ⏭ U+23ED und ⏮ U+23EE, aber mit einem Pfeil?

      … auch diese. V 4.7.0 | V 5.13.0

      Allerdings auf eigenen Codepoints in der Private Area, bspw. random nicht auf U+1F500, sondern auf U+F074.

      Aber man muss (sollte) Font Awesome ja nicht als Webfont verwenden, sondern die SVGs von denen nutzen.

      🖖 Stay hard! Stay hungry! Stay alive! Stay home!

      --
      Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! (@heuteshow)