Archiv für die Kategorie Webdesign

[CSS3] WordPress-Banner mit Pseudoelementen

6. April 2012 / 5.539 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.433 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] Mach dir deine eigenen Tooltips

5. Februar 2012 / 7.268 Aufrufe / keine Antwort bisher

Jeder kennt sie, jeder mag sie. Sagen sie uns doch, was hinter eine Link zum Vorschein kommen wird oder welche Bedeutung ein Bild hat: Tooltips. Tooltips zeigen definierte Attribute eines Hyperlinks, eines Bildes etc. an, wenn wir mit der Maus
Weiterlesen

[CSS3] Pseudo-Spielchen

19. Januar 2012 / 5.323 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.696 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.750 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.371 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.210 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.258 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