Artikel rund um's Webdesign

Die CSS-Eigenschaft Scroll Snap ermöglicht es, Scrollvorgänge zu steuern. Auf diese Weise können zum Beispiel Bilder oder hervorgehobene Texte genau in der Mitte, am oberen oder am rechten Rand eines Bildschirmausschnitts einrasten.

Lesen Sie mehr über Bildergalerie mit CSS Scroll-Snap.

English version also available: Image Gallery with CSS Scroll Snap.

Hier erfahren Sie, wie Sie ein flexibles und responsives Formular erstellen können, das auf mobilen Bildschirmen perfekt funktioniert. Diese Vorlage ist für viele Fälle geeignet, da sie leicht an spezifische Bedürfnisse angepasst werden kann.

Lesen Sie mehr über Template für ein responsives Formular.

English version also available: Creating a Responsive Basic Form - An Easily Customizable Template for Your Own Forms.

Das HTML-Element hr (horizontal rule) wird auf Webseiten verwendet, um eine visuelle Trennung zwischen zwei Bereichen zu erreichen.
Man kann das hr-Element auch dazu nutzen, gestalterische Effekte zu erzielen, die eine Webseite auflockern oder Inhalte unterstreichen.
Im folgenden Artikel zeige ich verschiedene Möglichkeiten, wie man das hr-Element attraktiv designen kann. Dazu wende ich die CSS-Eigenschaft background-image an, mit der unendlich viele Designs möglich sind.

Lesen Sie mehr über Trennlinien als Dekoration für Webseiten.

English version also available: Separator Lines as Decoration for Web Pages - How to Design the HTML Element hr with CSS.

Mit CSS Grid Layout ist es sehr einfach, Inhaltsboxen mit der gleichen Höhe über eine beliebige Anzahl von Zeilen zu gestalten. Alles, was Sie dazu brauchen, ist nur eine einfache Codezeile. In diesem kleinen Artikel werde ich Ihnen diese magische Zeile zeigen. Alle anderen Stile, um attraktive Cards oder auffällige Bildergalerien zu gestalten, bleiben Ihnen überlassen.

Lesen Sie mehr über Text-Hintergründe auf Wallpapers.

English version also available: Attractive Backgrounds for Texts on Wallpapers.

Mit CSS Grid Layout ist es sehr einfach, Inhaltsboxen mit der gleichen Höhe über eine beliebige Anzahl von Zeilen zu gestalten. Alles, was Sie dazu brauchen, ist nur eine einfache Codezeile. In diesem kleinen Artikel werde ich Ihnen diese magische Zeile zeigen. Alle anderen Stile, um attraktive Cards oder auffällige Bildergalerien zu gestalten, bleiben Ihnen überlassen.

Lesen Sie mehr über Equal Height Boxes mit CSS Grid Layout.

English version also available: Equal Height Boxes with CSS Grid Layout.

In diesem Artikel zeige ich Ihnen, wie Sie mit einer relativ einfachen Methode das Fabthema Ihrer Website ändern können. Ich verwende für das Design unterschiedlicher Farbthemen CSS Custom Properties (auch CSS-Variable genannt).
Auf diese Weise kann man die eigene Website im Handumdrehen z. B. der Jahreszeit, einem monatlichen Schwerpunkt oder einfach der Stimmungslage anpassen.

Lesen Sie mehr über Theming mit CSS-Variablen.

English version also available: Theming with CSS Variables.

Es gibt, wie so oft, verschiedene Wege, um HTML-Elemente zu verstecken. Aber nicht in jedem Fall verschwindet das Element dann auch vom Bildschirm. In solchen Fällen bleibt noch ein leerer Raum auf dem Screen sichtbar.
In diesem kurzen Artikel möchte ich Ihnen mehr oder weniger sinnvolle Methoden zeigen, wie man HTML-Elemente vor Usern versteckt.

