nicht angemeldet
button verliert durch background-image Funktionalität
Matthias Scharwies
button verliert durch background-image Funktionalität
Matthias Scharwies
Matthias Apsel
Gunnar Bittersmann
JürgenB
Christian KruseServus!
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
25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
-
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. -
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-
Hallo Matthias Scharwies,
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.-
Servus!
Hallo Matthias Scharwies,
Oh, das muss ich wieder rausholen!
Herzliche Grüße
Matthias Scharwies
--
25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim -
@@Matthias Apsel
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)-
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.
-
-
-
-
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-
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-
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-
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 KruseHerzliche Grüße
Matthias Scharwies
--
25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
-
-
-
-
@@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)-
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 -
@@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)
-