Bessere Blogübersicht dank Flexbox

4 Möglichkeiten um Blogbeiträge in WordPress als Grid oder im Masonry-Style auszugeben

Ich habe vor einigen Wochen meinem privaten Weblog ein neues Theme spendiert. Dabei ist mir wiederholt aufgefallen, dass die neuen Themes einen kleinen Nachteil haben. Durch die sehr großen Bilder und Überschriften, durch die größeren Schriften im allgemeinen und durch mehr Weißraum hat man zwar einerseits ein häufig besseres Leseerlebnis. Das ist meiner Meinung nach bei der Einzelansicht des Artikel sinnvoll.

Anderseits leidet aber die Übersicht der Archive und der Startseite dadurch. Während ich in der Einzelansicht des Artikels gezielt reinkomme, weil ich den besagten Blogartikel lesen möchte und daher von mehr Freizügigkeit profitieren kann, so dienen die Übersichtsseiten – also die verschiedenen Archivseiten und die Startseite – wie der Name schon sagt der Übersicht. Aber die Übersicht leidet, wenn man dann häufig auf solchen Übersichtseiten kaum mehr als einen Blogartikel pro Bildschirmhöhe sieht.

Weiter …

WWP Folge 9: WordPress-Statistiken, CSS3: text-align-last und Grids

Datei herunterladen (mp3, 8:33 Minuten, 8,3 MB)

Um folgende Themen geht es in der 9. Folge:

Folge 9: CSS3-Eigenschaft text-align-last, Can i Use, CSS-Grid-Beispiel und Diagramme mit WP-Statistiken

Mit Hilfe der CSS-Eigenschaft text-align, die es seit CSS Level 1, also seit den Anfangstagen von CSS gibt, kann man Textblöcke ausrichten: linksbündig, zentriert, rechtsbündig und als Blocksatz. Das dürfte den allermeisten von euch bekannt sein.

In CSS3 ist eine weitere Eigenschaft hinzu gekommen und mit text-align-last kannst du die letzte Zeile eines Textabsatzes beeinflussen. So könnte man z.B Absätze in der Sidebar mittels text-align: justify; ausrichten, also Blocksatz; und mit text-align-last: center; könnte man die letzte Zeile des jeweiligen Absatzes zentrieren.

Weiter …

hint.css – gestylte Tooltips nur mit CSS

Die hint.css eine kleine Tooltip-Bibliothek mit der man gestylte Tooltips umsetzen kann, die lediglich CSS und ein bisschen HTML benötigen: Man muss lediglich die CSS-Datei einbinden, entweder als separate Datei oder n dem man den Code in die bereits bestehende CSS-Datei reinkopiert. Anschließend kann man mit so Konstrukten… Ich bin ein <span class="hint hint–bottom" data-hint="Hallo">Tooltip</span>. … Weiter …

Amazon Kindle: die CSS-Fähigkeiten des neuen Dateiformats

Seit längerer Zeit existiert das neue Dateiformat für Kindle, dass eine Unterstützung für HTML5 und für CSS3 bietet. Ich habe bereits darüber berichtet. Seit dem 3.4er Update für Kindle Keyboard unterstützen alle relevanten Kindle-Geräte und auch die Apps, dass neue Format.

Daher habe ich mir gedacht, ich mache mal einen kleinen Test und schaue mal, wie sich das Testdokument in der Kindle-App für Android, dem Kindle Fire 1, dem Kindle Keyboard und dem Kindle Previewer (Vorschau-Software) macht. Das sind die Umgebungen auf denen ich auch sonst teste.

Hier der HTML-Code:

Weiter …

WordPress und CSS3: individuelles Navigationsmenü mit Fade-Effekt (Verzögerung) ausstatten

Ich habe im Mai diesen Jahres am Beispiel meiner Herr-der-Ringe- und Hobbit-Website erklärt, wie man WordPress als “klassisches” CMS verwenden kann. Dabei habe ich erklärt, wie man sich den Umgang mit vielen Seiten und Unterseiten erleichtern kann, wie man alternative Titel ausgibt und wie man aus der Hauptnavigation ein Dropdownmenü realisiert.

Beispiel eines Dropdownmenüs einer WordPress-Website

Da ich heute ein paar kleine Änderungen an der Navigation durchgeführt habe, gehe ich auf die Erstellung und die Einbindung solch einer Navigation noch einmal ausführlich ein.

Weiter …

Interessanter Vortrag zur Ladezeitoptimierung und jede Menge nützlicher HTML5- und CSS3-Links

Christian Schaefer hat einen interessanten Vortrag zum Thema Ladezeit-Optimierung von Websites online gestellt. Die Folien beinhalten viele wertvolle Informationen und hebt sich damit angenehm von vielen anderen Präsentationen. Kollege Jens Grochtdreis, von dem ich auch den Hinweis auf den oberen Vortrag bekommen habe, hat in einem Blogartikel 24 Quellen zu HTML5 und CSS3 aufgelistet: Referenzen, … Weiter …

Linkschleuder: CSS3-Generatoren, Bild zu data-URI, Inhaltsverzeichnis wie in einem Buch

Hier ein paar Lesezeichen, die sich in meinem Browser in den letzten Tagen aufgesammelt haben:

Auf CSS-Portal findet man mehrere Online-Generatoren, darunter unter anderem einen Generator für CSS-Layouts und einen Generator für Navigationsmenüs, die mit CSS3 umgesetzt wurden.

Bilder in Base64 konvertieren

Auf Image to data URI convertor kann man seine Bilder in Base64 codieren, das untere Bild welche ich aus diesem Artikel entnommen habe könnte ich entweder “klassischerweise” so einbinden:

<img src="browser-perun_net-juli-2012.png" width="500" height="244" title="" alt="" />

In Base64 codiert schaut das Ergebnis aber so aus:

Weiter …

Chico UI: komfortabel Funktionen für Websites nachrüsten

Chico UI ist eine Sammlung von Tools um recht einfach Funktionen für eine Website nachzurüsten. Du brauchst eine Dropdown-, Akkorden- oder Tab-Navigation? Dann findet du bei Chico UI erprobte Lösungen. Neben diesen Funktionen findest du hier auch u.a. einen Bilder-Slider, einen Kalender-Widget und eine CSS-Bibliothek. Bei der CSS-Bibliothek sind die gängigen HTML-Elemente gestylt, es sind … Weiter …

CSS-Links: einheitliche Sende-Buttons, Spritepad, Sprechblasen, Flexbox statt Float

Hier wieder mal ein paar interessante CSS-Links, die sich in miner Browser-Session angesammelt haben:

Björn Wibben liefert eine Lösung, wie man es schaffen kann das der Sende-Button eines Formulars in allen Browsern einheitlich zu gestalten. Lösung für ein sehr nerviges Problem.

Das Spritepad bietet eine sehr einfache Möglichkeit CSS-Sprites zu erstellen: einfach per Klicken und Ziehen die einzelnen Grafiken anordnen und anschließend den CSS-Code kopieren. Unter einem CSS-Sprite versteht man wenn mehrere Grafiken zu einer großen zusammengesetzt werden.

Weiter …