kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Layout


Die CSS-Eigenschaft box-decoration-break – padding & Co. beim Zeilenumbruch beibehalten

Wenn ihr Inline-Elementen über padding einen Innenabstand zuweist, dann wird dieses padding bei einem Zeilenumbruch ignoriert. Gleiches gilt für Eigenschaften wie box-shadow oder border-radius. Diese Tatsache ist in der Praxis extrem lästig, da es beispielsweise nicht möglich ist nur den Textbereich einer mehrzeiligen Überschrift mit einer Hintergrundfarbe zu hinterlegen und ansprechend zu gestalten. An den Zeilenumbrüchen wird der Hintergrund unschön abgeschnitten. Die CSS-Eigenschaft box-decoration-break schafft Abhilfe.

Beitrag zu Ende lesen

Transparente Rahmen (border) mit CSS

Transparente Umrandungen mit Hilfe der border-Eigenschaft scheinen auf den ersten Blick kein Problem zu sein. In der Praxis stellt sich jedoch schnell heraus, dass es nicht so funktioniert, wie in der Theorie gedacht. Und so entstehen oft völlig überflüssige <div>-Verschachtelungen. Um euch vor solch peinlichen Konstruktionen zu bewahren, zeigen wir euch in diesem Beitrag wie es sauberer umgesetzt wird und rufen in diesem Zusammenhang die Eigenschaft background-clip in Erinnerung

Beitrag zu Ende lesen

Schriftgrößen in vw – Bilder mit Texten proportional skalieren

Textinhalte die optisch in oder vor einem Bild positioniert werden sollen, stellen in einem flexiblen Layout eine große Herausforderung dar. Das Problem besteht darin, dass Bilder meist proportional skaliert werden, wohingegen Texte einfach nur an anderer Stelle umbrechen. Dadurch entsteht ein schwer steuerbares Ungleichgewicht.

Individuelle Breakpoints für jedes Bild sind zwar technisch möglich, in der Praxis jedoch meist nicht realistisch. Auch wäre es denkbar, den Text direkt mit in die Grafik zu speichern, doch aus Gründen der Suchmaschinenoptimierung, Editierbarkeit und Übersetzbarkeit ist eine solche Lösung ebenfalls inakzeptabel.

In diesem Beitrag erklären wir, wie Texte, die optisch vor einem Bild platziert wurden, gemeinsam mit dem Bild proportional skaliert werden können.

Beitrag zu Ende lesen

Quantity Query – Layout-Veränderungen über die Anzahl an Elementen steuern

Im responsive Design wird i.d.R. mit Hilfe von Breakpoints das Layout umstrukturiert, sobald eine bestimmte Displaygröße erreicht ist. Schwierig wird es allerdings, wenn man zum Zeitpunkt der Entwicklung nicht weiß, wie breit ein bestimmtes Element ist. Beispielsweise weil die Ausgabe dynamisch erfolgt oder weil ein Kunde über das CMS selbstständig Inhalte ergänzen kann. Hier kommen die sog. Quantity Queries (Mengenabfragen) ins Spiel: Mit ihrer Hilfe kann die Darstellung verändert werden, sobald eine festgelegte Anzahl an Elementen unter- und/oder überschritten wird.

Beitrag zu Ende lesen

Layout-Pattern im Responsive Web Design

Um eine Webseite für verschiedene Geräte und Bildschirmgrößen zu optimieren gibt es unterschiedliche Konzepte nach denen sich der Inhalt einer Seite verhalten kann. Um auf allen Größen eine gute Figur zu machen verschiebt sich der Inhalt nach gewissen »Layout-Pattern«. Die meistgenutzten Layout-Muster zeigen wir in diesem Beitrag anhand von Beispielen.

Beitrag zu Ende lesen

Responsive Masonry Layouts mit CSS erstellen

Mit dem sog. Masonry-Layout können Inhalte wie Bilder oder Card-Elemente ansprechend und platzsparend auf einer Website angezeigt werden. Im Gegensatz zu »klassischen Rastern« zeichnet es sich durch eine versetzte Kachel-Optik aus – daher auch der Name (Masonry = Mauerwerk). Aus technischer Sicht ist das echte Masonry-Layout nicht einfach umsetzbar – zumindest nicht ohne JavaScript und wenn es responsive sein soll. Wir stellen die verschiedenen Lösungen vor; u. a. auch eine sich abzeichnende native CSS-Lösung mittels CSS Grid.

Beitrag zu Ende lesen

CSS Grid – Einführung in Gestaltungsraster mit dem Grid Layout Module

Komplexe Weblayouts lassen sich weder mit float-basierten Gestaltungsrastern noch mit Flexbox perfekt umsetzen. Die Floating-Technik wurde nicht zur Konstruktion komplexer Layouts entwickelt, was wir u.a. daran merken, dass wir Elemente nicht nach oben und unten verschieben können. Flexbox ermöglicht es zwar die Gestaltung vollständig vom HTML-Code zu trennen, bietet sich aber eher für lineare Strukturen an als für verschachtelte. CSS Grid ermöglicht »echte« Gestaltungsraster auf Basis von CSS. In diesem Beitrag beschreiben wir, wie Layouts mit Hilfe von CSS Grids konstruiert werden können.

Beitrag zu Ende lesen