Top 20 CSS3-Tutorials zur Verbesserung Ihrer Webentwicklungsfähigkeiten

Cascading Style Sheets (CSS) wird mehr als nur eine Sprache zum Gestalten des Webs. Es entwickelt sich langsam zu einer vollwertigen Sprache, die dynamische Designaspekte verarbeiten kann. CSS kann in vielerlei Hinsicht herkömmliches HTML und JavaScript ersetzen, um Interaktivität und Unabhängigkeit von externen Bibliotheken und Codeausschnitten zu erreichen. Alle Stylings, die wir heute im Web sehen, stammen direkt über CSS. Da der Standard ständig wächst und verbessert wird, ist es wichtiger denn je, den Überblick zu behalten. Webbrowser haben das CSS ähnlich wie HTML gerendert, was manchmal bedeuten kann, dass ältere Browser neue Funktionen nicht unterstützen können.

Der Einstieg in die Frontend-Webentwicklung und das Webdesign ist in den letzten Jahren sicherlich einfacher geworden. Wir sehen viel mehr Tutorials, Anleitungen und Kurse, in die man sich einschreiben kann. Aber letztendlich kommt es auf die Bereitschaft an, mit neu erlernten Fähigkeiten zu arbeiten und sie in realen Projekten anzuwenden. CSS ist eine dieser Skriptsprachen, bei denen der Benutzer bestimmte Muster und Layoutoptionen verwenden muss, um sie auf Sprachen wie JavaScript und HTML anzuwenden. Beim Erstellen einer neuen Website mit HTML und CSS ist es am besten, Schritt für Schritt vorzugehen, um das Gelernte vollständig anzuwenden.

Unser heutiges Ziel ist es, die bekanntesten und modernsten CSS3-Tutorials von führenden Frontend-Entwicklern und -Designern abzudecken. Alle Tutorials hier basieren auf den neuesten Standards, um Ihnen zu einem besseren Webdesign zu verhelfen. Am Ende des Beitrags werden wir auch einige CSS3-Lernressourcen zum weiteren Lernen erwähnen. Um etwas besser zu verstehen, ist es wie bei jeder Programmiersprache am besten, wenn wir uns wiederholende Codierung erlauben, entweder über eine dynamische Online-Plattform oder in unseren eigenen persönlichen Code-Editoren.

Bearbeiten von Bildern in CSS

Die Verwendung von Bildern im Webdesign ist absolut sinnvoll, aber die Geschichte wird technischer. Es macht zwar Spaß, Fotos nach eigenem Geschmack in Ihren Webdesigns zu verwenden, aber manchmal gibt es Dinge, die wir berücksichtigen müssen. Ist die Bilddateigröße für unser Projekt angemessen? Können wir Filter über CSS und nicht über externe Apps wie Photoshop hinzufügen? Was können wir wirklich mit CSS tun, damit unsere Fotos besser aussehen? Una Kravets nimmt uns mit auf eine 15-minütige Fahrt. Darin hält sie einen Vortrag über CSS-Bildbearbeitung und wie wir CSS transformieren können, um eher wie eine eigenständige Bildbearbeitungssoftware-Plattform zu agieren, anstatt nur Designaspekte zu manipulieren.

Verwenden von modernem CSS zum Erstellen eines responsiven Bildrasters

Weiter mit dem Thema Bilder, hier haben wir George Martsoukos. Er präsentiert uns ein einfaches, leichtgewichtiges Tutorial zur Verwendung moderner CSS3-Funktionen zum Erstellen responsiver Bildraster. Bei Bildrastern (oder manchmal auch Galerien genannt) geht es darum, visuellen Inhalt im Kontext eines Rasters anzuzeigen. Diese Art von Rastern sind nützlich für diejenigen, die ihre Fotografien teilen oder ein Bildraster verwenden, um ihre Portfolioelemente zu erweitern. In diesem Tutorial führt uns George durch den Prozess, um sicherzustellen, dass die von uns erstellten Grids gleichermaßen auf Desktop- und mobile Anwendungen reagieren.

CSS-Layout lernen

Bei Webdesign dreht sich alles um Layouts. Wir erstellen ein Layout und verwenden dann andere verfügbare Elemente und Funktionen, um es zu stylen und darauf aufzubauen. Und es ist eine bekannte Tatsache, dass viele Webdesign-Layouts vollständig von CSS abhängig sind. Das Erlernen von CSS ermöglicht es uns, mehr über Website-Layouts und ihre Funktionsweise zu erfahren. Aber wenn Sie das Wissen noch nicht haben, Mikito Takada hat ein Online-Buch geschrieben, das in 5 verschiedene Kapitel unterteilt ist, wie man Layouts mit CSS3 richtig erstellt. Er spricht über die Positionierung und auch das Ausrichten verschiedener Boxelemente, um mit der Erstellung der Rasterelemente zu beginnen. Er geht jetzt ausführlicher auf die Positionierung und die verfügbaren Funktionen ein. Die letzten beiden Kapitel widmet er Flexbox (CSS-Funktion). Es gibt auch einen Bericht über die besten CSS-Styling-Tipps und -Tricks aus seiner eigenen Reise als Webdesigner.

