nicht angemeldet
Matthias Scharwies
Rolf B
Jonathan Harker
Matthias Scharwies
Rolf B
Matthias Scharwies
Rolf B
Der Martin
MudGuard
Matthias Scharwies
Rolf B
T-Rex
Guten Morgen!
Es gibt ja sogar Würfel als Unicode-Zeichen:
Schöner wäre es natürlich mit CSS oder SVG. Vorher will ich aber das „perfekte“ HTML finden:
Im Transform-Tutorial gibt es einen CSS-Würfel:
Gunnar Bittersmann <div class="cube">
<div class="vorne">vorne</div>
<div class="hinten">hinten</div>
<div class="oben">oben</div>
<div class="unten">unten</div>
<div class="links">links</div>
<div class="rechts">rechts</div>
</div>
Der müsste aber eigentlich div-Würfel heißen.
Was haltet ihr von custom elements?
<x-cube>
<x-side>1</x-side>
<x-side>2</x-side>
<x-side>3</x-side>
<x-side>4</x-side>
<x-side>5</x-side>
<x-side>6</x-side>
</x-cube>
Wenn man die einzelnen Zahlen nicht mit box-shadow umsetzen will, könnte man SVG verwenden:
<x-cube>
<svg id="1">...</svg>
<svg id="2">...</svg>
<svg id="3">...</svg>
<svg id="4">...</svg>
<svg id="5">...</svg>
<svg id="6">...</svg>
</x-cube>
Was ist am besten / einfachsten?
Habt ihr andere Vorschläge, wie man das umsetzen kann?
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
willst Du den Würfelvorgang animiert darstellen?
Rolf
Servus!
Hallo Matthias,
willst Du den Würfelvorgang animiert darstellen?
Ich glaub schon. Würfel von oben links auf das grüne Würfelfeld.
Das ist mir allerdings zu hektisch. (Und das HTML viel zu umständlich - jeder Punkt ist ein span-Element.)
Andererseits ist dieses Würfeln in 2D auch schon ganz nett.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
Wenn man die einzelnen Zahlen nicht mit box-shadow umsetzen will, könnte man SVG verwenden:
<x-cube> <svg id="1">...</svg> <svg id="2">...</svg> <svg id="3">...</svg> <svg id="4">...</svg> <svg id="5">...</svg> <svg id="6">...</svg> </x-cube>
Nur in SVG:
<svg>
<g id="face1">
<rect width="50" height="50" fill="red" />
<circle cx="25" cy="25" r="3" />
</g>
<g id="face2">
</g>
<g id="face3">
</g>
...
</svg>
und das dann mit CSS drehen.
-- Die Jugend weiß nicht mehr, warum wir Halloween feiern, traurig! Wenn Jesus den Riesenkürbis nicht besiegt hätte, würden wir kein Wihnachten feiern können!
😀
Bis bald! Jonathan
Guten Morgen!
Nur in SVG:
<svg> <g id="face1"> <rect width="50" height="50" fill="red" /> <circle cx="25" cy="25" r="3" /> </g> <g id="face2"> </g> <g id="face3"> </g> ... </svg>und das dann mit CSS drehen.
Coole Idee - so mach ich's!
Jetzt muss ich nur die CSS-transform umschreiben, da SVG ja einen anderen Angelpunkt (Ursprung anstatt "50% 50%") hat.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
ich bastele gerade an ähnlichem. SVG hat 3D Transforms?
Rolf
Servus!
Hallo Matthias,
ich bastele gerade an ähnlichem. SVG hat 3D Transforms?
Anscheinend nicht, jedenfalls klappt‘s nicht und ich finde nur das im Netz:
"All the 3D transformation functions described in this section should be considered “future” SVG. Support is inconsistent between browsers. Even when applied to HTML elements, there are many bugs and edge cases. Recognizing this, the CSS working group has separated all the 3D transformation functions into a CSS Transforms Level 2 module.[1]
Habe im Test-Wiki was mit custom elements und custom properties gebaut.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
nice 😀
Ich hatte nämlich auch schon versucht, ein SVG Element (also bspw. ein <rect> innerhalb des <svg>) aus seiner Ebene zu heben - fail. Und alles, was ich im Netz fand, sagte mir: Geht Nicht™️
Und dann wollte ich fast schon anmerken, dass es x-face-1 etc sein müsse, aber das ist ja Quatsch. Ein Minus im Elementnamen reicht für ein custom element.
Ob man da per Shadow DOM etwas hinbekommt, um im Spiel-HTML nur noch das x-cube Element zu haben? Und die Ecken - naja, wohl nicht abrunden, aber abfasen, ob das geht?
Rolf
Hallo,
nur noch das x-cube Element zu haben?
in diesem Fall sogar x-dice.
Und die Ecken - naja, wohl nicht abrunden, aber abfasen, ob das geht?
Oh Mann, jetzt wirst du aber detailverliebt! 😉
Übrigens: Nicht alle Spielwürfel haben abgerundete Ecken und Kanten. Ich habe auch schon welche in der Hand gehabt, die fast perfekt kubisch waren. Nur andeutungsweise die Kanten gebrochen. Die rollen natürlich nicht so schön, sondern purzeln nur zwei- bis dreimal auf eine andere Fläche, bis sie dann liegenbleiben.
Einen schönen Tag noch
Martin
Hi,
Übrigens: Nicht alle Spielwürfel haben abgerundete Ecken und Kanten. Ich habe auch schon welche in der Hand gehabt, die fast perfekt kubisch waren. Nur andeutungsweise die Kanten gebrochen. Die rollen natürlich nicht so schön, sondern purzeln nur zwei- bis dreimal auf eine andere Fläche, bis sie dann liegenbleiben.
Ich hab hier einen "Würfel", der ist kugelförmig (der hat im Inneren ein würfelförmiges Loch mit einer schweren Kugel drin, und jeweils über der Ecke des Würfels ist eine der Zahlen).
cu,
Andreas a/k/a MudGuard
Servus!
Hallo Matthias,
nice 😀
Ich hatte nämlich auch schon versucht, ein SVG Element (also bspw. ein <rect> innerhalb des <svg>) aus seiner Ebene zu heben - fail. Und alles, was ich im Netz fand, sagte mir: Geht Nicht™️
Ich hatte auch gedacht, dass ich die entsprechenden CSS-Eigenschaften einfach auf SVG-Elemente anwenden könnte - Pustekuchen. Das muss ich im entsprechenden Tutorial noch ergänzen.
Ob man da per Shadow DOM etwas hinbekommt, um im Spiel-HTML nur noch das x-cube Element zu haben?
Das wäre schon attraktiv - zumindest als weiteres ToDo.
Und die Ecken - naja, wohl nicht abrunden, aber abfasen, ob das geht?
Das Frickl-Beispiel (muss eh noch geändert werden) hat jetzt abgerundete Seiten und damit Löcher, in denen manchmal der Hintergrund durchblitzt.
Da bräuchte man Dreiecke, die das verdecken. Für jede abgeschrägte Kante noch ein SVG - puh 😟
Richtig mit „runden“ Ecken und mit Schattenwurf geht's wohl nur mit Blender oder three.js: https://thescottkrause.com/emerging_tech/gameification-threejs-webcrypto-accelerator-blender-gltf/
Auch das Rollen und Klackern (audio) kriegt man wohl nicht realistisch hin.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
ich habe in einem Fiddl mal abgeschrägte Kanten probiert. Geht prinzipiell, aber dann hast Du nicht nur die 6 Zahlenflächen, sondern auch die 12 Kanten. Die kann man mit einem ::before und ::after je Zahlenfläche lösen. Die 8 Eckdreiecke aber nicht mehr.
Hinzu kommt, dass man die Kanten nicht "dicht" bekommt, da blitzt immer mal der Hintergrund durch. Weil es getrennte Flächen mit getrennten Eck-Vertexen sind. Bei WebGL könnte man die Vertexe (=3D-Punkte) identisch halten, aber WebGL macht nun GAR keinen Spaß.
Wobei - das three.js Beispiel sieht kompakt aus. Aber dazu dann Blender, da erklärt man mehr den Toolstack als sonst was. Brrr.
Rolf
Moin,
wollte nur sagen, dass der Würfel eine mega geile Idee ist 😀.
Einen Würfel mit "echter" Würfelanimation gibt es nicht zufällig auch mit puren html/css?
Leider zeigt der Quelltext nicht das vollständige css was man bräuchte um es selbst nach zu bauen. Hole ich mir jedoch das css aus dem Beispiel funktioniert der Würfel auch bei mir.
Gruß
KorrekTuRex
Servus!
Moin,
wollte nur sagen, dass der Würfel eine mega geile Idee ist 😀.
Einen Würfel mit "echter" Würfelanimation gibt es nicht zufällig auch mit puren html/css?
Hier ist nochmal der Link:
Ich hatte das Beispiel 2015 mit lauter div-Elementen gebaut. Ich finde es mit custom elements übersichtlicher - man kann ja aber wieder divs verwenden.
Leider zeigt der Quelltext nicht das vollständige css was man bräuchte um es selbst nach zu bauen.
Das ist ja nur der Ausschnitt im Artikel - im Frickl steht das gesamte HTML und CSS.
Hole ich mir jedoch das css aus dem Beispiel funktioniert der Würfel auch bei mir.
Ebent. Ich hatte aber erst nach meinem Beispiel den dort verlinkten Artikel von Ana Tudor gelesen: Simplifying CSS Cubes with Custom Properties
Abgesehen davon, dass sie HAML und SCSS verwendet, hier einige Unterschiede, die ich noch besser als meinen Versuch finde:
cube-face)cube-face:nth-child()angesprochen.Das werde ich im Beispiel noch verbessern.
.cube__face {
--i: 0;
transform: rotate3d(var(--i), calc(1 - var(--i)), 0, calc(var(--m, 0)*90deg))
translateZ(4em);
}
.cube__face:nth-child(n + 5) { --i: 1 }
.cube__face:nth-child(2) { --m: 1 }
.cube__face:nth-child(3) { --m: 2 }
.cube__face:nth-child(4) { --m: 3 }
.cube__face:nth-child(5) { --m: 1 }
.cube__face:nth-child(6) { --m: -1 }
Das ist mir fast schon zu kryptisch, vor allem, da die Rotation bei einem Würfel immer gleich bleibt.
Wo die custom properties genial sind, ist --size: Mit nur einer Festlegung kann man die Größe des Würfels verändern!
Diesen Würfel mit SVGs für die Augen erweitern. Die background-imagessind zu kompliziert und vor allem nicht mit CSS zentral stylbar. Das ganze mit Shadow DOM zu kapseln, damit man nicht 7 HTML-Elemente, einen CSS-Block und evlt. JS hat, wäre optimal.
Jetzt noch …
und dann ein Spielfeld und eine Spiele-Logik!
Herzliche Grüße
Matthias Scharwies
Jetzt noch …
- für jede Zahl die 3D-Transform festlegen.
- ein Script schreiben, das den Würfel von oben links fallen lässt, der Würfel sich n-mal dreht und dann auf der vom Script ermittelten Zahl „liegenbleibt“.
- ein Klackern als mp3
und dann ein Spielfeld und eine Spiele-Logik!
Wow ... dass nenn ich mal ambitioniert.
Das hab ich letztes Jahr gebastelt:
https://www.elo-games.com/games/333076-ludo
Leider sollte ich für den Würfel ein mir vorgelegtes Objekt bzw. Script verwenden. Da die Hälfte gefehlt hat, hat es mich länger gedauert den Würfel ein zu binden als ihn wahrscheinlich selbst zu schreiben.
Kann man mittlerweile einfach selbst html Elemente erfinden (Custom Properties)? Ist das dann noch valides html?
Gruß
T-Rex ärgert sich nicht
Servus!
Jetzt noch …
- für jede Zahl die 3D-Transform festlegen.
- ein Script schreiben, das den Würfel von oben links fallen lässt, der Würfel sich n-mal dreht und dann auf der vom Script ermittelten Zahl „liegenbleibt“.
- ein Klackern als mp3
und dann ein Spielfeld und eine Spiele-Logik!
Wow ... dass nenn ich mal ambitioniert.
Das hab ich letztes Jahr gebastelt: https://www.elo-games.com/games/333076-ludo
Leider sollte ich für den Würfel ein mir vorgelegtes Objekt bzw. Script verwenden. Da die Hälfte gefehlt hat, hat es mich länger gedauert den Würfel ein zu binden als ihn wahrscheinlich selbst zu schreiben.
Cool, bei mir soll das ja nur eine Webseite ohne Speicherung und ohne serverseitige Verarbeitung von Mitspielern und ihrem Input sien.
Kann man mittlerweile einfach selbst html Elemente erfinden? (Custom Properties)? Ist das dann noch valides html?
Ja, die heißen aber custom_elements
Custom properties sind die selbstgewählten CSS-Eigenschaften, die keine CSS-Variablen sind.
Herzliche Grüße
Matthias Scharwies
Hallo,
- ein Script schreiben, das den Würfel von oben links fallen lässt ...
hmm, wie würfelst du? - Ich lasse den Würfel in einer flachen, waagrechten Bewegung aus der rechten Hand fallen, so dass er (aus meiner Sicht) von rechts nach links vor mir herrollt.
Einen schönen Tag noch
Martin
@@Matthias Scharwies
- Alle Seiten heißen gleich (
cube-face)
Warum sollen die Seiten denn überhaupt irgendwie heißen?
- Die Seiten werden dann über
cube-face:nth-child()angesprochen.
Man kann sie auch über .cube > :nth-child() ansprechen.[1]
Das ist nicht BEM; aber wer sagt denn, dass BEM das Gelbe vom Ei wäre?
Wo die custom properties genial sind, ist
--size: Mit nur einer Festlegung kann man die Größe des Würfels verändern!
Sind sie dafür genial? Nötig sind sie nicht. Man kann auch einen Einheitswürfel erstellen und diesen als Ganzes skalieren.
🖖 Живіть довго і процвітайте
bezogen auf Anas Artikel; mit custom element dann eben x-cube > :nth-child() und die Seitenflächen können div sein statt weiterer custom elements im shadow DOM. ↩︎
Hallo Gunnar,
Das ist nicht BEM; aber wer sagt denn, dass BEM das Gelbe vom Ei wäre?
Nee, das Gelbe vom Ei wären lokale Styles, die nur innerhalb eines Elements gelten. Oder Style-"Namespaces", die nur innerhalb von Elementen gelten, die einen bestimmten Selektor tragen und damit das Komponentenkonzept realisieren. Oder eine deklarative Syntax für Custom-Elemente, bei denen ich die Elementregistrierung bspw. in den Head setze und dann entweder das Element dort inline definiere, oder eine externe Datei lade, wo Style, Markup und Script sauber beieinander stehen. Ja gut. Dafür könnte ich mir eine Lib schreiben 😉.
Die Namespaces schrub ich in Anführungszeichen, weil es eine @namespace Rule durchaus gibt, diese aber für XML-Namespaces "verbrannt" ist.
Style-Namespaces kann man mit LESS & Co zwar simulieren. Aber wenn man damit nicht aufpasst, kriegt man Selektorbandwürmer im generierten Output.
Rolf
@@Rolf B
Nee, das Gelbe vom Ei wären lokale Styles, die nur innerhalb eines Elements gelten.
Hach, wenn es doch in CSS sowas wie Kind- oder Nachfahrenkombinatoren für Selektoren geben würde …
Oder Style-"Namespaces", die nur innerhalb von Elementen gelten, die einen bestimmten Selektor tragen und damit das Komponentenkonzept realisieren.
… dann könnte man Unterelemente einer Komponente (und nur diese!) anhand Klassennamen, ID oder custom element type der Komponente ansprechen!
Oder eine deklarative Syntax für Custom-Elemente, bei denen ich die Elementregistrierung bspw. in den Head setze und dann entweder das Element dort inline definiere, oder eine externe Datei lade, wo Style, Markup und Script sauber beieinander stehen.
Vue.js tut das so.
Ja gut. Dafür könnte ich mir eine Lib schreiben 😉.
NIH-Syndrom? 😉
Style-Namespaces kann man mit LESS & Co zwar simulieren. Aber wenn man damit nicht aufpasst, kriegt man Selektorbandwürmer im generierten Output.
Das ist wohl wie bei jedem Werkzeug, dass man bei der Verwendung eines Werkzeugs etwas über dessen richtige Verwendung wissen sollte.
🖖 Живіть довго і процвітайте
Servus!
@@Matthias Scharwies
- Alle Seiten heißen gleich (
cube-face)Warum sollen die Seiten denn überhaupt irgendwie heißen?
Der Würfel ist ja nur Visualiserung der Zufallszahl (von Dekoration würde ich hier nicht sprechen wollen), also brauchen wir ein cube-Element, meinetwegen auch ein inhaltsleeres div mit entsprechender Klasse.
Idealiter würde man dieses cube-Element und 6 Pseudoelemente verwenden; wie kann ich das realisieren? Deshalb @Rolf B s Idee mit dem Shadow DOM.
- Die Seiten werden dann über
cube-face:nth-child()angesprochen.Man kann sie auch über
.cube > :nth-child()ansprechen.[1]
Wahnsinn, dass ich das noch erleben darf, dass Gunnar Bittersmann mal den Einsatz eines div-Elements empfiehlt!
Für den Spielwürfel, werde ich die sechs Seiten aus svgs bilden, die ja mit 3d transformiert werden können. So kriege ich Farben wieder ins CSS (leider eben nicht da, wo sich das cube-Element befindet.
Wo die custom properties genial sind, ist
--size: Mit nur einer Festlegung kann man die Größe des Würfels verändern!Sind sie dafür genial? Nötig sind sie nicht. Man kann auch einen Einheitswürfel erstellen und diesen als Ganzes skalieren.
Ja, z.B mit einem --scale-Faktor - mal schauen!
Herzliche Grüße
Matthias Scharwies
bezogen auf Anas Artikel; mit custom element dann eben x-cube > :nth-child() und die Seitenflächen können div sein statt weiterer custom elements im shadow DOM. ↩︎
Hallo Matthias,
Eine Lösung mit shadow dom hab ich als fiddle, ich überarbeite es gerade nur noch mal.
Rolf
Servus!
Hallo Matthias,
Eine Lösung mit shadow dom hab ich als fiddle, ich überarbeite es gerade nur noch mal.
Super, ich werde vormittags meine alte 'hood durchstreifen (Grundschule ist wohl abgerissen), mittags nen Corona-Test machen und dann zu meinem Vater.
Herzliche Grüße
Matthias Scharwies
Mein Shadow DOM Spielplatz:
https://jsfiddle.net/Rolf_b/ma2jscL9/
Die Darstellung zeigt ein Gitternetz (als visuellen Bezug für die Ansicht) und 4 Würfel.
Teil 1 des JS dient für die Ansichtssteuerung.
Die Ansicht als Ganzes kann gedreht (Tasten 1 und 2) und gekippt (Tasten q und a) werden. Die Perspektivdistanz kann mit + und - geändert werden. Sei still, Gunnar, das Ganze ist nicht anders bedienbar, das ist ein Experimentierplatz.
Die Ansichtsparameter werden im localStorage gespeichert, d.h. wenn man was am Fiddle ändert und mit Run aktualisiert, bleibt die Ansicht erhalten.
Die Taste t würfelt neu.
Teil 2 registriert das custom element <die-3d>
Das Shadow DOM eines Würfels enthält ein div und darin 6 SVGs. Das div dient dazu, den Würfel auf eine bestimmte Seite zu drehen, ohne den äußeren Transform (für die Würfelposition) und die inneren Transforms (für die SVGs) bearbeiten zu müssen. Die SVGs werden per Transform korrekt in den Raum gedreht.
Das die-3d Element kennt ein Attribut namens "face", das die Lage des Würfels angibt. Der eingestellte Wert wird auf der Vorderseite des Würfels gezeigt. Damit das klappt, wird das face-Attribut vom custom element als observed attribute registriert. Zusätzlich wird für JavaScript auch ein Property face bereitgestellt, so dass man nicht mit setAttribute rummachen muss. Plausis für die face-Werte habe ich weggelassen.
Teil 3 spielt ein bisschen mit den Würfeln rum
Sicherlich noch erweiterbar.
Rolf
Servus!
Mein Shadow DOM Spielplatz:
sehr cool! schau ich mir morgen früh genauer an!
Herzliche Grüße
Matthias Scharwies
@@Matthias Scharwies
- Alle Seiten heißen gleich (
cube-face)Warum sollen die Seiten denn überhaupt irgendwie heißen?
Der Würfel ist ja nur Visualiserung der Zufallszahl (von Dekoration würde ich hier nicht sprechen wollen), also brauchen wir ein cube-Element, meinetwegen auch ein inhaltsleeres div mit entsprechender Klasse.
Da hast du micht missverstanden, glaub ich. Die Komponente (der Würfel) soll natürlich einen Namen haben. Die Seitenflächen brauchen keinen; die sind als Kindelemente der Komponente ansprechbar.
Übrigens heißt so ein Würfel mit ⚀ bis ⚅ auf Englisch nicht cube, sondern die, Plural dice. 🎶 Just another roll
Wahnsinn, dass ich das noch erleben darf, dass Gunnar Bittersmann mal den Einsatz eines div-Elements empfiehlt!
Wenn man ein Element ohne Bedeutung haben will, ist div doch genau richtig.
Übrigens wären viele fälschlich verwendeten section- und article-Elemente da draußen in freier Wildbahn auch gerne divs.
Man kann auch einen Einheitswürfel erstellen und diesen als Ganzes skalieren.
Ja, z.B mit einem
--scale-Faktor - mal schauen!
Ich dachte da an die CSS-Eigenschaft scale (oder transform: scale3d()).
🖖 Живіть довго і процвітайте
Servus!
@@Matthias Scharwies
- Alle Seiten heißen gleich (
cube-face)Warum sollen die Seiten denn überhaupt irgendwie heißen?
Der Würfel ist ja nur Visualiserung der Zufallszahl (von Dekoration würde ich hier nicht sprechen wollen), also brauchen wir ein cube-Element, meinetwegen auch ein inhaltsleeres div mit entsprechender Klasse.
Da hast du micht missverstanden, glaub ich. Die Komponente (der Würfel) soll natürlcih einen Namen haben. Die Seitenflächen brauchen keinen; die sind als Kindelemente der Komponente ansprechbar.
Übrigens heißt so ein Würfel mit ⚀ bis ⚅ auf Englisch nicht cube, sondern die, Plural dice. 🎶 Just another roll
Ja, das ist der Übergang vom CSS-Cube mit sechs Seiten zum Einsatz in einer dice-roll-Animation.
Wahnsinn, dass ich das noch erleben darf, dass Gunnar Bittersmann mal den Einsatz eines div-Elements empfiehlt!
Wenn man ein Element ohne Bedeutung haben will, ist
divdoch genau richtig.Übrigens wären viele fälschlich verwendeten
section- undarticle-Elemente da draußen in freier Wildbahn auch gernedivs.
Oder ganz weglassen! Hatte letzte Woche jemanden, der fragte, warum das Wiki keine article, section, etc verwendete. Der war dann ganz dankbar, dass die Struktur der Überschriften für eine Gliederung im Allgemeinen ausreicht.
Man kann auch einen Einheitswürfel erstellen und diesen als Ganzes skalieren.
Ja, z.B mit einem
--scale-Faktor - mal schauen!Ich dachte da an die CSS-Eigenschaft
scale(odertransform: scale3d()).
Ja, aber wenn Du die mit einer Verschiebung und Rotation kombinierst, musst du entsprechend immer alles notieren.
Herzliche Grüße
Matthias Scharwies
@@Matthias Scharwies
Ich dachte da an die CSS-Eigenschaft
scale(odertransform: scale3d()).Ja, aber wenn Du die mit einer Verschiebung und Rotation kombinierst, musst du entsprechend immer alles notieren.
Nicht, wenn man nicht transform verwendet, sondern translate, rotate und scale (die CSS-Eigenschaften, nicht die CSS-Funktionen).
🖖 Живіть довго і процвітайте
Hallo Matthias,
Ja, aber wenn Du die mit einer Verschiebung und Rotation kombinierst, musst du entsprechend immer alles notieren.
Nein. Wenn das Host-Element, auf dem das Shadow-DOM sitzt (oder in das Du die Würfel-Flächen einpackst) den transform-style preserve-3d verwendet, transformierst Du nur den Container und der Rest folgt.
D.h. du transformierst die Würfelflächen relativ zum Containerelement und du gibst ihnen auch die Größe des Container-Elements. Danach sind sie responsiv.
Rolf