Content Choreography mit caption-side: bottom;

caption-side-css

Das HTML-Element <caption> beschreibt den Inhalt einer Tabelle. Leider wird das dazugehörige align-Attribut in HTML5 nicht länger unterstützt. Doch wir haben mit CSS die Möglichkeit einem HTML-Element das Verhalten bestimmter Tabellen-Elemente zuzuweisen. Im Umfeld von Content Choreography ist hier die Eigenschaft caption-side interessant. Mit ihr können zwei aufeinander folgende Inhalte getauscht werden – und das funktioniert in allen relevanten Browsern funktioniert in allen modernen Browsern, außer dem Internet Explorer.

Beitrag zu Ende lesen

Responsive »Pinterest-Style« Layout mit CSS3

Responsive Pinterest Grid

Layouts in versetzter Kachel-Optik (Pinterest-Style) sind aktuell sehr beliebt. Insbesondere für die Bilddarstellung eignet sich dieser Layouttyp sehr gut. Wenn ihr selbst ein Design in diesem Stil umsetzen möchtet, werdet ihr merken, dass es ein paar Hindernisse gibt. Insbesondere wenn das Gestaltungsraster flüssig und mit unterschiedlich vielen Spalten auf den verschiedenen Gerätetypen aufgebaut sein soll scheiden einige Hilfsmittel aus.
In diesem Beitrag archiviere ich den Code für ein flexibles »Pinterest-Style« Layout ohne den Einsatz von JavaScript. Mit Media Queries verändern wir die Anzahl der Spalten.

Beitrag zu Ende lesen

SVG-Grafiken mit Photoshop speichern/exportieren

SVG mit Photoshop

Photoshop ist als pixelbasiertes Bildbearbeitungsprogramm nicht die ideale Grundlage für ein Vektor-Format wie SVG. In den neueren Photoshop-Versionen kamen allerdings einige Funktionen hinzu, mit denen es möglich ist in Photoshop »echte« Vektoren zu zeichnen. Mit Hilfe des Photoshop-Generators (ab Version 14.2) ist es nun möglich Vektor-Formen als SVG-Grafik zu exportieren.

Die Erklärung ist Bestandteil des Artikels SVG-Grafiken erstellen und einbinden.

Beitrag zu Ende lesen

Standard Farbschema (Color-Scheme) in WordPress festlegen

Standard Farbschema (Color-Scheme) in Wordpress festlegen

Seit WordPress 3.8 präsentiert sich das Backend in modernem Look. Doch nicht nur der Stil wurde vereinfacht, es stehen nun auch verschiedene Farbschemata zur Verfügung um dem Administrationsbereich einen etwas individuelleren Look zu verpassen. Leider ist es in WordPress momentan nicht möglich, ein Standard-Farbschema für neu registrierte User festzulegen. Mit einem kleinen Code-Snippet rüstet ihr die Funktion nach.

Beitrag zu Ende lesen

Prüfen, ob eine WordPress-Sidebar Widgets enthält

WordPress-Sidebar mit Widget

Wenn ihr ein WordPress-Theme für Kunden erstellt, liegt eine der Herausforderungen darin, eine Lösung für jede Einstellung vorbereitet zu haben, die seitens des Kunden später vorgenommen werden kann. Dazu gehört u.a. auch die Planung der Sidebar. Der Einsatz mit Widgets wird meist getestet, doch ihr solltet auch davon ausgehen, dass die Sidebar keine Widgets enthält. In diesem Fall muss die Sidebar verschwinden. Leere Container-Elemente etc. sind nicht optimal. Mit folgendem Snippet prüft ihr ob einer bestimmten Sidebar Widgets hinzugefügt wurden.

Beitrag zu Ende lesen

Automatisches CSS-Styling von WordPress-Bildergalerien deaktivieren

Wordpress Bildergalerie

Wenn ihr in WordPress eine Bildergalerie einfügt, erzeugt das System automatisch einen <style>-Abschnitt im <head> der Seite und fügt einige CSS-Gestaltungsangaben hinzu. Unter anderem wird die Breite der Bilder berechnet und per CSS angegeben, je nachdem wie viele Spalten ihr beim Anlegen der Bildergalerie für die Bilddarstellung festgelegt habt. Wenn ihr im Backend drei Spalten gewählt habt, berechnet WordPress beispielsweise circa 33% Spaltenbreite. Da dieses automatische Styling häufig nicht gewünscht ist, lässt es sich über die functions.php deaktivieren.

Beitrag zu Ende lesen

Generierter CSS-Content mit :before und :after

CSS-Content mit :before und :after

Mit Hilfe der CSS-Selektoren :before und :after habt ihr die Möglichkeit vor- bzw. nach einem HTML-Element ein sog. Pseudoelement zu erzeugen. Das Pseudoelement kann wie ein ganz normales HTML-Element mit CSS gestaltet werden, taucht allerdings im HTML-Markup nicht auf. Aus diesem Grund heißt es auch Pseudoelement.
Damit das Pseudoelement entstehen kann, benötigt es zumindest formal einen Inhalt, der über die CSS-Eigenschaft content definiert wird. Die Eigenschaft muss vorhanden sein, sie kann jedoch leer bleiben. Das macht u.a. dann Sinn, wenn das Pseudoelement für Zierelemente eingesetzt wird.

Beitrag zu Ende lesen