CSS-Refresh-Notizen

Notizen und Styleguides sind die treibende Kraft für viele Webdesigner. Es ist sehr wichtig, dass wir daran denken, unsere eigenen Lieblingsnotizenressourcen für eine leichtere zukünftige Bezugnahme beiseite zu legen. Und was CSS3 betrifft, gehören die CSS Refresh Notes zu den Favoriten der GitHub-Community; Hunderte von Sternen und viel Community-Input, um diese Ressource zu erweitern, um die beste zu sein, die es gibt. CSS Refresh Notes konzentriert sich auf die wichtigsten Aspekte der CSS3-Entwicklung. Es ermöglicht Designern auch, schnell auf Referenznotizen für die meisten CSS3-Funktionen zuzugreifen. Ob es um Positionierung oder Selektoren geht, bei denen Sie Hilfe benötigen, vielleicht Medienabfragen für responsives Design oder wie Sie SVG am besten in Ihren CSS3-Designmustern verwenden – diese Hinweise werden Ihnen auch dann nützlich sein, wenn Sie sich nicht sofort so fühlen.

Variablen: Das Rückgrat der CSS-Architektur

Präprozessoren haben sich in den letzten Jahren stark durchgesetzt, einfache Frameworks und Toolsets, die es Designern ermöglichen, die grundlegende CSS3-Funktionalität um Dinge wie Mixins, Funktionen und Variablen zu erweitern. Die Art von Funktionen, die Sie normalerweise von einer hartcodierten Programmiersprache wie JavaScript erwarten würden. Jeder sollte CSS3 beherrschen, um reibungslos codieren zu können, ohne Präprozessoren zu verwenden. Dennoch bleiben Dinge wie die Zeit der Entwicklung wichtig. Variablen helfen bei der Verwendung von CSS3 in einer dynamischeren Umgebung. Aus diesem Grund hat Karen Menezes einen der umfangreichsten Inhalte zu diesem Thema zusammengestellt, die Sie jemals finden werden.

Entwerfen eines Produktseitenlayouts mit Flexbox

Flexbox ist ein neuer CSS3-Layoutmodus, der Designern helfen soll, ihre Designs für verschiedene Geräte optimal zu optimieren. Die neue Funktion ist für viele noch recht neu und fremd, aber der Einsatz von Flexbox wird in Bereichen wie dem E-Commerce immer beliebter. Dieses CSS3-Tutorial stammt vom Team von Shopify, wo sie einen Bericht darüber erstellen, wie sie es geschafft haben, mit Hilfe von Flexbox eine ihrer neuesten Shopify-Vorlagen zu erstellen, wie der Prozess dauerte und wie das Endergebnis aussah. Wenn Sie den Ruf von Shopify auf dem E-Commerce-Markt kennen und das Tutorial selbst gelesen haben, ist dies möglicherweise einer der praktischsten Leitfäden, die Ihnen helfen, mehr über Flexbox zu erfahren und wie Sie es in Ihren eigenen Webdesigns verwenden können.

Alles, was ich über responsive Webtypografie mit CSS weiß

Wenn Leute an responsives Webdesign denken, denken sie oft darüber nach, eine Standard-Website in etwas zu verwandeln, das mit mobilen Geräten gut funktioniert. Es ist kein falsches Verständnis, aber es steckt sicherlich mehr dahinter. Zell Liew hat einen brillanten Bericht darüber geschrieben, wie Sie mit responsiver Webtypografie arbeiten und was es bedeutet, eine solide Grundlage für Ihre Typografiemuster auf allen Gerätetypen zu schaffen. Unnötig zu erwähnen, dass auch der Kommentarbereich der Tutorials eine große Hilfe geworden ist. Das alles ist dem zusätzlichen Input von anderen Community-Webdesignern zu verdanken.

Einfachste CSS-Diashow

