Archiv für das Schlagwort demo

[CSS3] WordPress-Banner mit Pseudoelementen

6. April 2012 / 5.496 Aufrufe / keine Antwort bisher

Ich habe vor kurzem auf einer Webseite ein hängendes Werbebanner mit verschieden angeordneten Buchstaben gesehen, welches als Bilddatei eingebunden wurde. Sah klasse aus und da habe ich mir gedacht, dass das auch per CSS3 – gänzlich ohne Grafikdateien – umgesetzt
Weiterlesen

[CSS3] Slideshow mit „keyframes“

22. Februar 2012 / 7.374 Aufrufe / keine Antwort bisher

Interessante Inhalte der eigenen Webseite auf interessante Art und Weise zu präsentieren ist wohl das Ziel eines jeden Webseitenbetreibers. Dem Besucher stechen dabei bewegte Bilder und Animationen natürlich besonders ins Auge. Mit keyframe-Animationen gibt es unzählige Möglichkeiten das Interesse des
Weiterlesen

[CSS3] Pseudo-Spielchen

19. Januar 2012 / 5.290 Aufrufe / 2 Antworten

Genau genommen ist die Überschrift nicht ganz korrekt. Es geht es hier nicht in erster Linie um CSS3, denn viele der Pseudoelemente bzw. -klassen gab es schon mit CSS2 oder früher. Dennoch wird es im Zusammenspiel mit den Möglichkeiten, die
Weiterlesen

[CSS3] Spielereien mit „transform“

26. Oktober 2011 / 7.640 Aufrufe / 1 Antwort

Es ist schon beeindruckend welche Möglichkeiten CSS3 bietet. Wo wir früher ein Grafikprogramm bemühen mussten, können wir das gleiche Ergebnis heute mit reinem CSS Code erzeugen. Wie wäre es beispielsweise mit einen animierten Stern (keine Ahnung, wie man das Ding sonst
Weiterlesen

[CSS3] Transformieren Teil 2 mit „translate“ und „skew“

18. Oktober 2011 / 3.727 Aufrufe / 1 Antwort

Transformieren mittels „transform“ geht weiter. Im ersten Teil habe ich gezeigt, wie Objekte skaliert („scale“) und gedreht („rotate“) werden können. „Transform“ bietet aber noch mehr. Zeit für Teil 2 mit den Hauptdarstellern „translate“ (verschieben von Objekten) und „skew“ (verzerren von Objekten).

[CSS3] Eine animierte HTTP-Fehler-404 Seite

1. September 2011 / 7.332 Aufrufe / keine Antwort bisher

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
Weiterlesen

[CSS3] Spiegeln mit „box-reflect“

19. August 2011 / 11.111 Aufrufe / 1 Antwort

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
Weiterlesen

[CSS3] Ein Timer mit „keyframes“

27. Mai 2011 / 7.170 Aufrufe / 1 Antwort

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
Weiterlesen

[CSS3] Animationen mit „keyframes“

18. Mai 2011 / 15.773 Aufrufe / 2 Antworten

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
Weiterlesen

[CSS3] Einen animierten Button erstellen

9. Mai 2011 / 6.295 Aufrufe / 2 Antworten

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
Weiterlesen