Heutzutage ist das Thema CSS innovativer und spannender denn je, auch wenn es einige Zeit lang etwas vernachlässigt wurde, da sich die Front-End-Entwickler mehr auf JavaScript konzentriert haben. In den letzten Jahren sind einige CSS-Techniken und -Technologien entwickelt worden, mit denen sich Webseiten und Apps wesentlich besser entwickeln und gestalten lassen.

In diesem Artikel habe ich die Highlights der im Web bereitstehenden CSS-Tutorials zusammengefasst. Diese CSS-Tutorials sind eine wahre Fundgrube an wichtigen Informationen. Zum einen finden Sie dort Informationen zu den wichtigsten Aspekte der neuesten CSS-Programmierung wie CSS-Architektur, -Animation und -Layout. Zum anderen lernen Sie über diese Auswahl einige der besten Webseiten und Experten-Tipps zu Web-Design und Front-End kennen.

Fröhliches Lernen!

CSS-Tutorials zu Webdesign-Grundlagen

Über 50 interessante CSS-Eigenschaften und Werte

Was ist wohl die beste Art, eine so enorme Auflistung zu beginnen? Richtig. Mit einer weiteren grandiosen Liste. In diesem CSS-Tricks Artikel von Greg Hovanesyan finden Sie viele interessante CSS-Eigenschaften und deren Vorzüge. Außerdem wird anhand von Anwendungsbeispiele erklärt, wie man einfachere Codes selbst schreiben kann.

Zum Tutorial: Let’s Look at 50+ Interesting CSS Properties & Values

CSS-Positionierung, erklärt am Beispiel eines Eisbechers

Niemand erklärt Web-Design wie Kevin Kononenko. Er ist der Meister der Analogie. In diesem Artikel, sein bislang populärster im freeCodeCamp, stellt er die Behauptung auf: „Wer schon einmal einen Eisbecher selbst zubereitet hat, für den versteht sich CSS-Positionierung praktisch von selbst.“

Abbildung - Ice Cream

Zum Tutorial: CSS Positioning Explained By Building An Ice Cream Sundae

Tutorials zum Thema CSS-Architektur

CSS-Architektur für Design-Systeme

Brad Frost erklärt, wie sich ein Design System mit einer stabilen CSS-Architektur für große Organisationen bauen lässt. Dieser Lösungsansatz ist zwar keine allgemeingültige Erfolgsgarantie für jedes Projekt, aber Sie finden hier großartige Tipps und Einblicke, wie Sie Ihr CSS besser organisieren können.

Zum Tutorial: CSS Architecture for Design Systems

Ein Leitfaden zur Erstellung von pflegeleichtem CSS

Das großartige, umfassende Tutorial von Adam Silver erklärt Ihnen, wie Sie ein modulares, skalierbares und pflegeleichtes CSS schreiben können, ohne dass Sie befürchten müssen, dass vielleicht zuvor getroffene Entschlüsse oder bereits existierende Designs zum Problem werden könnten.

Zum Tutorial: Maintainable CSS

CSS-Architektur für UI(User Interface)-Entwickler

Das Tutorial von Matteo Pescarin gibt Ihnen einen wirklich guten Überblick über verschiedene CSS-Architekturen wie zum Beispiel BEM, SMACSS, ITCSS und Atomic Design. Ganz besonders empfehlen wir den Artikel – Manage large CSS projects with ITCSS und den dazugehörigen Screencast – Manage large-scale web projects with new CSS architecture ITCSS von Harry Roberts zu ITCSS.

Animationsschleifen in CSS Preprocessors

Animationen in Precompilern wie Sass, Less und Stylus helfen Ihnen, CSS übersichtlich, sauber und pflegeleicht zu halten. Miriame Suzanne erklärt in diesem Tutorial die Funktionen und den Einsatz von Animationsschleifen.

Zum Tutorial: Loops in CSS Preprocessors

CSS-Vererbung, Kaskadierung und Gobal Scope: Dein neuer alter schlimmster bester Freund

