Artikel zum Schlagwort "html"

22. Mai 2012 / 1 Kommentar

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

19. Mai 2012 / Keine Kommentare

[WordPress] Mehrere Sidebars nutzen

WordPress bietet nun schon seit einiger Zeit die Möglichkeit sogenannte Sidebars zu nutzen. In die Sidebar können dann Widgets gelegt werden, die die Webseite interessanter machen. WordPress bietet hier eine ganze Reihe von bereits vorbereiteten Widgets, die im Widgetbereich des Themes per Drag and Drop in die Sidebar geschoben werden können. So können auf einfache Art und Weise die letzten Kommentare, die Schlagwörter, Links und vieles mehr angezeigt werden, ohne dass eine Anpassung am Theme notwendig ist.

In manchen Themes kann der Einsatz von mehr als einer Sidebar sinnvoll sein. Besonders wer viele Widgets nutzt, schafft so mehr Übersicht und kann die Widgets gruppieren. Mit WordPress ist dies relativ einfach zu realisieren.

In diesem Tutorial zeige ich, wie ihr zwei Sidebars in euer Theme einbindet.

Weiterlesen →

9. Mai 2012 / 1 Kommentar

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

23. April 2012 / 1 Kommentar

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

18. April 2012 / 4 Kommentare

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

12. April 2012 / Keine Kommentare

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

[css]#absatz {
color: #fff;
}

#absatz:target {
color: #000;
}[/css]

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:

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

Klar soweit?

Weiterlesen →

6. April 2012 / Keine Kommentare

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

22. Februar 2012 / Keine Kommentare

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

5. Februar 2012 / Keine Kommentare

[CSS3] Mach dir deine eigenen Tooltips

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 darüber fahren und dort kurze Zeit verweilen. Nun gibt es unendliche Möglichkeiten das Aussehen eines Hyperlinks zu ändern; das Aussehen eines Tooltips ist im Betriebssystem verankert und kann nicht verändert werden.

Es kann nicht verändert werden? Was soll dann dieser Artikel? Nun, da das Design eines Tooltips nicht verändert werden kann, müssen wir ihn abschalten und ersetzen. Wie gefällt euch diese Lösung:

Anhand eines horizontal ausgerichteten Menüs zeige ich Schritt für Schritt den Weg zu individuell gestalteten Tooltips. Wir nutzen dazu insbesondere die Pseudoelemente :before und :after sowie allerhand CSS3-Kram, wie box-shadow, border-radius und transform.

Weiterlesen →

20. Januar 2012 / 1 Kommentar

Kreiert euren eigenen Button und teilt diesen mit anderen

Darf ich euch mal kurz an diesen Artikel erinnern? Da habe ich ausführlich beschrieben, wie ihr einen hippen Button per CSS-Code erstellt. Nun bin ich vor kurzem auf ein Projekt gestoßen, in dem ihr dies auf einfache Art und Weise mit allen erdenklichen Optionen komfortabel tun könnt. Das Projekt hat den klangvollen Namen CSS Button. Es ist derzeit noch in der Beta-Phase, läuft aber, soweit ich das bisher ausprobieren konnte, ohne Probleme.

Und nachdem ihr einen feschen Button zusammengeschustert habt, könnt ihr diesen mit anderen teilen. So bekommt ihr Ruhm und Ehre und andere euren Button…

Weiterlesen →