Lesen Sie mehr über HTML-Elemente per CSS verstecken.

English version also available: Seven ways to hide HTML Elements using CSS.

Im Webdesign gibt es eine Unmenge an Designtrends: Brutalism, Material Design, Flat Design, illustrative Design usw. Einige dieser Trends sind dem Zeitgeist geschuldet und nur von kurzer Dauer, andere wiederum werden alle paar Jahre wieder als dernier cri aus der Mottenkiste hervorgeholt.

Lesen Sie mehr über Minimalist Template.

English version also available: Minimalist Whitespace Website Template for Download.

In meinem letzten Artikel habe ich die CSS Counter-Funktion anhand der Nummerierung von Überschriften vorgestellt. Heute möchte ich mit dieser Funktion eine flexible Speisekarte erstellen. Diese "Spielerei" kann auch für viele andere Arten von Listen verwendet werden.

Lesen Sie mehr über Ein Template für eine einfache Speisekarte mit der CSS Counter-Funktion gestalten.

English version also available: Creating a Template for a Menu Card with the CSS Counter Function.

Wäre es nicht schön, wenn sich die Nummerierung von Überschriften, Abbildungen und Tabellen L-Texten automatisch anpassen, wenn neue Überschriften oder Bilder eingefügt werden? Genau das geht mit ein wenig HTML und CSS.

Lesen Sie mehr über Überschriften, Abbildungen und Tabellen in einem HTML-Text automatisch nummerieren.

English version also available: Automatically Number Headings, Figures and Tables in an HTML Text.

Mit CSS Flexbox kann man auf einfache Weise einen Text über ein Bild zentrieren oder ihn an verschiedenen Stellen positionieren. Und dies alles ohne großen Programmieraufwand.

Lesen Sie mehr über Bildbeschriftungen mit CSS Flexbox.

English version also available: Image Captions with CSS Flexbox.

Ob Sie eine Bildergalerie, ein Portfolio oder ein Card-Layout gestalten wollen, stets stehen Sie vor dem Problem, wie dies auf unterschiedlichen Bildschirmgrößen aussieht. Dazu verwendet man üblicherweise Media Queries. Doch es gibt eine Lösung, die ganz ohne Media Queries auskommt. Wie das funktioniert, möchte ich Ihnen anhand einer einfachen Bildergalerie zeigen.

Lesen Sie mehr über Bildergalerie erstellen mit CSS Grid Layout.

English version also available: How to Create an Image Gallery with CSS Grid Layout.

Modulare Website-Entwicklung ist ein Ansatz im Frontend Development oder UX Design. Dabei werden wiederverwendbare und von anderen Komponenten unabhängige Module mit HTML und CSS entwickelt.

Lesen Sie mehr über Modulare Website-Entwicklung.

Im folgenden Artikel möchte ich Ihnen zeigen, wie Sie ohne tiefgreifende Kenntnisse aller Spezifikationen des CSS Grid Layout Moduls zu brauchbaren und vorzeigbaren Website-Prototypen kommen. Das Ergebnis ist ein Basis-Template für Website-Prototypen, das flexibel und leicht zu erweitern ist.

Lesen Sie mehr über Rapid Prototyping mit CSS Grid Layout.

English version also available: Rapid Prototyping with CSS Grid Layout.

Wie Sie ein performantes und zugängliches Accordion für Ihre Website bauen können – ganz ohne JavaScript –, zeige ich Ihnen in diesem Artikel.

Erfahren Sie hier, wie Sie nur mit HTML ein Accordion kreieren.

English version also available: Accordion with HTML Elements "details" and "summary".

Mit CSS-Variablen lassen sich Farben, Typografie, Abstände und weitere Eigenschaften einer Website leicht und schnell ändern. Wie das geht, möchte ich Ihnen in diesem Artikel zeigen.

Erfahren Sie hier, wie Sie mit CSS-Variablen Websites gestalten können.