Heydon Pickering untersucht die Möglichkeiten von CSS-Vererbung, insbesondere Kaskade und Scope für das modulare Frontend Design.  Auch wenn diese Features bei Entwicklern nicht mehr so beliebt sind, können diese doch sehr hilfreich sein, um ein sauberes und selbstregulierendes CSS sauberer zu erstellen. Außerdem wird es damit auch einfacher, das Frontend zu erweitern.

Zum Tutorial: CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends

Design Styles

Das ultimative Handbuch für asymmetrische Header

In diesem eindrucksvollen Handbuch beschäftigt sich Ahmad Nassri mit asymmetrischen Headern wie z.B. diagonalen Kopfzeilen. Er untersucht verschiedene Design-Ansätze, indem er diese auf deren Einfachheit, den generierten Inhalt, die Cross-Browser-Unterstützung sowie deren Performance hin vergleicht.

Optimierte Linkdarstellung mit dem CSS Text Decoration Module

Links unterliegen strenger Design-Limitierung, die sich allerdings auch auf deren Lesbarkeit auswirken kann. In diesem kurzen Artikel zeigt Dudley Storey, wie sich der Stil und die Benutzerfreundlichkeit von Links mit text-decoration-skip und text-decoration-color verbessern lassen.

Zum Tutorial: Improve the Look of Links with the CSS Text Decoration Module

Magische Randomization mit nth-child und dem Zikaden-Prinzip

Die sehr talentierte Charlotte Jackson hat einen Artikel über den Effekt geschrieben, den sie letztes Jahr für die Webseite der UX London-Konferenz genutzt hat.  Hier wurden die Portraits der Sprecher mit einer zufällig verzerrten Kreisform umrandet.

Abbildung - Magische Randomization

Zum Tutorial: Magic randomisation with nth-child and Cicada Principle

Weitere Informationen zum Thema bietet der Artikel: Das Zikaden-Prinzip – The Cicada Principle und warum es Webdesigner etwas angeht von Alex Walker.

CSS-Bilder

Ein Ratgeber für Einsteiger zum Thema CSS-Bilddarstellung

Michael Mangialardi, der Gründer von Daily CSS Images, hat einen detaillierten Ratgeber darüber geschrieben, wie man reine CSS-Bilder kreieren kann. Nach einer kleinen Einführung lernen Sie, wie Sie einen Koala nur mit CSS erschaffen können. Es gibt hierzu auch ein Video.

Zum Tutorial: A Beginner’s Guide to Pure CSS Images

 

Kleine Bildausschnitte: So einfach erstellen Sie Poster-Effekte

Mary Lou von Codrops erklärt, wie Sie mit dynamischen Bildausschnitten Webseiten-Poster erstellen können, inspiriert von Poster Art und Clip-Path.

Abbildung - Poster-Effekte

Zum Tutorial: Little Fragments: Creating a Simple Image Poster Effect

Atemberaubende Bildeffekte mit dem CSS-Backdrop-Filter

In diesem Tutorial auf SitePoint erklärt Ihnen Ashna Laxmi, wie Sie den CSS-Backdrop-Filter benutzen, der im Modul Filtereffekte Level 2 Spezifikationen vorgestellt wurde. Im Tutorial von Laxmi geht es vor allem um die Themen: Syntax, Browser-Support und praktische Anwendungen.

Zum Tutorial: Create Stunning Image Effects with CSS Backdrop-filter

Photoshop-ähnliche Blend-Modi mit CSS

In diesem Tutorial lernen Sie alles über die Blend-Modi, mit denen sich Hintergrundbilder mit Elementen vermischen lassen. Mit Blend-Modi lassen sich wirklich schöne grafische Effekte erzeugen. Jetzt wäre die beste Zeit dafür, damit anzufangen, da Blend-Modi nun auch in den meisten aktuellen Browserversionen unterstützt werden.

Zum Tutorial: Photoshop-like Blend Modes in CSS

Bildeffekte mit CSS

Bennet Feely hat eine Webseite mit Bildern zusammengestellt, bei denen in der Bildbearbeitung verschiedene neuere CSS-Eigenschaften benutzt wurden (CSS Blending und Filtering).  So gibt es erstaunlich viele Möglichkeiten, ein Einzelbild zu manipulieren. Hier erfahren Sie, wie Sie diese Effekte sofort einsetzen können.