Eine Diashow mit CSS3? Das muss unmöglich sein! Solche Konzepte richten sich meist an Sprachen wie JavaScript oder jQuery. Diese Sprachen machen es einfach, unterwegs dynamische Inhalte zu erstellen. Aber was ist mit CSS3? Jonathan Snook verspricht uns nicht wirklich etwas Neues, sondern gibt uns ein Beispiel dafür, wie wir mit CSS3-Animationseffekten Diashow-Erlebnisse erstellen können, ohne externe Ressourcen wie beispielsweise JavaScript verwenden zu müssen. Sein kleines Einführungs-Tutorial in CSS3-Animationen ist das perfekte Beispiel dafür, wie Kreativität den Zweifel übertrumpft.

CSS-Module – Lösungen für die Herausforderungen von CSS in großem Maßstab

Es ist unvermeidlich, dass CSS über seine derzeitigen Grenzen hinaus wächst, ähnlich wie es JavaScript getan hat. Wenn wir auf die sehr alte Vergangenheit von CSS zurückblicken, sind wir weit davon entfernt, Farben und Elementdarstellungen zu manipulieren. Heutzutage bietet CSS eine viel komplexere Toolbox für Entwickler, die in einer einzigen Sprache leben möchten, um all ihre Aufgaben zu erledigen Entwicklungsaufgaben. CSS-Module sollen Entwicklern dabei helfen, ihren CSS-Code besser auszurichten, der dann skaliert werden kann, wenn die App oder das Projekt außer Kontrolle gerät. In diesem großartigen Tutorial erklärt uns Tom Cornilliac, wie wir verschiedene Stylesheets kombinieren und sie als Module für unsere Projekte verwenden können, die wir über Frameworks wie React starten. Wer hätte gedacht, dass es so einfach ist, Stylesheets zu importieren und auf ihre vordefinierten Funktionen zuzugreifen.

Inhaltsanzeigemuster

Inhalt ist alles. Selbst diejenigen Websites, denen die entsprechenden Fähigkeiten zur Website-Präsentation fehlen und die dennoch in der Lage sind, eine hohe Inhaltsqualität aufrechtzuerhalten, werden normalerweise am häufigsten verwendet. Gute Beispiele dafür sind Websites wie Reddit und Hacker News – Websites mit hohem Inhalt, ohne wirkliche Durchsetzungen im Design der Websites. Bei Inhaltsanzeigemustern geht es nicht um Anzeigemuster, sondern darum, wie das gesamte Inhaltselementdesign zusammenarbeitet, um ein Surferlebnis zu bieten, das vollständig zwischen der Inhaltsanzeige und dem eigentlichen Inhalt integriert ist. Dieses Tutorial von Dan Mall ist einer der prägnantesten Leitfäden zu Anzeigemustern von Inhalten, und sein Erfahrungsbericht spricht für sich selbst – nachdem er an Redesign-Projekten für Websites wie TechCrunch gearbeitet hat, und selbst wir müssen zugeben, dass das neue TechCrunch-Design ziemlich schlank ist!

Beschnittene Elemente in SVG animieren

SVG- und CSS3-Animationen gehören derzeit zu den angesagtesten Themen in der Webentwicklung. Dies ist der Tatsache zu verdanken, dass wir beginnen, uns von der Notwendigkeit zu entfernen, umfangreiche Bild- und Animationsdateien zur Anzeige unserer Inhalte zu verwenden, und stattdessen lernen Designer, diese genauen Animationen mit nativen Sprachen für den Browser nachzuahmen. Dennis Gaebel Jr. gibt uns einen Überblick über die Verwendung von CSS-Clipping, um atemberaubende Animationseffekte zu erzielen, zusätzlich zu atemberaubenden Vektorvisualisierungen.

Ausdrucksstarkes CSS

Expressiv ist in der Entwickler-Community seit geraumer Zeit ein geprägter Begriff. Es ist ein Begriff, der lose aus dem Konzept der Ausdruckskraft in Programmiersprachen entlehnt ist. Eine Programmiersprache wird im Allgemeinen als ausdrucksstark angesehen, wenn Sie Ihre Gedanken auf natürliche Weise in leicht verständlichem Code ausdrücken können. Im Allgemeinen ist „ausdrucksvoll“ nichts Neues, und Entwickler haben schon seit Jahren darüber gesprochen, aber jedes Mal, wenn eine neue Funktion in freier Wildbahn veröffentlicht wird, brauchen Entwickler und insbesondere Designer einige Zeit, um sich an ihren ausdrucksstarken Workflow anzupassen, also manchmal Projekte können unordentlich werden und sich in zu vielen Funktionen verfangen, die versuchen, alle auf einmal zu arbeiten. Expressive ist der einfache Ansatz zum Schreiben von Code, der gut funktioniert, gut aussieht und einfach zu warten ist. Verwenden Sie dies als Styleguide und vergessen Sie nicht, dem Autor Ihre Dankbarkeit auszudrücken; John Polacek.

