Artikelarchiv für das Schlagwort "demo"

[WordPress] Theme „DREI“ steht bereit

Ihr habt Lust auf ein neues WordPress-Theme? Wie wär’s hiermit: ‚DREI‘ ist ein drei-spaltiges, schlicht gehaltenes Theme. Wenn es dir gefällt, darfst du es dir gerne herunterladen und verwenden. Natürlich kostenlos.

Highlights:

  • Layout ist komplett CSS-basiert (keine Grafiken)
  • Cross-Browser kompatibel (Chrome, Firefox, Internet Explorer 9, Android und iOS 5 getestet)
  • responsives Layout (CSS3 media queries) angepasst für Tablets (bis 1200px) und Smartphones (bis 640px)
  • Post-Thumbnail-Funktion integriert
  • vorbereitetes Gästebuch-Template
  • zwei widgetfähige Sidebars (rechts und links vom Inhaltsbereich)

Willst du vorher erst einmal ausprobieren, gibt’s es eine Live-Demo zum ausgiebigen testen:

und hier den Download:

Du darfst das Theme uneingeschränkt privat und kommerziell nutzen und beliebig weitergeben, was mich sehr freuen würde.

Bei Fragen, Anregungen, gefundenen Fehlern oder wenn du mir nur mal die Meinung geigen willst (zum Theme), nutz bitte die Kommentarfunktion dieses Artikels.

Danke sehr.

Weiterlesen →

[WordPress] Mein neues Theme ‚ZWEI‘

Gefällt dir das aktuelle Design meiner Webseite? Basis dafür war mein neues WordPress-Theme ‚ZWEI‘. Wenn dir das Layout gefällt, kannst du dir das Theme gerne herunterladen und verwenden. Natürlich kostenlos.

Highlights:

  • Layout ist komplett CSS-basiert (keine Grafiken)
  • Cross-Browser kompatibel (Chrome, Firefox, Internet Explorer 9, Android und iOS 5 getestet)
  • responsives Layout (CSS3 media queries) angepasst für Tablets (bis 1024px) und Smartphones (bis 480px)
  • Post-Thumbnail-Funktion integriert
  • vorbereitetes Gästebuch-Template

Willst du vorher erst einmal ausprobieren, gibt’s es eine Live-Demo zum ausgiebigen testen:

und hier den Download:

Du darfst das Theme uneingeschränkt privat und kommerziell nutzen und beliebig weitergeben, was mich sehr freuen würde.

Bei Fragen, Anregungen, gefundenen Fehlern oder wenn du mir nur mal die Meinung geigen willst (zum Theme), nutz bitte die Kommentarfunktion dieses Artikels.

Danke sehr.

Weiterlesen →

[WordPress] ‚EINS‘ – Mein erstes WordPress-Theme

Nun ist es endlich vollbracht: mein erstes WordPress-Theme. Nach monatelanger Arbeit, zahlreichen schlaflosen Nächten (und Tagen) sowie ausgiebigen Tests kann ich nun endlich mein Debüt als Theme-Designer feiern.

Darf ich vorstellen: ‚EINS‘ – mein erstes deutschsprachiges WordPress-Theme:

Highlights:

  • Layout ist komplett CSS-basiert (keine Grafiken)
  • Cross-Browser kompatibel (Chrome, Firefox, Internet Explorer 9, Android und iOS 5 getestet)
  • responsives Layout (CSS3 media queries) angepasst für Tablets (bis 1024px) und Smartphones (bis 480px)
  • Post-Thumbnail-Funktion integriert
  • vorbereitetes Gästebuch-Template

Hier gibt’s die Live-Demo zum ausgiebigen testen:

und hier den Download:

Weiterlesen →

[CSS3] Ein horizontales Dropdown-Menü erstellen

Ich habe mir schon lange vorgenommen mal ein Tutorial für ein horizontales Dropdown-Menü zu erstellen. Und da ich gerade mal wieder ein wenig Zeit und Lust hatte, habe ich mal hingesetzt und ein wenig ausprobiert.

Das ist dabei rausgekommen:

Wenn ihr ebenfalls etwas Zeit und Lust mitbringt, zeige ich in diesem Tutorial, wie ihr ein schickes horizontales Dropdown-Menü erstellt. Das Menü wird, mit Ausnahme der Hauptmenü-Icons, CSS-only, wir verwenden also keine Bilddateien.

Weiterlesen →

[CSS3] Die Pseudo-Klasse :target im Detail

Ich habe vor kurzem in diesem Artikel einige Pseudo-Elemente vorgestellt und auch Beispiele für den praktischen Einsatz aufgezeigt. Ein Element habe ich dabei bewusst ausgelassen, da es sich definitiv lohnt, es genauer vorzustellen: die Pseudo-Klasse :target.

Wie der Name schon verrät (target (englisch) = Ziel), wird die Klasse aktiv, wenn das dazugehörige Element aufgerufen oder Ziel einer Aktion ist. Mittels :target können bestimmte Elemente oder Bereiche auf der Webseite angesprochen und formatiert werden.

So lässt sich beispielsweise die Schriftfarbe ändern, wenn das entsprechende Element aufgerufen wird. Die simple Style-Deklaration dafür wäre wie folgt:

#absatz {
color: #fff;
}

#absatz:target {
color: #000;
}

Stellt sich nur die Frage, wie die ID absatz als Ziel aufgerufen werden kann. Vielleicht ist bekannt, dass IDs als Ankerpunkt genutzt werden können. Beispielsweise kann ich mit dem Link

http://www.olivergast.de/gb/#comments

direkt zum Kommentarformular des Gästebuchs springen, ohne das Gästebuch aufrufen und zum Kommentarformular scrollen zu müssen.

Und so können wir im obigen Beispiel durch einen direkten Link auf das Element dessen Schriftfarbe ändern:

<a class="button" href="http://www.einbeispiel.de/seite/#absatz">Schriftfarbe ändern</a>

Klar soweit?

Weiterlesen →

[CSS3] WordPress-Banner mit Pseudoelementen

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 werden könnte. Also habe ich mich mal hingesetzt und dabei kam dann das hier raus:

Habt ihr Lust das Banner nachzubauen?

Weiterlesen →

[CSS3] Slideshow mit „keyframes“

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 Besuchers auf einen bestimmten Bereich zu lenken.

Wie wäre es mit einer Slideshow? In diesem Tutorial zeige ich, wie ihr vier Artikel in einer Endlosschleife animiert für eure Besucher präsentiert?

Vorschau gefällig?

Weiterlesen →

[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 →

[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 →

[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 →