Rudolph the red nosed reindeer

Hampelmann CSS Animation von Rudi

In diesem Pen kannst du dir ansehen, wie du aus einer einfachen PNG-Datei einen Rudi im Hampelmann-Style erstellen kannst. Verwendet werden lediglich einfaches HTML, CSS und eine PNG-Datei. Die Körperteile von Rudi werden mit der Hintergrund Clipping-Funktion (background-position) aus dem Bild ausgeschnitten bzw. maskiert.

Bei den Animationen handelt es sich um so genannte Keyframe Animationen.

See the Pen Rudolph the red nosed reindeer by Norbert Mesch (@itsnorbat) on CodePen.


rudi-the-rednosed-reindeer-separated

Das Bild mit den einzelnen Teilen der Figur kannst du dir in voller Auflösung herunterladen, indem du auf das kleine Vorschaubild rechts klickst.

Bilderrätsel für den Webbrowser

Das Bilderrätsel kannst du spielen indem du auf das Bild klickst oder als zip-Datei herunterladen und für nicht kommerzielle Zwecke auf deiner Website mit deinen eigenen Bilder veröffentlichen.

bilderraetsel

Demo auf YouTube

In diesem YouTube-Video kannst du dir das Spiel mit zwei Durchläufen ansehen.

Ändern der Bilder

filestructure-imgZum Ändern der Bilder speicherst du deine Bilder mit einer Auflösung von 200 x 200 px. Die sechs Bilder benennst du mit den Dateinamen in csn01.png bis csn06.png um und kopierst du sie in den Unterordner img. Die alten Bilder kannst du entweder vorher löschen oder beim kopieren einfach überschreiben.
Wenn du die Rückseite der Karten ändern möchtest, ersetzt du einfach im Verzeichnis img die Datei bg_fotomemo.png durch eine Datei deiner Wahl mit der Auflösung 200 x 200 px.

Anpassen der Farben

filestructureWenn du die Farben deines Spiels verändern möchtest benötigst du nur wenige CSS-Kenntnisse. Öffne hierzu die Datei style.css aus den Wurzelverzeichnis und nehme die Änderungen deiner Wahl vor.

Du kannst zum Beispiel den Spielhintergrund im body-Tag über das Attribut background ändern.

body{
 background:#080808;
 font-family: 'Quicksand', sans-serif;
 }

Hier wird die Hintergrundfarbe in einen Rot-Ton geändert.

body{
 background:#850404;
 font-family: 'Quicksand', sans-serif;
 }

MagicNumbers

MagicNumbers ist ein Kartenspiel mit dem du durchaus einige Menschen beeindrucken kannst. Es basiert auf der binären Darstellung der Zahlen 1 bis 31. Für die Darstellung der Zahlen (0)1-31 benötigst du im dualen oder binären Zahlensystem 5 Bits (25 = 32). Die Anzahl der Bits ist gleich der Anzahl der daraus resultierenden Karten, also hier fünf. Das Spiel kann so mit einer anderen Anzahl Bits auch für einen größeren oder kleineren Zahlenraum erstellt werden. In der folgenden Prezi zeige ich dir wie das Spiel funktioniert.

Das Spiel Magic Mind aus meinem Artikel Anzeige mobiler WebApps in WordPress basiert auf dem gleichen Prinzip. Hier erfolgt die Auswertung aber nicht durch einen Spielleiter, sondern automatisch durch ein Programm und anstatt der Zahlen werden Bilder verwendet. Das Spielalgorithmus ist identisch.


Automatisch im Browser abspielen

oder auf meinem YouTube-Kanal ansehen: MagicNumbers auf YouTube


 

MagicNumbers Karten zum drucken

Wenn du auf das Bild klickst kannst du dir eine PDF-Datei herunterladen, die Karten auf Karton drucken, ausscheiden und eine Menge Menschen sprachlos machen.

Magic Numbers Download
Magic Numbers Download

Die Druckvorlage ist für den privaten Gebrauch bestimmt. Eine kommerzielle Verwendung bedarf meiner schriftlichen Genehmigung.

Sway – Color key Tutorial

In diesem Tutorial kannst du dir ansehen, wie du einfache Color key Bilder mit Hilfe einer Bildbearbeitung erstellen kannst.

Die Anleitung wurde in Microsofts Office Sway Anwendung erstellt. Mit Sway kannst du Texte und andere Medienobjekte mit einfachen Mitteln zu einer ansprechenden Onlinepräsentation erstellen. Office Sway ist durchaus eine Alternative zu Prezi, Powerpoint oder Keynote.