Animation im Responsive Design

Wie in diesem Artikel bereits gezeigt, sind Animationen und Responsive zwei sehr heiße Themen für Designer, und die Kombination beider wird immer interessanter für diejenigen, die die Grenzen der modernen Webentwicklungsfähigkeiten wirklich austesten möchten. Val Head veröffentlichte einen sehr aufschlussreichen Artikel über die Verwendung von CSS3-Animationen in responsiven Webdesigns und wie man diese Animationen am besten so präsentiert, dass sie ihren Wert nicht verlieren. Besetzt den Artikel mit mehreren Showcase-Demos von anderen erfolgreichen Websites, die ihre Animationen sowohl auf Desktop- als auch auf mobilen Geräten etabliert haben.

Warum ich von nativen CSS-Variablen begeistert bin

Benutzerdefinierte CSS-Eigenschaften, auch bekannt als Variablen, die CSS3-Entwicklern helfen, den CSS3-Entwicklungsprozess zu beschleunigen, indem dynamische Funktionen aktiviert werden. Präprozessoren tun dies schon seit einiger Zeit, und viele haben sich bereits auf die Idee eingestellt, einen Präprozessor dauerhaft zu verwenden, aber alle diese Funktionen (im Standard verfügbar) werden unweigerlich ihren Weg in moderne Browser finden, denn nichts ist besser, als in native Umgebung, ohne sich um Wartung und Zuverlässigkeit externer Software kümmern zu müssen. Philip Walton, ein Google-Ingenieur, hat sich seine wertvolle Zeit genommen, um eine sehr aufschlussreiche Arbeit über die neue CSS-Funktion zusammenzustellen und warum die Community solche Änderungen annehmen und sich nicht um dumme Dinge wie das Aussehen der Syntax kümmern sollte.

Twitters Herzanimation in vollem CSS

Twitter war überall in den Nachrichten, und das aus vielen guten Gründen. Einer dieser Gründe war, dass Twitter beschloss, den „Favorite“-Button mit einem „Love“-Symbol zu versehen. Es ist ein mutiger, aber notwendiger Schritt, um eine stärker gemeinschaftsorientierte Atmosphäre rund um die Website zu schaffen. Die Ankündigung erfolgte auf einem der offiziellen Twitter-Konten durch ein animiertes GIF-Bild. Es zeigte eine coole "Herzspritzer"-Animation, die von Text begleitet wurde. Nicolas Escoffier, ein Designer, wollte sehen, ob er in der Lage wäre, eine ähnliche Animation mit reinem CSS3 zusammenzuhacken, und raten Sie mal – er war erfolgreich und die Community könnte nicht glücklicher sein!

Im Ernst, verwenden Sie Symbolschriftarten

SVG macht das Web zu einem besseren Ort. Auch wenn Entwickler bis heute die Tatsache berücksichtigen müssen, dass viele immer noch mit veralteten Versionen mobiler Betriebssysteme im Internet surfen, und solche Einblicke erfordern, dass der Entwickler besonders hart arbeitet, damit die Dinge funktionieren. Icon-Fonts werden immer noch von anderen gelernt. Diese Funktion wird jedoch in den modernen Entwicklermärkten sehr beliebt, in denen Entwickler Erfahrungen erstellen möchten, mit denen die Arbeit nahtlos und angenehm ist.

CSS-Produktvergrößerung — ohne JavaScript

Im E-Commerce ist es das Zoomen, aber auch die Vergrößerung, die es Kunden ermöglicht, näher an das Produkt heranzuzoomen und seine für das Auge weniger sichtbaren Aspekte zu erkunden. Es ist definitiv ein cooler Effekt, aber für viele ist er entscheidend für den Erfolg ihres Unternehmens. Michael Weaver ist ein CSS3-Hacker, der die Idee hatte, ein Vergrößerungs-Widget ohne die Verwendung von JavaScript-Code zu erstellen, eine Leistung, die er erfolgreich vollbracht hat, und jetzt kann jeder seinen Code durchsuchen und ähnliche Widgets auf seinen Websites erstellen.

Wirklich ansprechende Tabellen mit CSS3 Flexbox

Tabellen helfen uns, unsere Informationen freundlicher auszurichten. Manchmal wird ein gut gestaltetes Tabellenelement nicht einmal als solches angezeigt. Aber mit der Erweiterbarkeit von jQuery, HTML5 und JavaScript können wir unsere Tabellen so gestalten, dass sie sich eher wie Excel-Dokumente als alles andere verhalten. Vasan Subramanian hat ein fundiertes Tutorial zur Verwendung der Flexbox-Funktion von CSS3 veröffentlicht, um beeindruckende und reaktionsschnelle Tabellen für Ihr nächstes Website- oder App-Projekt zu erstellen.

