Browsed by
Kategorie: CSS

This category covers CSS, CSS online services and CSS frameworks

CSS Grid Tutorial

CSS Grid Tutorial

CSS Grid eignet sich zur Erstellung komplexer Layouts für Web-Sites. Seit dem 17. Oktober 2017 unterstützen alle Browser die Befehle. Unser Tutorial gibt eine Einführung in die CSS Grids. CSS Grid sind eine Spezifikation des W3 Konsortiums, welche das Layouten mit Spalten und Zeilen im Browser regelt. Seit Oktober 2017 unterstützen alle Browser die Spezifikation. Diese wird überarbeitet, ein Teil der Befehle wird in Zukunft in das neue Box Alignment Module Level 3 verlagert. Zum Glück gibt es auch die…

Weiterlesen Weiterlesen

fr – die neue CSS Einheit

fr – die neue CSS Einheit

Das Layouten mit CSS ist keine einfache Angelegenheit. Zum Glück sind die Flex Boxes und CSS Grid jetzt von allen wichtigen Browsern unterstützt. Das Bestimmen der Breiten der Container war trotzdem noch Handarbeit. Zum Glück gibt es jetzt die Einheit fr (Fraction). fr bedeutet einfach «Rest», was übrig bleibt. Das heisst, der Browser berechnet die Breite selbst in Abhängigkeit des Viewports, der Paddings und Margins. Im folgenden 13-spaltigen Layout soll die Navigation 4 Einheiten, die Inhalte je 1 Einheit breit…

Weiterlesen Weiterlesen

Grid Layout Bibliothek Masonry

Grid Layout Bibliothek Masonry

Die Javascript Bibliothek Masonry erlaubt das schnelle Erstellen von grafischen Layouts. Mit von der Bibliothek gegebenen Klassen können sehr schnell unregelmässige Layouts gestaltet werden: HTML- und CSS-Code sind einfach und verständlich: Auf der Website von David De Sandro finden sich viele Beispiele mit Code sowie umfangreiche Tutorials.

CSS Variablen

CSS Variablen

Der Begriff «Variable» ruft bei vielen Designern und MMP Studierenden ein Stirnrunzeln hervor. Variablen gehören in die Welt der Programmierung und nicht zum Thema Design. Diese Zeiten sind vorbei! Auf Caniuse erkennt man, dass die modernen Browser die CSS Variablen unterstützen. Es ist nicht mehr nötig, dafür LESS oder SASS (resp. SCSS) zu verwenden: Beispiel zur Illustration Bei der Gestaltung eines Corporate Designs werden zum Beispiel immer wieder die gleichen Schrift- oder Hintergrundfarben verwendet. Statt mehrfachen Definitionen lassen sich Variablen…

Weiterlesen Weiterlesen

CSS Grid Layout

CSS Grid Layout

In einem Blogeintrag vom August 2017 stellten wir das CSS Grid Layout vor mit der Bemerkung «weit entfernt von einer sauberen Browser-Unterstützung ist das CSS Grid Layout». Seit März hat sich das geändert wie in Caniuse zu sehen ist: Die modernen Browser unterstützen die CSS-Grids. Das Tool Griddy erlaubt, CSS Grid Layouts via Menü zu erstellen – ganz ohne Codierung! Griddy unterstützt das Spalten- und Zeilenlayout sowie die neue Einheit fr.

Layouten im Web

Layouten im Web

Das Gestalten anspruchsvoller Web-Layouts für Magazine, Zeitschriften, Webseiten etc. mit Hilfe der Cascading Style Sheets (CSS) ist herausfordernd und dauernden technologischen Änderungen unterworfen. Bei Web-Designern gilt das Umsetzen eines Layouts mit mehreren, gleich hohen Spalten als «Holy Grail». Ein wichtiger Punkt des «Holy Grail» Layouts ist, dass sich bei einer Vergrösserung der mittleren Inhalts-Spalte sowohl die linke als auch die rechte Spalte automatisch in der Höhe anpasst (Bild Quelle: Wikipedia). Nebst dem Erstellen von gleich hohen Spalten ist das Platzieren von…

Weiterlesen Weiterlesen