CSS

CSS (Cascading Style Sheets) ist eine Sprache zu Strukturierung und Gestaltung von Website-Inhalten und wird i.d.R. in Kombination mit HTML oder XML eingesetzt. HTML und XML übernehmen die semantische Auszeichnung der Inhalte, CSS3 übernimmt das visuelle Erscheinungsbild. Das Verhalten von Website-Elementen fällt in den Aufgabenbereich von JavaScript. Bei Interaktionen und Animationen kommt es zu Überschneidungen zwischen JavaScript und CSS3. Viele Effekte lassen sich mit beiden Technologien erreichen.

Gestaltungsraster (CSS-Grids) im Web Design

CSS Grids

Eine moderne Website basiert i.d.R. auf einem sog. CSS-Grid System - einem Gestaltungsraster. Das Raster hat dabei verschiedene Aufgaben: Einerseits trägt es zu einem strukturierten Layout bei und sorgt dafür, dass eine Website professionell wirkt, andererseits unterstützt das Raster auch den Web Designer bei der Entwicklung, indem es vordefinierte CSS-Klassen bereitstellt.
In diesem Beitrag möchte ich das Thema Gestaltungsraster im Web ausführlich beleuchten. Ich gehe detailliert auf Responsive Grid Systeme ein, und erkläre die Funktionsweise an verschiedenen Beispielen.

Beitrag zu Ende lesen

Web-Typografie: Perfekte Zeilenlängen im Responsive Design

responsive-typo

Das Layout einer Website hat u.a. die Aufgabe, Informationen bestmöglich zugänglich zu machen. Insbesondere die Web-Typografie spielt dabei eine wichtige Rolle. Damit ein Text gut lesbar ist, sollten die Zeilen eine optimale Länge haben. Im Responsive Design muss dazu meist die Schriftgröße über die verschiedenen Displaygrößen hinweg verändert werden, damit die Zeilen auf allen Geräten im optimalen Bereich liegen. Auf Smartphones ist Text daher i.d.R. kleiner als auf großen Monitoren.

Beitrag zu Ende lesen

Video-Training »Modernes Webdesign mit Jonas Hellwig«

Modernes Webdesign mit Jonas Hellwig

In den vergangenen Jahren haben sich sowohl die Konzeption als auch die Gestaltung und die technische Umsetzung von Websites stark verändert. Themen wie responsive Design, Prototyping, flexible Rastersysteme und modulares Design haben einen sehr hohen Stellenwert eingenommen. Die Grenze zwischen Gestaltung und Technik ist größtenteils aufgelöst. Ich freue mich daher sehr, euch mein neues Video-Training mit dem Titel »Modernes Webdesign mit Jonas Hellwig« vorstellen zu dürfen. Die DVD ist ab sofort im Buchhandel, sowie bei Amazon erhältlich.

Demo-Videos und Inhaltsverzeichnis

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

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

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

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