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.“
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Sie haben Anregungen oder Fragen zu den vorgestellten CSS-Tutorials? Schicken Sie uns einen Kommentar. Wir freuen uns auf Ihr Feedback.