Nachdem ich mal wieder ein wenig Zeit gefunden habe, gibt es hier nun wie versprochen eine optisch aufgepeppte Variante meiner Lightbox-Bildergalerie. Folgende Ergänzungen gibt es im Vergleich zur ursprünglichen Version:
:before und :after) sowieUnd so sieht’s aus:
Hier findest du eine Live-Demo der Bildergalerie:
und hier die Galerie als Download zu deiner freien Verfügung:
Viel Spass damit.
Ich habe mir Anfang November hier den Raspberry Pi inklusive passendem Case für etwa 45 € bestellt. Vor ein paar Tagen lag er dann endlich in meinem Briefkasten.
Den Raspberry Pi habe ich mir vor allem deshalb gekauft, da ich ihn neben meinem Apple TV 2 als weiteren XBMC-Client nutzen möchte. Ich habe zwar ein Apple TV 3, aber mittlerweile habe ich die Hoffnung aufgegeben, dass es dafür irgendwann mal einen Jailbreak und damit die Möglichkeit XBMC darauf zu installieren, geben wird. Insofern musste eine andere Lösung her. Der MK802 mit XBMC scheidet aufgrund fehlender Hardwaredekodierung weiterhin aus und so bin ich auf den Raspberry Pi aufmerksam geworden.
Die Ausstattung ist ganz ordentlich für den Preis: 700 MHz Arm-Prozessor, 512 MB RAM und alle nötigen Anschlüsse, wie 2 x USB, Ethernet, HDMI mit bis zu 1080p-Ausgabe sowie Ausgänge für Audio und Video.
In diesem Artikel berichte ich von meinen ersten Erfahrungen und beschreibe, wie aus dem Raspberry ein vorzüglicher XBMC-Client mit AirPlay-Funktionalität wird.
Bei meinen Web-Projekten greife ich gerne und oft auf Google Web Fonts zurück. Mittlerweile stehen mehr als 550 Schriften im Verzeichnis zur Verfügung. Und es werden immer mehr.
Um das Prinzip dahinter kurz zu erklären: die Schriftdateien für die Google Web Fonts liegen auf einem Google-Server. Wenn nun ein Besucher eine Webseite mit integrierten Google Web Fonts lädt, wird automatisch im Hintergrund die entsprechende Schriftdatei vom Google Server geladen. Das macht Google Webfonts unabhängig von Betriebssystem oder Browser.
Ich stelle euch in diesem Artikel meine Lieblings-Fonts vor und zeige, wie ihr diese in eure Webseite einbindet.
Vor einiger Zeit habe ich in in diesem Artikel eine Bildergalerie vorgestellt, die Bilder bei Mouseover vergrößert. Was mit Desktopbrowsern prima funktioniert, ist auf mobilen Browsern eher suboptimal und verlangt nach einer besseren Lösung.
Da könnte ich folgendes anbieten: mittels des Checkbox-Hacks werden Bilder per Mauskilck vergrößert und bei erneutem Mausklick wieder verkleinert. Perfekt zum “touchen” aber auch für Desktop-Browser eine tolle Sache. Und das alles per minimalistischem CSS-Code.
Und neugierig geworden? So wird unsere fertige Galerie später aussehen:
Um auch optisch zu überzeugen, garnieren wir das Ganze noch mit einigen CSS3-Spielereien. Ihr wisst ja, dafür bin ich immer zu haben.
Dann legen wir mal los.
Ist dir mein Weihnachtsgruß oben links schon aufgefallen? Nett von mir, oder? Und das sogar multilingual.
Willst du wissen wie das funktioniert und hast du Lust das Banner nachzubauen? Prima, dann mal los.
Das Zauberwort heißt keyframe-Animationen. Diese waren bis vor kurzem noch Webkit-Browsern und Mozilla Firefox vorbehalten, mit den neuesten Browser-Versionen hat nun aber auch Microsoft und Opera nachgezogen. Somit steht dem Einsatz von selbstablaufenden Animationen nichts mehr im Wege.
In einigen meiner Themes verwende ich für die Darstellung des Navigationsmenüs bei geringen Bildschirmauflösungen (Stichwort: Media Queries) ein Flyout-Menü, welches auf Knopfdruck aus- und auch wieder einfährt. So beispielsweise in meinem neuen Theme ‘NEUN’:
In diesem Artikel beschreibe ich Schritt für Schritt, wie eine Lösung für ein ausfahrbares Menü aussehen könnte. Wir verwenden dazu lediglich CSS3-Funktionen, kein Javascript oder ähnliches. Wie sieht’s aus, Lust?
Schon mal etwas vom Checkbox Hack gehört? Der Checkbox-Hack ist ziemlich simpel: eine Checkbox (zu deutsch ein Kontrollkästchen) wird zweckentfremdet und über dessen Status (angehakt oder nicht angehakt) ein Element unterschiedlich definiert.
Damit lassen sich viele tolle Sachen machen. Wie wäre es zum Beispiel mit einem Bereich, der erst dann eingeblendet wird, wenn ihr auf einen Button klickt? Das lässt sich prima für Frage-/Antwort-Bereiche nutzen. Im Standard (Kontrollkästchen ist nicht angehakt) ist nur die Frage zu sehen und der Antwort-Bereich ausgeblendet. Wird das Kontrollkästchen aktiv (Kontrollkästchen wird angehakt) wird der Antwortbereich eingeblendet. Wenn das Kontrollkästchen wieder inaktiv wird, blendet sich der Bereich wieder aus.
Interessante Sache, oder?
Wer jetzt an das hier denkt:
sollte sich vom Aussehen eines Kontrollkästchens verabschieden, da wir das eigentliche Kästchen nicht brauchen und ausblenden werden. Wir benötigen lediglich das Label und, wie bereits beschrieben, den Status der Checkbox.
Um das Ergebnis dieses Tutorials gleich vorwegzunehmen: wir werden dies hier erstellen:
Und los geht’s.
Ja, XBMC ist schon ein tolles Ding und bietet so ziemlich alles, was man zum Verwalten und Abspielen von Medien im heimischen Mediennetzwerk benötigt. Und mittlerweile gibt es Clients auch für so ziemlich alle wichtigen Plattformen, wie Windows, iOS, MacOS, Linux und Android, wobei sich die Entwicklung für Android noch im Alpha-Stadium befindet und es noch keine offiziellen Testversionen gibt. Inoffiziell aber findet man zum Beispiel hier sogenannte Nightly-Builds für viele Android-Geräte, wie beispielsweise für den MK802.
XBMC hält zwei sehr nette und nützliche Funktionen bereit, die sich in den Weiten der zahlreichen Einstellungen verbergen und die der Ein oder Andere vielleicht noch nicht kennt: ein laufendes XBMC kann als Empfänger von AirPlay- oder UPnP-Inhalten genutzt werden.
Ich zeige in diesem Artikel, wie die Funktion aktiviert wird und mit welcher Hard- und Software sie sinnvoll genutzt werden kann.