Abbildung - Bildeffekte mit CSS

Zum Tutorial: Image Effects with CSS

CSS-Tutorials zu CSS-Animation

CSS-Animation für Anfänger

Eine großartige Einführung in die CSS-Animation von Produkt-und Front-End Designerin Rachel Cope. Sie hat auch einen Artikel zu CSS Transitions und Transforms für Anfänger verfasst.

Zum Tutorial: CSS Animation for Beginners

So erstellen Sie eine Reihe von Micro-Animationen

Donovan Hutchinson untersucht, wie sich eine Reihe von kleinen und einfachen Animationen für verschiedene Situationen erstellen lässt.

Zum Tutorial: Create a set of micro-animations

Transition-Effekte mit CSS-Masken

Der kreative Front-End Programmierer Robin Delaporte beschreibt in diesem experimentellen Tutorial, wie Sie steps() Timing für CSS-Masken benutzen können, um spektakuläre Folienübergänge (wie in PowerPoint) zu erstellen. Der Effekt funktioniert nur in manchen modernen Browsern.

Zum Tutorial: Transition Effect with CSS Masks

Zaubern Sie mit WebSockets und CSS3

Hier erfahren Sie, wie sich CSS-Animationen mit dem Web in Echtzeit verbinden lassen. Der R&D Ingenieur Helio Dolores von OutSystems erklärt Ihnen in diesem Artikel eine von ihm entwickelte App für den Verkauf. Mit dieser App kann Kunden im Geschäft der gewünschte Artikel auf einem größeren Bildschirm gezeigt werden. Kunden erhalten so einen besseren ersten visuellen Eindruck.

Zum Tutorial: Making Magic with WebSockets and CSS3

Optimierung von CSS-Animationen

In diesem Tutorial stellt Tommy Marshall, Front-End Entwickler bei Viget, eine raffinierte Idee vor, um Animationen mit der JavaScript Bibliothek „Ensure Animation“ synchroner ablaufen zu lassen und anhalten zu können. Diese Bibliothek überwacht Animations-Events von selektierten Elementen und stellt sicher, dass Animationen kontrolliert weiterlaufen oder gezielt gestoppt werden.

Zum Tutorial: Ensuring CSS Animations Run and Stop Gracefully

Mit CSS Rahmen mit abgerundeten Ecken gestalten

Eine nützliche Lösung von Chris Ruppel, mit der Sie mehr Tiefe und Nuancen in die Bilder Ihrer Webseite bringen können. Diesen Effekt finden Sie auf Chris’ eigener Webseite in der Fußzeile.

Zum Tutorial: Using CSS to animate border-radius

Mit einem Set von CSS Keyframes verschiedene Endstadien animieren

Eine großartige Technik von Ana Tudors. Sie erklärt, wie sie mit nur 30 Zeilen SCSS zum Beispiel Explosionen von Regenbogenpartikeln nach dem Zufallsprinzip erstellen können. Sie brauchen dafür nichts anderes als CSS.

Zum Tutorial: Animate to Different End States Using One Set of CSS Keyframes

Horizontales Scrolling mit CSS

Ein eleganter kleiner Trick, den wir auf der Seite von CSS-Tricks gefunden haben. Gastautor Pieter Biesemann erklärt Ihnen, wie sich eine Webseite horizontal mit CSS scrollen lässt, indem Sie einen Container mit mehreren Elementen benutzen.

Abbildung - Horizontales Scrollen mit CSS

Zum Tutorial: Pure CSS Horizontal Scrolling

CSS-Layouts

Ein vollständiger Guide zum CSS Grid Layout Modul

Dies ist ein wirklich umfassender Guide über das vieldiskutierte CSS Grid Layout Modul von Chris House. In diesem Guide präsentiert er die Grid-Konzepte, wie man sie in der aktuellsten Version der Spezifikation findet.

Zum Tutorial: A Complete Guide to Grid

Eine einfache Anwendung von CSS Grid

