Artikel zum Schlagwort "css"

19. Januar 2012 / 1 Kommentar

[CSS3] Pseudo-Spielchen

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 uns CSS3 bietet, erst richtig spannend. Jeder von uns, so hoffe ich zumindest, kennt die Pseudoklasse :hover. Auch :active oder :visited dürften dem ein oder anderem bekannt sein. Aber wie steht’s mit :first-letter, :before oder :after?

Neugierig?

Weiterlesen →

26. Oktober 2011 / Keine Kommentare

[CSS3] Spielereien mit "transform"

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 nennen soll), den wir als Button verwenden können.

So wird unser Endergebnis aussehen. CSS pur, keinerlei Bilddateien…

Was werden wir machen? Wir legen sechs gleich große Quadrate übereinander. Das erste bleibt unverändert; das zweite drehen wir um 15 Grad, das dritte um 30 Grad und so weiter. So erhalten wir mit sechs Quadraten einen vollständigen Stern. Darüber werden wir einen weiteren Stern legen, wiederum bestehend aus sechs Quadraten. Beschriftung, Animation und Schatten hinzugefügt und fertig ist der Sternen-Button.

Habt ihr Lust? Dann mal los.

Weiterlesen →

18. Oktober 2011 / Keine Kommentare

[CSS3] Transformieren Teil 2 mit "translate" und "skew"

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).

Weiterlesen →

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 →

23. August 2011 / 1 Kommentar

[olivergast.de] Design Version 2

Nachdem das bisherige Design meiner Internetseite nun etwa 1 Jahr auf dem Buckel hat, dachte ich mir es ist mal wieder Zeit für einen Tapetenwechsel. Ab heute ist das neue Design am Start; ich hoffe es gefällt euch.

Was hat sich geändert?

Die neue dunklere Farbgebung sticht sicher sofort ins Auge, wenn ihr schon mal hier wart. Bisher waren helle Grau- und Blautöne dominierend, nun sind eher dunkle Grau-Töne federführend. Die Inhaltsbereiche sind leicht transparent, so dass der Hintergrund mit radialem Farbverlauf zu erkennen ist. Das neue Layout basiert komplett auf CSS-Code und kommt ohne Bilddateien aus.

Als Standard-Schriftart habe ich mich für den Google Web Font „Open Sans“ entschieden, welcher „Verdana“ ablöst. Die Schriftgröße habe ich der Lesbarkeit halber von 11 auf 13 Pixel erhöht.

Der Kopfbereich mit Navigation und Suche ist nun fixiert, sprich er wandert beim Scrollen mit und bleibt ständig im Bild.

Auf die bisher reichlich eingesetzten Box- und Text-Schatten habe ich weitestgehend verzichtet, da diese bei einem dunklen Hintergrund nicht wirklich zur Geltung kommen würden. Auch Hintergrundfarbverläufe gibt es weniger, um das transparente Design hervorzuheben.

Der Newsticker musste erstmal weichen. Vielleicht baue ich ihn später nochmal ein.

Die Besucherauswertung per Google Analytics zeigt mir, dass die überwiegende Zahl der Besucher mit einem modernen CSS3-fähigen Browser unterwegs ist und nur ein verschwindend geringer Anteil mit dem Internet Explorer 8 oder älteren Versionen. Insofern habe ich mir Design-Anpassungen für die Microsoft-Browser größtenteils gespart, wobei ich zugeben muss, dass ich auch bisher eher weniger Wert darauf gelegt habe. Die Seite funktioniert aber ohne Probleme mit dem Internet Explorer 8, soweit ich das testen konnte.

Im Vergleich

Design Version 1

Design Version 2

Und? Gefällt’s dir?

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 →