Artikel rund um's Webdesign

Equal Height Boxes mit CSS Grid Layout

Erstellen Sie eine beliebige Anzahl von Cards, Columns oder Content Boxes - alle mit der gleichen Höhe

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.

Website in den vier Jahreszeiten

Farbgestaltung von Websites mit CSS Variablen je nach Bedarf ändern

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.

Sieben Wege, HTML-Elemente per CSS zu verstecken

Versteckt ist nicht gleich verschwunden

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.

Minimalist Whitespace Website Template zum Download

HTML- und CSS-Vorlage mit CSS Grid Layout und CSS Flexbox

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.

Ein Template für eine Speisekarte mit der CSS Counter-Funktion gestalten

Flexible Vorlage für allerlei Listen

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.

Überschriften, Abbildungen und Tabellen in einem HTML-Text automatisch nummerieren

Texte mit der CSS-Funktion "counter()" strukturieren

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.

Bildergalerie erstellen mit CSS Grid Layout

Responsive ohne Media Queries

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.

Rapid Prototyping mit CSS Grid Layout

Einfach und schnell zu flexiblen Website-Prototypen

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.

Weitere interessante Artikel
Online-Texte für die Website gestalten
Informationen aufbereiten, damit sie gelesen werden

Texte sollen gelesen werden. Damit sie gelesen werden, müssen Informationen lesbar gestaltet und aufbereitet werden. Wie das geht, soll in diesem Artikel mit Tipps für die Web-Typografie gezeigt werden.

Erfahren Sie hier wie Sie Ihre Online-Artikel wirksam gestalten.

Wie Sie Ihre Bilder für die eigene Website mit Gimp optimieren
Das Plugin "Save for Web" bei Gimp

Bevor wir ein Bild mit den Bordmitteln des Bildbearbeitungsprogramms Gimp - Bild skalieren und/oder zuschneiden - für das Web optimieren, nutzen wir besser ein Tool, das uns die Bearbeitung von Bildern erheblich erleichtert. Das Tool ist eine Gimp-Erweiterung und nennt sich "Save for Web".

Lesen Sie mehr über Bilder mit der Gimp-Erweiterung "Save for Web" optimieren.

Bilder für Ihre Website online bearbeiten
Wie Sie einfach und schnell Ihre Fotos web-gerecht aufbereiten

Sie sind kein Fotograf, Sie sind auch keine Webdesignerin oder Webentwicklerin.

Sie haben keine Ahnung von Bildbearbeitungsprogrammen und möchten sich auch nicht darin einarbeiten.

Und Sie wollen auch keine theoretische Erörterung über responsive Bilder und Performance von Webseiten lesen.

Sie wollen einfach nur Ihre Bilder schnell und problemlos und wirksam bearbeiten!

Dann lesen Sie mehr über Bilder online bearbeiten.