Artikel zum Schlagwort "demo"

14. Oktober 2011 / Keine Kommentare

[CSS3] Mehrere Hintergrundbilder (multiple backgrounds) nutzen

Ich habe in diesem Artikel einen Trick gezeigt, wie ihr für eure Webseite mehrere Hintergrundbilder nutzen könnt. Mit dem Einzug von CSS3 gibt es aber eine einfachere Möglichkeit. So können nun jedem Block-Element mehrere Background-Images zugeordnet werden. Dies beschränkt sich nicht nur auf Bilddateien, sondern es können auch Hintergrundfarbverläufe (background-gradients) genutzt werden.

Weiterlesen →

1. September 2011 / Keine Kommentare

[CSS3] Eine animierte HTTP-Fehler-404 Seite

Habt ihr schon meine HTTP-Fehler-404 Seite gesehen? Ich hoffe nicht… Bisher habe ich eine WordPress 404-Fehlerseite genutzt, um die Besucher über einen nicht mehr funktionierenden Link zu informieren. Nun habe ich dafür eine separate HTML-Seite, losgelöst vom WordPress-Theme, angelegt. Und da kam mir der Gedanke, dass sich daraus doch ein schönes Tutorial zaubern lässt. Gesagt, getan: ich zeige hier Schritt für Schritt den Aufbau und die Einrichtung meiner animierten HTTP-Fehler-404 Seite.

Wer vorab schon mal einen Blick auf meine 404-Seite wagen möchte, klickt hier. Die Seite ist per „keyframes“ animiert und verwendet eine Retro-Schriftart.

Es sei allerdings gleich erwähnt, dass die Animationen nur zu sehen bekommt, wer entweder den Firefox ab Version 5 oder einen Webkit-Browser verwendet.

Weiterlesen →

19. August 2011 / Keine Kommentare

[CSS3] Spiegeln mit "box-reflect"

In diesem Artikel habe ich gezeigt, wie mittels des Grafikallrounders Gimp Bilder und Texte gespiegelt werden können. Wer gespiegelte Bilder im Webdesign oder als Webinhalt einsetzen möchte, kann sich diesen Umweg zukünftig sparen, denn Webkit-Browser können mittels „box-reflect“ ebenfalls Bilder spiegeln. Wir wollen uns den Befehl etwas genauer anschauen.

Weiterlesen →

15. Juli 2011 / Keine Kommentare

[CSS3] Ein animiertes Bluray-Logo mit "keyframes"

Ich persönlich mag Animationen auf Internetseiten, wie ihr sicher an meiner Webseite schon bemerkt habt. Sie bringen Schwung und Bewegung in die sonst leblosen Inhalte. Aber wie erstellt man Animationen? Schon von „keyframes“ gehört?

Immer mehr Browser unterstützen die Möglichkeit mit CSS-Code Animationen zu erstellen. Aktuell bieten Google Chrome ab Version 11, Apple Safari ab Version 4 und Mozilla Firefox ab Version 5 Unterstützung für „keyframes“, jedoch nur mit browserspezifischen Präfixen: Chrome und Safari -webkit- und Firefox -moz-.

In diesem Artikel habe ich „keyframes“ bereits vorgestellt und einige Beispiele gezeigt. Nachdem ich über diesen Artikel gestolpert bin, wollte ich etwas ähnliches nachbauen. Und da ich riesiger Filmfan bin, kam mir die Idee ein animiertes Bluray-Logo zu erstellen. Interessiert?

Okay. Dann mal los.

Weiterlesen →

27. Mai 2011 / Keine Kommentare

[CSS3] Ein Timer mit "keyframes"

Mit „keyframes“ lassen sich tolle Sachen machen. Die Funktionsweise sowie einige Beispiele habe ich in diesem Artikel demonstriert. So habt ihr unter anderem die Möglichkeit den Hintergrund in einer bestimmten Zeitspanne in festgelegten Schritten zu verschieben. Und so kam mir die Idee einen Timer zu erstellen und mit „keyframes“ zu animieren.

