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 erstellen und einbinden

SVG

Mit dem Format SVG (Scalable Vector Graphics) können Vektor-Grafiken in Browser dargestellt werden. Wie bei Vektor-Grafiken üblich, werden Farbwerte und Formen nicht über Pixel definiert, sondern mathematisch beschrieben. SVG-Grafiken haben dadurch eine sehr geringe Dateigröße, lassen sich verlustfrei und ohne Zuwachs der Dateigröße skalieren und mit JavaScript animieren oder verändern.

In diesem Artikel fasse ich zusammen, was ihr beim Erstellen von SVGs in Illustrator oder Photoshop beachten solltet, wie SVGs in Websites eingebunden werden können und welche Tools und Hilfsmittel es in diesem Zusammenhang gibt.

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

Verknüpfte Smartobjekte in Photoshop CC (14.2+)

Verknüpfte Smartobjekte in Photoshop CC

Mit verknüpften Smartobjekten hat Adobe im neuesten Update von Photoshop ein lange erwartetes Feature bereitgestellt. Mit verknüpften Smartobjekten können Layouts und Collagen modular verwaltet werden. Verschiedene Designer können nun gleichzeitig an verschiedenen Bereichen eines Projekts arbeiten und auch für den einzelnen Designer wird der Workflow enorm vereinfacht und beschleunigt.

Beitrag zu Ende lesen

Seitenspezifisches WordPress-Plugin (Alternative zur functions.php)

Seitenspezifisches WordPress-Plugin

Im Laufe der Zeit sammelt sich in der functions.php eines WordPress-Themes einiges an Code an. Neben WordPress-Standards wie Custom Post Types und Sidebars finden sich dort auch diverse Snippets die man hier und da auf irgendeinem Blog gefunden hat. Paginations, individuelle Dashboard-Widgets, Breadcrumb-Navigationen ... Doch einige dieser Features sind in der functions.php nicht gut aufgehoben und sollten besser in ein Plugin ausgelagert werden.

Beitrag zu Ende lesen

CSS Blend Modes (Blendmodi)

CSS Blend Modes

Die Blendmodi (auch Mischmodi) aus Photoshop sind weitestgehend bekannt und erfreuen sich u. a. bei der Erstellung fotografischer Effekte größter Beliebtheit. Instagram und Hipstamatic lassen grüßen. Mit CSS Blend Modes können diese Effekte auch im Web realisiert werden. Nach verschiedenen Regeln werden Hintergrundgrafiken miteinander verrechnet. Wir schauen uns in diesem Beitrag die Eigenschaften background-blend-mode und mix-blend-mode an.

Beitrag zu Ende lesen