Sie haben bereits vom CSS Grid Layout gehört und Sie möchten es gern ausprobieren? Dann empfehlen wir, dieses ziemlich einfache Beispiel von Front-End-Designer Timothy B. Smith zu lesen.

Leitfaden für die automatische Element-Platzierung im CSS Grid

In diesem Tutorial erklärt Nitish Kumar die Schritte, die der Algorithmus der automatischen Platzierung durchläuft, wenn Elemente auf einer Webseite platziert werden. Dieser Leitfaden baut übrigens auf zwei einführende Tutorials über das CSS Grid Layout Module auf: Introducing the CSS Grid Layout.

Abbildung - Automatische Element-Platzierung

Zum Tutorial: A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid

Eine Lösung für das “Holy-Grail-Layout” mit CSS Grid

Ire Aderinokun erklärt Ihnen, wie man mit CSS Grid das klassische CSS-Problem (das Drei-Spalten-Layout) kreieren kann, das Anfang der 2000er-Jahre auf den Namen „The Holy Grail Layout“ getauft wurde. Ohne ein paar Tipps und Tricks ist es bekanntlich nicht gerade einfach, dieses Layout in CSS zu programmieren. Erfahren Sie mehr zum Lösungsansatz von Ire – nebenbei bietet Ihnen dieses Tutorial die Möglichkeit, mehr über CSS Grid zu lernen.

https://bitsofco.de/holy-grail-layout-css-grid/“ target=“_blank“>Zum Tutorial: The Holy Grail Layout with CSS Grid

Responsive Online Comics mit CSS Grid Layout

Wie sich herausgestellt hat, ist CSS Grid Layout hervorragend für die Erstellung von Online Comics geeignet, vor allem, wenn diese flexibel sein sollen. Am Beispiel von „Barry the Cat“ wird in diesem Tutorial veranschaulicht, wie Sie Responsive Online Comics erstellen können.

Abbildung - Barry the Cat

Zum Tutorial: CSS Grid Layout and Comics (as Explained by Barry the Cat)

Alles, was Sie über Flexbox wissen sollten

In diesem Artikel von Ohans Emmanuel lernen Sie die Grundlagen kennen, um mit CSS Flexbox gut arbeiten zu können. Dafür führt er Sie zunächst durch viele kleine Aufgaben und lässt Sie abschließend eine Musik App erstellen, die mit Hilfe von Flexbox gestaltet wird.

Zum Tutorial: Understanding Flexbox: Everything you need to know

Interessante CSS Writing Modes

Jen Simmons gibt mit ihrem Tutorial eine hervorragende Einführung zu einer etwas unbekannten Eigenschaft von CSS, die interessanterweise wirklich gut unterstützt wird: Writing Modes. Es ist nicht nur eine sehr innovative Technik, um Seiten in Chinesisch, Japanisch oder Koreanisch zu erstellen. Diese Methode ist auch hilfreich, um Flexbox und Grid besser zu verstehen.

Abbildung - CSS Writing Modes

Zum Tutorial: CSS Writing Modes

So verwenden Sie CSS Shapes für Ihr Webdesign

In diesem Artikel erfahren Sie, wie man mit dem Modul CSS Shapes Inhalte so layouten kann, wie es bei Zeitungen oder Magazinen üblich ist. Sie erfahren auch, wie eine Form erstellt und deren Größe, Position und Box Model angepasst wird.

Zum Tutorial: How to Use CSS Shapes in Your Web Design

CSS-Tutorials zu Responsive Design

So erstellen Sie ein Responsive Grid System

Wir können wirklich alle Artikel von Zell Liew empfehlen, wobei dieser hier einer seiner besten ist. Zell erklärt, wie einfach es ist, ein maßgeschneidertes Grid System ohne Framework zu erstellen. Für mich gehört dieser Artikel definitiv zur Pflichtlektüre für Webentwickler und Webdesigner.

Zum Tutorial: How to build a responsive grid system

CSS Breakpoints richtig erstellen

2016 war David Gilbertons Artikel zu der richtigen Vorgehensweise für Responsive Breakpoints einer der populärsten CSS Artikel. Ein sehr gut durchdachter Text, der sich auf das Spektrum der unterschiedlichen Endgeräte konzentriert, statt nur auf harte Breakpoints. Denn auch in Zukunft wird es weiterhin neue Endgeräte mit anderen Auflösungen und Pixeldichten geben.

