nicht angemeldet
CSS Bildausschnitt statt verzerren
0 0 
marctrix
0 0 marctrix
0 
Gunnar Bittersmann
0 0 marctrix
1 
Matthias Scharwies
1 marctrix
CSS Bildausschnitt statt verzerren
Matthias ApselHallo liebe Community, ich habe folgendes Problem und zwar hab ich einen Slider(Diashow) auf meiner Webseite mit folgenden Werten:
width:100% min-height:200px; max-height:500px;
Die Bilder im Slider sind 1400×500 Pixel groß, sobald nun die Grenze von 500px in der Höhe überschritten wird verzerrt sich das Bild. Ich möchte nun erreichen dass, das Bild einfach abgeschnitten wird, bzw. ein Bildausschnitt angezeigt werden soll. (Sofern ich die max-height weg lasse, hab ich genau den Effekt, jedoch muss ich diese drin lassen, da ich sonst andere Problem mit der Darstellung hab) Genauso wie auf dieser Webseite, möchte ich es hinbekommen: http://www.kanzlei-dr-klein.de
Hat jemand eine Idee wie dies mache?
Liebe Grüße Christoph
-
Hallo Christoph,
einfachste Methode: als Hintergrundbild(er) definieren und mit "background:cover" sowie Positionierung arbeiten.
Siehe background.
Gruß, Martl
-
Hej Martl,
einfachste Methode: als Hintergrundbild(er) definieren und mit "background:cover" sowie Positionierung arbeiten.
Siehe background.
Das ist Code from Hell weil es CSS missbraucht für etwas, wozu es nicht gemacht ist - Bilder gehören (wenn sie inhaltlich relevant und keine Schmuckgrafiken sind) in das HTML-Dokument und mit einem alt-Text versehen.
Er sucht wohl eher so etwas wie overflow: hidden
Die gewünschte Größe erhält in diesem Fall das elternelement.
Wobei ich nicht weiß, warum er überhaupt erst unnötig große Bilder ausliefern will. In der Regel macht es keinen Sinn, die größer zu machen, als die verfügbare Fläche. Man hat in einem Grafikprogramm auch die Wahl des Ausschnittes in der Hand. Würde ich persönlich nicht dem Zufall überlassen, ob das Ergebnis einen sinnvollen Ausschnitt anzeigt...
Marc
-
Hallo Marc,
Das ist Code from Hell weil es CSS missbraucht...
Zuviel der Ehre, bestenfalls - wenn überhaupt - Fegefeuer, Abschnitt lässliche Sünden.
...wozu es nicht gemacht ist...
Dann gibt es also gar kein "background"? 'tschuldigung, wusste ich nicht:-}
Jetzt ernsthaft:
Warum sollte jemand Graphiken mit relevantem Inhalt nur teilweise anzeigen lassen wollen? In Verbindung mit der genannten Beispielsseite ergibt sich für mich der Schluss, daß es sich um ein Seitenbanner handelt, das ausschließlich "schmückende" Funktion hat.
...wenn sie inhaltlich relevant und keine Schmuckgrafiken sind...
Und damit sind wir dann wieder einer Meinung. Diese Konstruktion schreit förmlich danach, eine Hintergrundgraphik zu sein zu wollen.
...warum er überhaupt...
Die Frage lautete "Wie funktioniert es?" und nicht "Ist es sinnvoll?".
Gruß, Martl
"Die Welt ist eine Pizza – das würde auch den ganzen Käse erklären." (Philosophien der Scheibenwelt)
-
Hej Martl,
Das ist Code from Hell weil es CSS missbraucht... Zuviel der Ehre, bestenfalls - wenn überhaupt - Fegefeuer, Abschnitt lässliche Sünden.
Das behaupte ich von meinen Missetaten auch immer >:->
Diese Konstruktion schreit förmlich danach, eine Hintergrundgraphik zu sein zu wollen.
Hatte ich nicht gesehen, weil ich dem Link nicht gefolgt bin.
Sorry!
Dann natürlich ’background-image’ - da funktionieren dann auch die Schlüsselwörter contain, cover usw in allen aktuellen Browsern!
...warum er überhaupt... Die Frage lautete "Wie funktioniert es?" und nicht "Ist es sinnvoll?".
Ist für mich ein und dasselbe. Wenn es nicht sinnvoll ist, funktioniert es auch nicht - mindestens nicht wie erwartet, was dazu führt, dass der eine oder andere es nicht bedienen oder verstehen kann, womit wir wieder bei "wie funktioniert es?" Wären ;-)
Marc
-
@@marctrix
Die Frage lautete "Wie funktioniert es?" und nicht "Ist es sinnvoll?".
Ist für mich ein und dasselbe.
Guter Punkt.
LLAP 🖖
--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hallo Gunnar,
Die Frage lautete "Wie funktioniert es?" und nicht "Ist es sinnvoll?".
Ist für mich ein und dasselbe.
Guter Punkt.
dann wende diese Logik bitte einmal z. B. auf die Formel 1 (also einen fürchterlichen Blödsinn) an. Dann müßte das Ergebnis wohl lauten "Es funktioniert, also ist es sinnvoll."
Gruß, Martl
-
Hej Martl,
Die Frage lautete "Wie funktioniert es?" und nicht "Ist es sinnvoll?".
Ist für mich ein und dasselbe.
Guter Punkt.
dann wende diese Logik bitte einmal z. B. auf die Formel 1 (also einen fürchterlichen Blödsinn) an. Dann müßte das Ergebnis wohl lauten "Es funktioniert, also ist es sinnvoll."
Abgesehen davon, dass deine Aussage nicht logisch ist, funktioniert die Formel 1 in Vielerlei Hinsicht.
Ihr Ziel ist die Unterhaltung der Motorsportbegeisterten. Unterhält sie diese? Ja.
Für Bernie Eccleston soll sie Ruhm und Reichtum sicher. Macht sie ihn reich und berühmt? Ja
So kann man noch eine ganze Weile fortfahren... ;-)
Marc
-
-
-
-
-
-
-
Servus!
Ich glaube, du suchst evtl. sowas wie object-fit und object-Position.
CSS-tricks: A Quick Overview of
object-fitandobject-positionHerzliche Grüße
Matthias Scharwies
-
Hej Matthias,
Ich glaube, du suchst evtl. sowas wie object-fit und object-Position.
CSS-tricks: A Quick Overview of
object-fitandobject-positionWarum nicht passende Bilder erstellen? So wird doch nur unnötiger Traffic verursacht.
Die genannten Eigenschaften lassen alle MS-Browser (inklusive mobile) außen vor.
Marc
-
@@marctrix
Ich glaube, du suchst evtl. sowas wie object-fit und object-Position.
Die genannten Eigenschaften lassen alle MS-Browser (inklusive mobile) außen vor.
Ja, und?
LLAP 🖖
--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hej Gunnar,
@@marctrix
Ich glaube, du suchst evtl. sowas wie object-fit und object-Position.
Die genannten Eigenschaften lassen alle MS-Browser (inklusive mobile) außen vor.
Ja, und?
Und?
Ach so, ja und BlackBerry, UC Browser for Android und den Android Browser bis zur meistverbreiteten Version 4.4
Marc
-
@@marctrix
Ich glaube, du suchst evtl. sowas wie object-fit und object-Position.
Die genannten Eigenschaften lassen alle MS-Browser (inklusive mobile) außen vor.
Ja, und?
Und?
Ach so, ja und BlackBerry, UC Browser for Android und den Android Browser bis zur meistverbreiteten Version 4.4
Ja, und?
Wäre das ein Grund, dieses Browsern, die das unterstützen, vorzuenthalten?
Müssen Webseiten in jedem Browser exakt gleich aussehen?
Wenn du eine der Fragen mit Ja beantwortet hast, schreibst du zur Strafe 100 Mal „progressive enhancement“!
LLAP 🖖
--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hej Gunnar,
@@marctrix
Ich glaube, du suchst evtl. sowas wie object-fit und object-Position.
Die genannten Eigenschaften lassen alle MS-Browser (inklusive mobile) außen vor.
Ja, und?
Und?
Ach so, ja und BlackBerry, UC Browser for Android und den Android Browser bis zur meistverbreiteten Version 4.4
Ja, und?
Und das sollte man sich bewusst machen, die Auswirkungen testen und - wenn einem die Darstellung in diesen Browsern nicht gefällt oder die Funktion (Anzeige des Bildes) nicht gewährleistet ist - sich ggfs drum kümmern.
Mittels @support zum Beispiel oder was auch immer...
Müssen Webseiten in jedem Browser exakt gleich aussehen?
Nein, aber manche Nutzer können zwischen zufälliger Darstellung und Design unterscheiden (c) by Gunnar Bittersmann. (aus der Erinnerung nur sinngemäß zitiert, Korrektur erlaubt!)
Ich würde schon sagen, dass es in allen aktuellen Browsern ordentlich und ähnlich aussehen sollte.
Wenn du eine der Fragen mit Ja beantwortet hast, schreibst du zur Strafe 100 Mal „progressive enhancement“!
;-)
Versprochen, aber das wirst du niemals nicht erleben!1einself!!!1
Großes Indianerehrenwort!
Marc
-
@@marctrix
Nein, aber manche Nutzer können zwischen zufälliger Darstellung und Design unterscheiden (c) by Gunnar Bittersmann. (aus der Erinnerung nur sinngemäß zitiert, Korrektur erlaubt!)
Ich würde schon sagen, dass es in allen aktuellen Browsern ordentlich und ähnlich aussehen sollte.
Ordentlich ja, ähnlich nein.
Ordentlich kann in dem Fall heißen, dass das Bild in IE/Edge/… nicht zugeschnitten wird, sondern in seiner Gänze eingepasst wird.
LLAP 🖖
--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
@@Gunnar Bittersmann
Ich würde schon sagen, dass es in allen aktuellen Browsern ordentlich und ähnlich aussehen sollte.
Ordentlich ja, ähnlich nein.
Wobei „ähnlich“ auf diesen speziellen Kontext bezogen ist.
Generell sollte eine Webseite/Website schon auf allen (visuellen) Ausgabegeräten ähnlich dargestellt werden – „ähnlich“ im Sinne von einheitlichem corporate design, so dass für den Nutzer ein Wiedererkennungseffekt da ist, egal mit welchem ihrer Geräte sie die Seite aufruft.
LLAP 🖖
--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
-
-
-
-
-
-
Servus!
Hej Matthias,
Ich glaube, du suchst evtl. sowas wie object-fit und object-position.
Warum nicht passende Bilder erstellen? So wird doch nur unnötiger Traffic verursacht.
Einerseits ja, andrrerseits sind größere Bilder für Retina-Screens auch nützlich.
Ich würde Bilder auch immer proportional darstellen, aber ein Slider würde auf einem kleinen Schirm in 4x3 anstelle von 3x4 besser aussehen. Wie die Bilder zugeschnitten würden (wichtige Bildausschnitte), wäre aber auch nicht ganz trivial.
Die genannten Eigenschaften lassen alle MS-Browser (inklusive mobile) außen vor.
Entweder mit Media queries eine Proportion oder object-fit und andere Abmessungen?
Herzliche Grüße
Matthias Scharwies
-
@@Matthias Scharwies
andrrerseits
Willst du dir überzählige r nicht für Wörter wie „Voraus“ aufheben?
SCNRR.
LLAP 🖖
--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Servus!
@@Matthias Scharwies
andrrerseits
Willst du dir überzählige r nicht für Wörter wie „Voraus“ aufheben?
Das war nicht ich, das tut mein Tablet so gestallten. ;-)
(Da muss ich noch genauer Korrektur lesen.)
Herzliche Grüße
Matthias Scharwies
-
-
Hej Matthias,
Ich glaube, du suchst evtl. sowas wie object-fit und object-position.
Warum nicht passende Bilder erstellen? So wird doch nur unnötiger Traffic verursacht.
Einerseits ja, andrrerseits sind größere Bilder für Retina-Screens auch nützlich.
Nur für die angezeigten Inhalte - allem was nicht angezeigt wird, ist es egal, wie gut der Bildschirm ist, auf dem es nicht zu sehen ist ;-)
Marc
-
-
-
Danke dir, hat super geklappt! :)))
[Vollzitat entfernt]
-
-
Hej Christoph,
[Slider] Genauso wie auf dieser Webseite, möchte ich es hinbekommen: http://www.kanzlei-dr-klein.de
Hat jemand eine Idee wie dies mache?
Hatte mal Lust dazu - ich mache wenig mit Animationen. Den Effekt auf der Homepage kannst du übrigens ohne Animation hinbekommen. Dafür reicht es, allen li die opacity auf durchsichtig zu setzen und einem nach dem anderen ein opacity 1 zu geben. Das geht mittels transitions, animation ist dafür wie gesagt nicht nötig.
Hier mal ein Beispiel, wenn es richtig "sliden" soll - an allen Parametern kann natürlich beliebig gedreht werden. Beim Überfahren mit der Maus oder beim fokussieren der Liste wird die animation angehalten. Das ist noch nicht der Weisheit letzter Schluss, weil die Animation wieder anfängt, wenn man sich weiter durch den Slides tabbt.
Damit das Ganze mit der Tastatur bedienbar wird, müsste man noch etwas mehr Gehirnschmalz investieren. Das Beispiel kann gerne geformt oder ins Wiki übernommen werden. Aber bitte nur, wenn einer eine Idee hat, wie das auch mit der Tastatur vernünftig bedient werden könnte.
Schön wäre natürlich ohne JS, aber im Moment fehlt mir noch die zündende Idee. Ich würde es mal mit Checkbox-Hack versuchen, auch um Punkte zu erstellen (1. Slide, 2.Slide usw), die direkt angesprungen werden können.
Das geht natürlich recht simpel, wenn man die Animation bei gechecktem Knopf komplett anhält ( animation-play-state: paused;)
Aber wie dann an die anderen Slides per Tastatur kommen? - Man kann die zwar dadurch erreichen, dass man eine andere Box checked, aber Dummerweise sind ja alle Slides nur verborgen, aber per Tastatur erreichbar. Die müsste man also sichtbar machen, wenn drin herumgetappt wird. Leider fällt mir dazu nur JS ein...
Zum Beispiel "Simpler CSS-Slider"
Marc
-
Hej marctrix,
hat jemand Lust, den Slider (mit mir zusammen) weiter zu entwicklen? Oder ist es aussichtslos, das ohne JS hinzubekommen?
@Gunnar Bittersmann, @Christian Kruse, ein Matthias oder Martin - anybody?
Marc
-
@@marctrix
hat jemand Lust, den Slider (mit mir zusammen) weiter zu entwicklen?
Ich bin (noch) beyond fliegende untertassenrand.
Oder ist es aussichtslos, das ohne JS hinzubekommen?
Vermutlich ist JS Mittel der Wahl – gerade wenn’s weil’s auch barrierefrei sein soll.
LLAP 🖖
--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hej Gunnar,
hat jemand Lust, den Slider (mit mir zusammen) weiter zu entwicklen?
Ich bin (noch) beyond fliegende untertassenrand.
Ist das Urlaub?
Oder ist es aussichtslos, das ohne JS hinzubekommen?
Vermutlich ist JS Mittel der Wahl – gerade wenn’s weil’s auch barrierefrei sein soll.
Stimmt schon. Und selbst wenn es ohne ginge: wozu ohne, wenn es mit JS besser ist?
Irgendwer sagte mal: "Heißt ggfs auch weniger CSS, wenn eine der anderen Techniken besser geeignet sind, um (ohne Barrieren) ans Ziel zu kommen!"
Die Frage ist nur, wozu noch ein Slider. Können wir einen bauen, der besser™ ist als alle anderen?
Vermutlich nicht. Und selbst wenn, wäre es wohl sinnvoller einen Fork von einem vorhandenen als Ausgangspunkt zu nehmen, statt bei Null zu beginnen...
Marc
-
-
Servus!
Hej marctrix,
hat jemand Lust, den Slider (mit mir zusammen) weiter zu entwicklen? Oder ist es aussichtslos, das ohne JS hinzubekommen?
@... ein Matthias ... - anybody?
@marctrix Interesse schon, das ToDo ist schon da: Vorhanden.
Marc
Herzliche Grüße
Matthias Scharwies
-
Hallo marctrix,
hat jemand Lust, den Slider (mit mir zusammen) weiter zu entwicklen? Oder ist es aussichtslos, das ohne JS hinzubekommen?
@Gunnar Bittersmann, @Christian Kruse, ein Matthias oder Martin - anybody?
Ich will ehrlich sein: ich habe im Moment keine Zeit für irgendwas… dieses Jahr ist es echt zum verrückt werden, ich musste mich auch vom SELF-Treffen abmelden. Sorry.
LG,
CK-
@@Christian Kruse
ich musste mich auch vom SELF-Treffen abmelden. Sorry.
Dann muss es ja wirklich schlimm um dich bestellt sein.
Du kommst auch wieder nicht mit auf Klassenfahrt nach Düsseldorf?
LLAP 🖖
--
“The best way to help people learn: answer their coding question an hour later, they’ll have likely figured it out by then.” —Todd Motto
Selfcode:sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|-
Hallo Gunnar,
ich musste mich auch vom SELF-Treffen abmelden. Sorry.
Dann muss es ja wirklich schlimm um dich bestellt sein.
Du hast keine Vorstellung… ich muss dringend etwas ändern in meinem Leben. Aber das braucht ein wenig Vorbereitung…
Du kommst auch wieder nicht mit auf Klassenfahrt nach Düsseldorf?
Den März kann ich aktuell noch nicht abschätzen, ich hoffe allerdings dass ich es schaffe. DDorf ist ja auch gerade mal 1,5h entfernt.
LG,
CK-
Hallo Christian Kruse,
Du hast keine Vorstellung… ich muss dringend etwas ändern in meinem Leben. Aber das braucht ein wenig Vorbereitung…
Oh. Das klingt ja gar nicht gut. Falls ich dir irgendwie helfen kann … (Und wenn es nur zum Reden ist)
Bis demnächst
Matthias-
Hallo Matthias,
Du hast keine Vorstellung… ich muss dringend etwas ändern in meinem Leben. Aber das braucht ein wenig Vorbereitung…
Oh. Das klingt ja gar nicht gut. Falls ich dir irgendwie helfen kann … (Und wenn es nur zum Reden ist)
Das ist nett, danke. Aber es klang vielleicht dramatischer als es gemeint war. Ich habe nur einfach zu viel zu tun, und es wird nicht weniger sondern mehr. Im Moment habe ich de facto keine Freizeit, und diesen Umstand muss ich ändern - mehr meinte ich eigentlich gar nicht :)
LG,
CK
-
-
-
-
-
Hallo marctrix
hat jemand Lust, den Slider (mit mir zusammen) weiter zu entwicklen?
Ich habe einmal Matthias Scharwies bei einem Beispiel geholfen. Mir ist aber unklar, was du „weiter entwickeln“ willst. Es gibt doch schon genügend funktionierende Beispiele.
Du schreibst, „ohne Animation hinbekommen“, verwendest aber @keyframes, animierst also.
Oder ist es aussichtslos, das ohne JS hinzubekommen?
Du hast die Wahl: Du kannst dich auf die wenigen Möglichkeiten beschränken, die CSS für Interaktion bietet, oder JavaScript einsetzen.
Mit besten Grüssen
Richard-
Hej Richard,
hat jemand Lust, den Slider (mit mir zusammen) weiter zu entwicklen?
Ich habe einmal Matthias Scharwies bei einem Beispiel geholfen. Mir ist aber unklar, was du „weiter entwickeln“ willst. Es gibt doch schon genügend funktionierende Beispiele.
Darum habe ich ja gefragt, ob die Welt noch einen braucht. Zum Beispiel einen ganz simplen zu Lehrzwecken im Wiki.
Du schreibst, „ohne Animation hinbekommen“, verwendest aber @keyframes, animierst also.
"Ohne Animation" bezog sich auf überblend-effekte, die man mit Transitions statt CSS-Animations umsetzen könnte (z. B. ändern der Transparenz).
Oder ist es aussichtslos, das ohne JS hinzubekommen?
Du hast die Wahl: Du kannst dich auf die wenigen Möglichkeiten beschränken, die CSS für Interaktion bietet, oder JavaScript einsetzen.
Es gibt schon ziemlich beeindruckende Beispiele, die ohne JS auskommen. HTML5 liefert ja auch noch einiges mit...
Marc
-
Hallo Marc
Darum habe ich ja gefragt, ob die Welt noch einen braucht. Zum Beispiel einen ganz simplen zu Lehrzwecken im Wiki.
Das interessiert mich. Die Frage ist, ob wir uns über die Lernziele einig werden können. Ein Slider, der mit der Tastatur gesteuert werden kann, ist nicht simpel.
"Ohne Animation" bezog sich auf überblend-effekte, die man mit Transitions statt CSS-Animations umsetzen könnte (z. B. ändern der Transparenz).
Die Transitions müssen gestartet werden, was kaum ohne Animation möglich ist.
Es gibt schon ziemlich beeindruckende Beispiele, die ohne JS auskommen. HTML5 liefert ja auch noch einiges mit...
Einverstanden! Allerdings bin ich nicht so leicht zu beeindrucken. Ich gehöre nicht zu den Leuten, die Flash verflucht haben, aber einen Orgasmus kriegten, als sie mit HTML und CSS animieren konnten.
Der CSS-Animation fehlen die Möglichkeiten der Interaktion. Damit stellt sich die Frage, wie CSS-Animationen mit JavaScript gesteuert werden können. Anders ausgedrückt: Wie ein einfacher Slider, der auf CSS-Animation aufbaut, mit JavaScript in seinen Anwendungsmöglichkeiten erweitert werden kann. Dafür gibt es viele Anwendungsfälle und entsprechend viel zu erklären.
Mit besten Grüssen
Richard-
Servus!
Hallo Marc
Darum habe ich ja gefragt, ob die Welt noch einen braucht. Zum Beispiel einen ganz simplen zu Lehrzwecken im Wiki.
Das interessiert mich. Die Frage ist, ob wir uns über die Lernziele einig werden können.
Für mich gilt: Wir schicken nicht nur eine Demo raus, sondern erklären in den Vorüberlegungen wie ein Slider aufgebaut ist, was gesteuert werden soll.
Der CSS-Animation fehlen die Möglichkeiten der Interaktion. Damit stellt sich die Frage, wie CSS-Animationen mit JavaScript gesteuert werden können. Anders ausgedrückt: Wie ein einfacher Slider, der auf CSS-Animation aufbaut, mit JavaScript in seinen Anwendungsmöglichkeiten erweitert werden kann.
Genau so!
- richtig verwendete Elemente
- mit CSS animiert
- die Seitenstuerung z.B. vor/zurück-Links (könnte man mit viel CSS ein- und ausblenden) dann doch in JS
Dafür gibt es viele Anwendungsfälle und entsprechend viel zu erklären.
Ich freue mich auf die Diskussion!
Was mit CSS alleine nicht praktikabwl ist, sollte man dann doch in JS realisieren. Siehe auch dem Wiki-Push im September: Modernes JavaScript
Herzliche Grüße
Matthias Scharwies
-
Hej Matthias,
Was mit CSS alleine nicht praktikabwl ist, sollte man dann doch in JS realisieren. Siehe auch dem Wiki-Push im September: Modernes JavaScript
Wer unterstützt mich in Sachen JS? ;-)
Marc
-
Hej Richard,
Darum habe ich ja gefragt, ob die Welt noch einen braucht. Zum Beispiel einen ganz simplen zu Lehrzwecken im Wiki.
Das interessiert mich. Die Frage ist, ob wir uns über die Lernziele einig werden können. Ein Slider, der mit der Tastatur gesteuert werden kann, ist nicht simpel.
Es geht. Dank Checkbox-Hack.
"Ohne Animation" bezog sich auf überblend-effekte, die man mit Transitions statt CSS-Animations umsetzen könnte (z. B. ändern der Transparenz).
Die Transitions müssen gestartet werden, was kaum ohne Animation möglich ist.
Ja, darüber habe ich gar nicht nachgedacht in dem Moment. - Also bräuchte man dazu wohl eine Animation.
Es gibt schon ziemlich beeindruckende Beispiele, die ohne JS auskommen. HTML5 liefert ja auch noch einiges mit...
Einverstanden! Allerdings bin ich nicht so leicht zu beeindrucken.
Darum geht es auch gar nicht. Ich möchte einen simplen, zugänglichen Slider.
Ich gehöre nicht zu den Leuten, die Flash verflucht haben, aber einen Orgasmus kriegten, als sie mit HTML und CSS animieren konnten.
Was aber unbestreitbare Vorteile hat.
Der CSS-Animation fehlen die Möglichkeiten der Interaktion. Damit stellt sich die Frage, wie CSS-Animationen mit JavaScript gesteuert werden können. Anders ausgedrückt: Wie ein einfacher Slider, der auf CSS-Animation aufbaut, mit JavaScript in seinen Anwendungsmöglichkeiten erweitert werden kann. Dafür gibt es viele Anwendungsfälle und entsprechend viel zu erklären.
Jeder kann sich gerne beteiligen - wenn aus dem Slider ein größeres Projekt werden sollte (und im Moment habe ich viele Ideen), veröffentliche ich das Projekt gerne in Github, dann kann es eh nach belieben geforkt werden - ich freue mich über jede Beteiligung!
Marc
-
-
-
-
-