Der fertige Timer, der die Sekunden bis zu einer Minute hochzählt, sieht dann so aus

Interessiert?

Weiterlesen →

18. Mai 2011 / Keine Kommentare

[CSS3] Animationen mit "keyframes"

Hier kommt etwas für die Animationsfreunde unter euch. Mit dem CSS3-Befehl „keyframes“ steht euch ein mächtiges Werkzeug zur Seite, mit dem ihr anspruchsvolle und umfangreiche Animationen erstellen könnt. Aber gleich der Tritt auf die Spaßbremse: funktioniert aktuell nur mit Webkit-Browsern ala Google Chrome oder Apple Safari.

In diesem Artikel habe ich die CSS3-Eigenschaft „transition“ vorgestellt, mit der HTML-Elemente animiert werden können. Das funktioniert jedoch nur im Zusammenspiel mit Pseudo-Elementen, wie beispielsweise :hover oder :active, und die Möglichkeiten sind doch sehr begrenzt. Mit „keyframes“ erstellt ihr selbstablaufende Animationen mit fast unzähligen Möglichkeiten.

Weiterlesen →

9. Mai 2011 / Keine Kommentare

[CSS3] Einen animierten Button erstellen

Vor einiger Zeit habe ich in diesem Artikel beschrieben, wie ihr einen feschen Button mit CSS-Code erstellt. Vielleicht sind euch die Buttons auf meiner Webseite schon aufgefallen. Auch diese basieren komplett auf CSS-Code. Wenn ihr mit der Maus über den Button fahrt, wird eine Grafik eingeblendet und der Text des Buttons verschiebt sich. Auf besonderen Wunsch hier ein kurzes Tutorial.

Der „Trick“ besteht darin, den Hintergrund zu verschieben und mittels des CSS3-Befehls transition zu animieren. Die Grafik, die als Hintergrund eingebunden ist, ist zunächst außerhalb des sichtbaren Bereichs, bei :hover wird diese dann in den Button verschoben. Der Button-Text ist zunächst mittig angeordnet und wird bei :hover links oder rechts ausgerichtet, je nachdem an welcher Seite das Bild eingeblendet wird.

So sieht der fertige Button dann aus

Dies funktioniert mit dem Internet Explorer 9 nicht vollständig, da dieser weder Hintergrundfarbverläufe mit Hintergrundbild noch Animationen darstellen kann.

Seid ihr bereit? Los geht’s.

Weiterlesen →

6. Mai 2011 / 3 Kommentare

[CSS3] Bildergalerie erstellen

Auf der Suche nach einer Bildergalerie für deine Webseite? Dann hab ich hier vielleicht das was du suchst. Ich zeige hier Schritt für Schritt, wie ihr eine ansprechende Bildergalerie mit jeder Menge CSS3-Schnickschnack erstellen könnt. So werden wir folgende CSS3-Eigenschaften nutzen:

Habt ihr Lust?

Weiterlesen →

26. April 2011 / Keine Kommentare

[CSS3] Schatten mit "text-shadow" und "box-shadow"

Wie der Name schon vermuten lässt, versieht die Eigenschaft „text-shadow“ Text mit einem Schlagschatten, „box-shadow“ dagegen, stellt Blockelemente mit einem Schlagschatten dar. Mit diesen neuen CSS3-Eigenschaften lassen sich viele lustige Dinge darstellen. Aber seht selbst…

Weiterlesen →

10. April 2011 / Keine Kommentare

[CSS3] Runde Ecken mit "border-radius"

Wollte man bisher Block-Elemente abrunden, musste man entweder zu Javascript greifen oder per background-Eigenschaft eine Bilddatei einbinden. Mit CSS3 kann man sich dieses Gewurschtel sparen und auf die Eigenschaft „border-radius“ zurückgreifen. Die Möglichkeiten sind vielfältig, sogar Kreise sind mit entsprechendem Code darstellbar. Aber dazu später mehr.

Ich persönliche mag abgerundete Ecken. Es sieht einfach modern und „rund“ aus. Ha ha! Wortwitz verstanden?

Weiterlesen →