Abbildung - Breakpoints

Zum Tutorial: The 100% correct way to do CSS breakpoints

Warum mich die Suche nach dem “Holy Grail” zu Element Queries führte

Werden die Komponenten, mit denen Webseiten gebaut werden, besser, wenn man CSS erweitert? Lassen sich leistungsfähigere Webseiten mit weniger externer Unterstützung und Tools programmieren? Tommy Hodgins hat sich diese Frage gestellt und seine Lösung lautet: „Element Queries“. Dieses Tutorial erklärt, warum.

Zum Tutorial: The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today

Responsive Bilder in CSS

Diesen Artikel von Chris Coyier sollten Sie auf jeden Fall gelesen haben. Denn hier wird erklärt, wie Sie Responsive Images in CSS mit einer hilfreichen Kombination von Media Queries und background-image erstellen können.

Zum Tutorial: Responsive Images in CSS

Skalierung von Responsive Animationen

Dies ist ein weiterer hervorragender Artikel auf der Seite von CSS-Tricks.com. In diesem Tutorial zeigt der Front-End Programmierer Zach Saucier verschiedene Techniken, mit denen sich Animationen unterschiedlich skalieren lassen.

Abbildung - Skalierbare Responsive Animationen

Zum Tutorial: Scaling Responsive Animations

Terminplaner mit CSS und jQuery

Claudia Romano, Mitgründer von CodyHouse und Nucleo, stellt in seinem Tutorial eine einfache und responsive Vorlage vor, mit der sich Events auf einer Zeitachse darstellen und in Gruppen einteilen lassen.

Zum Tutorial:Schedule Template

Responsive 3D Shapes

Ein weiterer großartiger Artikel von Ana Tudor, einem sehr aktiven Mitglied bei CodePen. Diesmal erklärt sie verschiedene Herangehensweisen für responsive 3D Shapes.

Zum Tutorial: The State of Responsive 3D Shapes

Responsives Tabellen-Layout

Matt Smith zeigt einen schnellen und einfachen Weg, wie sich Tabellen für mobile Endgeräte optimieren lassen. Dieser Lösungsansatz ist für Tabellen mit relativ einfachem Inhalt geeignet.

Zum Tutorial: Responsive table layout

CSS-Tutorials zu E-Mail Newslettern

Interaktive E-Mails mit CSS erstellen

Das Programmieren von E-Mail muss nicht unbedingt langweilig sein. In diesem exzellenten Artikel mit zusätzlichem Screencast erklärt Mark Robbins, wie sich allein mit CSS JavaScript-ähnliche Funktionen HTML-E-Mail Kampagnen erstellen lassen.

Zum Tutorial: Build interactive emails with CSS

CSS Hacks für responsive E-Mails

Der Gründer von Smashing Magazine, Vitaly Friedman, zeigt in einem Webinar für Shopify zwei unglaubliche Techniken, mit denen sich HTML-E-Mails verbessern lassen, in dem man sie responsive macht – ohne dafür Media Queries zu benutzen. Wer noch weitere „schmutzige“ CSS-Tricks lernen möchte, um Design Projekte zu verbessern, sollte sich das Video anschauen.

Zum Tutorial: Dirty CSS Hacks for Responsive Emails

Der ultimative Guide für den Einsatz von WebFonts in E-Mails

Auf dem Litmus Blog hat Jaina Mistry einen umfangreichen Guide über den Gebrauch von Web Fonts in E-Mails geschrieben. Sie erklärt den Einsatz der Fonts, wo Sie diese finden können und welche E-Mail-Clients die Web Fonts in den E-Mails unterstützen.

Zum Tutorial: The Ultimate Guide to Web Fonts

CSS-Tutorials zum Thema Website-Performance

Was ist Critical CSS? Und wie Sie damit umgehen

Dieser SitePoint Artikel beschreibt, wie sich die Webseiten-Leistung deutlich verbessern lässt, wenn man kritisches CSS einbettet und zum anderem unkritisches CSS asynchron mit Gunt, npm Modulen oder ähnlichen Werkzeugen lädt.