CSS-Bereitstellung optimieren

Im letzten CSS3-Tutorial dreht sich alles um Geschwindigkeit und wie wir unsere Stylesheets besser codieren können, um zumindest eine Geschwindigkeitssteigerung über das Übliche hinaus zu gewährleisten. Optimize CSS Delivery ist ein technischer Styleguide, der zeigt, wie man nativen CSS-Code schreibt, ohne die Ressourcen zu beeinträchtigen. CSS zu schreiben sollte Spaß machen, darum geht es in diesem Tutorial.

Lernressourcen für modernes CSS3

Ohne eine angemessene Grundlage kann das Lernen aus Tutorials manchmal ziemlich entmutigend sein. Es macht Sinn, ein Tutorial kann nur so viel für ein bestimmtes Thema abdecken, bevor ihm die Puste ausgeht, Tutorials sind für diejenigen, die schon etwas gebaut haben und diese Projekte mit neuen Funktionen, interessanten Konzepten und anderen inspirierten Möglichkeiten erweitern möchten durch die Gemeinde. Und damit Sie die CSS3-Tutorials, über die wir in diesem Beitrag gesprochen haben, besser verstehen können, werden wir einige wirklich großartige und kostenlose Ressourcen zum Online-Lernen von CSS3 (auch modern) auflisten.

Das komplette CSS3-Tutorial

Auch hier betonen wir die Notwendigkeit, Tutorial-Ressourcen zu präsentieren, die Ihnen helfen, alles über CSS zu lernen. Diese Ressource ist ein vollständiges CSS3-Tutorial, das über CSS3-Funktionen und ihre Verwendung in der realen Welt spricht. In diesem Tutorial wurden die Selektoren, erweiterten Selektoren, Box-Modelle, Texte und Schriftarten sowie andere Funktionen ausführlich behandelt, mit einer Vielzahl von Beispielen, mit denen Sie anfangen können, herumzuspielen. Jeder, der mit der CSS-Entwicklung beginnt, wird schnell in der Lage sein, seine Fortschritte mit nur wenigen einfachen Projekten zu realisieren.

CSS-Tutorial

W3Schools ist die Heimat der Frontend-Entwicklung für Anfänger. Diese Ressource hat Millionen und Abermillionen von Entwicklern geholfen, bestimmte Teile von HTML und CSS besser zu verstehen. Es bietet auch kostenlose Lerninhalte, die Sie sonst nirgendwo finden. W3Schools ist der perfekte CSS-Lernort für diejenigen, die mit dem Web wirklich unerfahren sind und sich schnell einarbeiten möchten.

HTML und CSS

Sie können CSS3 oder HTML5 nicht von Grund auf lernen und Codecademy nicht ausprobieren. Sogar der Abschnitt mit den Erfahrungsberichten ist voll von Rezensionen darüber, wie Menschen nach Abschluss ihres Studiums mit Codecademy großartige und gut bezahlte Jobs finden konnten. Viele der Tutorial-Sites lehren die direkte Syntax anhand von Codebeispielen. Auf der anderen Seite "zwingt" Sie Codecademy, mit Code herumzuspielen. Dies geschieht durch direkte und interaktive Aufgaben, die von den Personen, die hinter jedem Lernkurs stehen, zugewiesen werden. Solche Plattformen sind sehr beliebt geworden und stehen mittlerweile für fast jede Programmiersprache da draußen. Eine sehr effektive Art zu lernen, ohne Frage.

CSS-Layout lernen

Wir haben bereits in diesem Beitrag zuvor erfahren, dass das Layout die Grundlage von CSS3 ist. Aber jetzt ist es an der Zeit, dieses Konzept wirklich auf die Probe zu stellen. Sehen wir uns ein futuristisches Beispiel dafür an, wie CSS3-Layout-Eigenschaften funktionieren und was wir mit ihnen machen können. Nehmen Sie sich ein paar Tage Zeit, um dieses Tutorial abzuschließen. Danach sind Sie auf einem soliden mittleren Niveau des Verständnisses von Layout-Eigenschaften und ihrer Verwendung.

CSS – Das Web lernen

Das Mozilla Developer Network bleibt eine der führenden Quellen für alles, was mit HTML5, CSS3 und JavaScript zu tun hat. Das vollständig von der Community gesteuerte MDN bietet Styleguides für alle genannten Sprachen, die für Ihr Lerntempo und Ihr allgemeines Verständnis von CSS3 am besten geeignet sind.