Repeating Gradients – sich wiederholende CSS-Verläufe

css-repeating-gradients

Mit Hilfe von CSS-Verläufen lassen sich erstaunliche Effekte erzeugen. Es ist beispielsweise möglich Oberflächen zu simulieren oder Plastizität zu erzeugen. Mit sich wiederholenden Verläufen (Repeating Gradients) stehen darüber hinaus noch deutlich komplexere Gestaltungsmöglichkeiten zur Verfügung. Es lassen sich u.a. komplexe Muster erzeugen.

Beitrag zu Ende lesen

WordPress: Permalink der übergeordneten Seite (Page Parent) ausgeben

wordpress-sitemap

Wenn ihr WordPress als CMS und nicht als reine Blogging-Software einsetzt, ist die Wahrscheinlichkeit groß, dass ihr eine hierarchische Navigation mit hoher Verschachtelungstiefe erstellen müsst. Damit sich eure Besucher trotz komplexer Navigation auf der Website zurecht finden, wird in der Seitenleiste häufig eine weitere Navigation abgebildet. In diesem Zusammenhang habe ich bereits einige Snippets veröffentlicht, mit deren Hilfe ihr u.a. die Child-Pages oder den Titel der übergeordneten Seite anzeigen könnt. Ihr könnt auch testen, ob die aktuelle Seite Kind-Elemente besitzt, oder ob sie selbst Parent und/oder Child-Page ist. In diesem Beitrag archiviere ich das Snippet um den Permalink zur übergeordneten Seite auszugeben.

Beitrag zu Ende lesen

Einstieg in Sass – SCSS zu CSS kompilieren

sass-watch

Die Umwandlung von SASS/SCSS-Dateien in CSS-Dateien nennt man Kompilierung (engl: compiling). Mit einigen simplen Befehlen in der Kommandozeile, oder mit Hilfe von Desktop-Apps könnt ihr festlegen, welche Dateien von Sass überwacht werden sollen. Wenn anschließend Änderungen am SCSS-Stylesheet vorgenommen werden, kompiliert Sass die Dateien im Hintergrund automatisch zu CSS. Ich beschreibe in diesem Beitrag wie die Kompilierung über die Kommandozeile funktioniert.

Beitrag zu Ende lesen

Sass mit Hilfe von Apps installieren und einrichten

sass-logo

Es existieren verschiedene Desktop-Anwendungen um Ruby und/oder Sass zu installieren, ohne dabei den Weg über die Kommandozeile gehen zu müssen. Ich möchte euch in diesem Beitrag die populären Anwendungen »Scout«, »CodeKit« und »Compass.app« vorstellen. Weitere Tools findet ihr auf der Website von Sass. Damit ihr alle Beispiele in diese Beitrag nachvollziehen könnt, empfehle euch zuvor den Beitrag zum Thema Sass-Kompilierung gelesen zu haben.

Beitrag zu Ende lesen

Sass über die Kommandozeile installieren

sass-terminal

Viele Web Designer schrecken davor zurück Sass einzusetzen, da sie Angst vor der Installation haben. Zunächst solltet ihr wissen, dass es zwei verschiedene Möglichkeiten der Installation gibt. Ihr könnt Sass über die Kommandozeile installieren, oder mit Hilfe einer Desktop-Anwendung. Die Einrichtung über eine Desktop-Anwendung ist natürlich komfortabler, aber auch die Installation über die Kommandozeile ist sehr unkompliziert und schnell erledigt. Ihr solltet diesen Weg zumindest in der Theorie zu verstehen. Die verschiedenen Funktionen der Desktop-Anwendungen werden dadurch klarer und ihr könnt Sass auch mal eben auf einem fremden System einrichten.

Beitrag zu Ende lesen

IDs von Seiten und Beiträgen im WordPress-Backend anzeigen

wordpress-id

Alle Beiträge und Seiten in WordPress besitzen eine ID, anhand derer sie in der Datenbank identifiziert werden können. Je nach Komplexität des Themes, oder beim Einsatz spezieller Widgets und Plugins benötigt ihr diese Nummer um auf die entsprechenden Inhalte verweisen zu können. Ärgerlich ist, dass die IDs innerhalb des Administrationsbereichs nicht sichtbar sind. Ihr müsst die ID mühsam anhand der Ziel-Adresse des »Bearbeiten-Links« ablesen. Mit folgendem Snippet werden die IDs im Backend permanent angezeigt.

Beitrag zu Ende lesen

Einstieg in Sass – Funktionsweise und Überblick

Sass Logo

Bei komplexen Websites kann die Übersicht im CSS-Code schnell verloren gehen. Moderne Websites nutzen ein durchdachtes Farbkonzept, basieren auf einem Gestaltungsraster das jede erdenkliche Displaygröße bedienen kann, und werden zunehmend interaktiv. Eine stark fragmentierte Browserlandschaft und verschiedene Bedienkonzepte machen die Arbeit zusätzlich kompliziert. Die Reaktion auf diese veränderten Anforderungen ist der »neue« Webdesign-Workflow, den ich in einigen Artikeln bereits ausführlich behandelt habe.
In diesem Artikel möchte ich euch Sass vorstellen. Sass hilft euch dabei, Stylesheets schneller zu schreiben und moderne oder experimentelle Techniken unkompliziert und browserübergreifend einzusetzen. Sass automatisiert lästige Aufgaben, vereinfacht den Umgang mit Farben und Gestaltungsrastern und bietet diverse Funktionen von denen ihr in CSS nur träumen könnt.

Beitrag zu Ende lesen