Zum Tutorial: How and Why You Should Inline Your Critical CSS

Performance-Optimierung für Webseiten mit mehreren Hintergrundbildern

In diesem Artikel erklärt Harry Roberts, wie sich die wahrgenommene Leistung einer Seite verbessern lässt, falls große Bilder nicht richtig laden und die Nutzer dann auf ein großes weißes Loch schauen. Er zeigt eine Methodik, bei der der Farb-Mittelwert Ihres Bildes als background-color angegeben wird.

Weitere Alternativen erläutert Chris Coyer in seinem Artikel: Improving Perceived Performance with Multiple Background Images
Zum Tutorial: Improving Perceived Performance with Multiple Background Images

Performantes Parallaxing

Es kann richtig Spaß machen, wenn man den Parallax-Effekt richtig einzusetzen weiß. Denn ob Sie es mögen oder nicht, der Parallax-Effekt wird vorerst nicht von der Bildfläche verschwinden. Paul Lewis diskutiert exzellente Lösungsansätze für den Parallax-Effekt, die performant sind und browserübergreifend arbeiten.

Zum Tutorial: Performant Parallaxing

10 Grundprinzipien für smarte WebAnimationen

Anand Sharma, Gründer der Gesundheits-App „Gyroscope“, stellt in seinem Tutorial die 10 wichtigsten Grundprinzipien vor, wie sich Animationen mit 60fps erstellen lassen. Das ist eine Pflichtlektüre für jeden, der seine Animationsleistung verbessern möchte.

Zum Tutorial: 10 principles for smooth web animations

So optimieren Sie Webschriftarten

Ilya Grigorik ist Experte für Webperformance. In seinem Tutorial erklärt er Ihnen, wie optimierte Fonts in Kombination mit einer gut durchdachten Strategie Ihnen dabei helfen können, die Gesamtgröße Ihrer Webseite zu reduzieren und Rendering-Zeiten zu verbessern.

Zum Tutorial: Optimierung von Webschriftarten

CSS-Tools und Werkzeuge

 

PostCSS

Wenn Sie mit PostCSS anfangen möchten, dann ist dieser Guide von Nicolas J. Engler genau das richtige für Sie. Er vermittelt Ihnen das Grundwissen und erklärt Ihnen die Plug-In-Erweiterung für PostCSS. Außerdem finden Sie hier Informationen, wie sich PostCSS mit anderen CSS Prozessoren, wie zum Beispiel Task Runners und Bündlern, integrieren lässt.

Zum Tutorial: PostCSS: Sass’s New Play Date

Von Sass zu PostCSS

Tyler Gaw erklärt in diesem Artikel, wie Sie ganz einfach zu Sass wechseln können, und zeigt Ihnen neue Design-Setups mit dem cssnext-Plug-In. Gaw hat in den letzten fünf Jahren Sass für alle seine Projekte benutzt und freut sich jetzt besonders über die neuen Perspektiven, die er durch den Neustart mit Sass bekommen hat.

Zum Tutorial: From Sass to PostCSS

Ungenutztes CSS mit PurifyCSS und Grunt entfernen

Dieses envatoTuts+ Tutorial zeigt Ihnen, wie einfach sich mit Grunt- und PurifyCSS-Stylesheets erstellen lassen. Hier erfahren Sie, wie Sie diese Stylesheets installieren und für performantere Designs mit und ohne Grunt benutzen können.

Zum Tutorial: Remove Unnecessary CSS With PurifyCSS and Grunt

Sie suchen eine leistungsstarke und kostengünstige Entwicklungsumgebung?

Virtual Server von Host Europe bieten Ihnen Server-Hosting mit 100% SSD-Power für Entwicklungsumgebungen und anspruchsvolle Webprojekte.

Virtual Server von Host Europe

Sie haben Anregungen oder Fragen zu den vorgestellten CSS-Tutorials? Schicken Sie uns einen Kommentar. Wir freuen uns auf Ihr Feedback.

Oliver Lindberg

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten