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

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

Content Choreography für responsive Websites

content-choreography

In der Smartphone-Ansicht einer Website werden die Inhalte i. d. R. »gestapelt«. Alle Elemente werden linear untereinander angeordnet und die Reihenfolge der einzelnen Bereiche (z.B. Header, Hauptnavigation und Inhaltsbereich) entspricht der Reihenfolge der Elemente im HTML-Dokument.
Da dieses Verhalten bei komplexeren Projekten schnell zu Schwierigkeiten führen kann, sucht die Webdesign-Community nach Lösungen um die Reihenfolge bei Bedarf verändern zu können. Das Stichwort lautet »Content Choreography«.

Beitrag zu Ende lesen

CSS Grid Layout Module

grid-layout-module

CSS bietet verschiedene Ansätze um das Layout einer Website zu konstruieren. Neben Hilfstechnologien wie Floats, mit denen es ebenfalls möglich ist ein Layout aufzubauen, existieren auch einige »echte« Layout-Modelle die nur zu diesem Zweck entwickelt wurden. Der Unterschied ist, dass ihr mit Hilfe eines echten Layout-Modells deutlich flexibler seid was die Anordnung von Elementen über verschiedene Displaygrößen hinweg angeht. Neben dem Flexbox-Modell existiert auch das sog. CSS Grid Layout Module.

Beitrag zu Ende lesen

Berechnungen mit CSS calc()

css-calculations

Moderne Web-Layouts werden zunehmend komplex, gleichzeitig versuchen Entwickler den Code immer weiter zu verschlanken und zu optimieren. Insbesondere im Responsive Design verwendet eine Website beispielsweise mehrere Gestaltungsraster mit unterschiedlichen Spaltenzahlen. Das führt oft zu Problemen bei der Vergabe von CSS-Klassen. Eine schöne Möglichkeit den Code von solch überflüssigen CSS-Klassen zu befreien bieten die Kalkulationsmöglichkeiten mit Hilfe der CSS-Eigenschaft calc(). Ähnlich sieht es aus, wenn Pixelwerte von Prozentwerten abgezogen werden sollen. Beispielsweise um Werbebanner in einem ansonsten flüssigen Layout zu platzieren.

Beitrag zu Ende lesen