Die 20 besten CSS3-Tutorials zur Verbesserung Ihrer Webentwicklungsfähigkeiten
Veröffentlicht: 2022-05-06Cascading Style Sheets (CSS) wird mehr als nur eine Sprache zum Gestalten des Webs. Es entwickelt sich langsam zu einer vollwertigen Sprache, die mit dynamischen Designaspekten umgehen kann. In vielerlei Hinsicht kann CSS herkömmliches HTML und JavaScript ersetzen, um Interaktivität und Unabhängigkeit von externen Bibliotheken und Codeschnipseln zu erreichen. Alle Stile, die wir heute im Web sehen, sind direkt über CSS. Da der Standard weiter wächst und sich verbessert, 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.
In den letzten Jahren ist der Einstieg in die Frontend-Webentwicklung und das Webdesign einfacher geworden. Wir sehen viel mehr Tutorials, Leitfäden und Kurse, für die man sich anmelden kann. Aber letztendlich kommt es darauf an, mit neu erlernten Fähigkeiten zu arbeiten und sie in realen Projekten anzuwenden. CSS ist eine dieser Skriptsprachen, bei der der Benutzer bestimmte Muster und Layoutoptionen verwenden muss, um sie auf Sprachen wie JavaScript und HTML anzuwenden. Wenn Sie eine neue Website mit HTML und CSS erstellen, ist es am besten, Schritt für Schritt zu arbeiten, um das Gelernte vollständig anzuwenden.
Heute ist es unser Ziel, die prominentesten und modernsten CSS3-Tutorials von führenden Front-End-Entwicklern und -Designern abzudecken. Alle Tutorials hier basieren auf den neuesten Standards, um Ihnen zu helfen, ein besseres Webdesign zu werden. Am Ende des Beitrags werden wir auch ein paar CSS3-Lernressourcen zum weiteren Lernen erwähnen. Wie bei jeder Programmiersprache sollten wir uns erlauben, etwas wiederholt zu programmieren, um etwas besser zu verstehen, entweder über eine dynamische Online-Plattform oder in unseren 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 Ihrer Wahl in Ihren Webdesigns zu verwenden, aber manchmal gibt es Dinge, die wir berücksichtigen müssen. Ist die Größe der Bilddatei für unser Projekt geeignet? Können wir Filter über CSS statt über externe Apps wie Photoshop hinzufügen? Was können wir mit CSS tun, damit unsere Fotos besser aussehen? Una Kravets nimmt uns mit auf eine 15-minütige Reise. Darin spricht sie über CSS-Bildbearbeitung und wie wir CSS so umwandeln können, dass es eher wie eine eigenständige Bildbearbeitungssoftwareplattform funktioniert, anstatt nur eine Möglichkeit, Designaspekte zu manipulieren.
Verwenden von modernem CSS zum Erstellen eines responsiven Bildrasters
Um mit dem Thema Bilder fortzufahren, hier haben wir George Martsoukos. Er präsentiert ein einfaches, leichtgewichtiges Tutorial zur Verwendung moderner CSS3-Funktionen zum Erstellen responsiver Bildraster. Bei Bildrastern (oder manchmal auch Galerien genannt) geht es darum, visuelle Inhalte im Kontext eines Rasters anzuzeigen. Diese Arten von Rastern werden für diejenigen nützlich, die ihre Fotografie 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.
Anmerkungen zur CSS-Auffrischung
Hinweise und Styleguides sind die treibende Kraft für viele Webdesigner. Wir müssen daran denken, unsere bevorzugten Notizressourcen für eine einfachere zukünftige Bezugnahme beiseite zu legen. Und was CSS3 angeht, gehören die CSS Refresh Notes zu den Favoriten der GitHub-Community; Hunderte von Sternen und jede Menge Community-Input, wie man diese Ressource erweitern kann, um die beste zu sein, die es gibt. CSS Refresh Notes konzentriert sich auf die wichtigsten Aspekte der CSS3-Entwicklung. Außerdem können Designer schnell auf Referenznotizen für die meisten CSS3-Funktionen zugreifen. Ob es um die 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 sich als nützlich erweisen, auch wenn Sie das nicht so sehen.
Variablen: Das Rückgrat der CSS-Architektur
In den letzten Jahren haben sich Präprozessoren durchgesetzt, einfache Frameworks und Toolsets, die es Designern ermöglichen, die grundlegende CSS3-Funktionalität mit Mixins, Funktionen und Variablen zu erweitern. Sie würden normalerweise erwarten, die Art von Funktionen in einer fest codierten Programmiersprache wie JavaScript zu sehen. Jeder sollte CSS3 beherrschen, um reibungslos ohne Präprozessoren zu programmieren. 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 eCommerce immer beliebter. Dieses CSS3-Tutorial stammt vom Team von Shopify, wo sie darüber berichten, wie sie es geschafft haben, eines ihrer neuesten Shopify-Templates mit Hilfe von Flexbox zu erstellen, wie der Prozess gedauert hat und wie das Endergebnis aussah. Da Sie den Ruf von Shopify auf dem E-Commerce-Markt kennen und sich selbst dem Tutorial hingeben, könnte dies einer der praktischsten Leitfäden sein, um Ihnen zu helfen, mehr über Flexbox zu erfahren und wie Sie damit beginnen können, es in Ihren eigenen Webdesigns zu verwenden.
Einfachste CSS-Diashow
Eine Slideshow mit CSS3? Das muss unmöglich sein! Solche Konzepte zielen meist auf Sprachen wie JavaScript oder jQuery ab. Diese Sprachen machen es einfach, unterwegs dynamische Inhalte zu erstellen. Aber was ist mit CSS3? Jonathan Snook verspricht uns nichts Neues, sondern gibt uns ein Beispiel dafür, wie wir CSS3-Animationseffekte verwenden können, um Diashow-Erlebnisse zu erstellen, ohne externe Ressourcen wie zum Beispiel JavaScript verwenden zu müssen. Sein kleines Einführungstutorial zu CSS3-Animationen ist das perfekte Beispiel dafür, wie Kreativität Zweifel übertrumpft.
CSS-Module – Lösung der CSS-Herausforderungen im großen Maßstab
CSS wird unweigerlich über seine derzeitigen Grenzen hinauswachsen, ä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 manipulieren zu können. Heutzutage bietet CSS eine viel komplexere Toolbox für Entwickler, die sich in einer einzigen Sprache aufhalten 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 Anwendung oder das Projekt außer Kontrolle zu geraten beginnt. In diesem großartigen Tutorial erklärt 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 das Importieren von Stylesheets und der Zugriff auf ihre vordefinierten Funktionen einfach wäre.
Beschnittene Elemente in SVG animieren
SVG- und CSS3-Animationen gehören zu den Trendthemen in der Webentwicklung. Dies ist der Tatsache zu verdanken, dass wir uns allmählich von der Notwendigkeit entfernen, umfangreiche Bilder und Animationsdateien zur Anzeige unserer Inhalte zu verwenden, und stattdessen lernen Designer, wie sie genau diese Animationen mit nativen Sprachen für den Browser nachahmen können. Dennis Gaebel Jr. gibt uns einen Überblick über die Verwendung von CSS-Clipping, um beeindruckende Animationseffekte zu erzielen, und die Verwendung von beeindruckenden Vektor-Visuals.
Ausdrucksstarkes CSS
Expressive ist seit geraumer Zeit ein geprägter Begriff in der Entwickler-Community. Es ist ein Begriff, der dem Konzept der Ausdruckskraft in Programmiersprachen entlehnt ist. Eine Programmiersprache gilt im Allgemeinen als ausdrucksstark, wenn sie es Ihnen ermöglicht, Ihre Gedanken auf natürliche Weise in leicht verständlichem Code auszudrücken. „Expressiv“ ist im Allgemeinen nichts Neues. Entwickler haben darüber schon seit Jahren gesprochen. Dennoch dauert es jedes Mal, wenn eine neue Funktion in freier Wildbahn veröffentlicht wird, einige Zeit, bis sich Entwickler und insbesondere Designer an ihren ausdrucksstarken Arbeitsablauf gewöhnt haben. Daher können Projekte manchmal völlig chaotisch werden und in zu viele Funktionen verwickelt werden, die versuchen, alle gleichzeitig zu arbeiten. Expressive ist der leichtgewichtige Ansatz zum Schreiben von Code, der gut funktioniert, gut aussieht und einfach zu warten ist. Verwenden Sie dies als Stilrichtlinie und vergessen Sie nicht, dem Autor Ihre Dankbarkeit auszudrücken; Johannes Polacek.
Animation im Responsive Design
Wie Sie bereits im gesamten Artikel erfahren haben, sind Animationen und Responsive zwei sehr heiße Themen für Designer, und die Kombination der beiden wird immer interessanter für diejenigen, die die Grenzen der modernen Webentwicklungsfähigkeiten wirklich testen 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 präsentiert, wo sie ihren Wert nicht verlieren. Belegt wird der Artikel mit mehreren Showcase-Demos von anderen erfolgreichen Webseiten, die ihre Animationen auf Desktop- und Mobilgeräten etabliert haben.
Warum ich von nativen CSS-Variablen begeistert bin
Benutzerdefinierte CSS-Eigenschaften, auch als Variablen bekannt, helfen CSS3-Entwicklern, den CSS3-Entwicklungsprozess zu beschleunigen, indem dynamische Funktionen aktiviert werden. Präprozessoren machen das schon seit einiger Zeit. Viele haben sich bereits auf die Idee eingestellt, einen Präprozessor dauerhaft zu verwenden. Dennoch werden all diese Funktionen (im Standard verfügbar) zwangsläufig ihren Weg in moderne Browser finden. Nichts ist besser, als in einer nativen Umgebung zu entwickeln und sich nicht um die 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 zu erklären, warum die Community solche Änderungen annehmen und sich keine Gedanken über dumme Dinge wie das Erscheinungsbild der Syntax machen sollte.
Herzanimation von Twitter in vollständigem CSS
Twitter war in allen Nachrichten, und das aus vielen guten Gründen. Einer dieser Gründe war, dass Twitter beschlossen hat, den „Favoriten“-Button durch ein „Liebe“-Symbol zu ersetzen. Es ist ein mutiger, aber notwendiger Schritt, um auf der Website ein stärker gemeinschaftsorientiertes Gefühl zu schaffen. Die Ankündigung erfolgte über ein animiertes GIF-Bild auf einem der offiziellen Twitter-Konten. Es zeigte eine coole „Herzspritzer“-Animation, begleitet von Text. Nicolas Escoffier, ein Designer, war daran interessiert zu sehen, ob er in der Lage wäre, eine ähnliche Animation mit reinem CSS3 zusammenzuhacken, und raten Sie mal – es gelang ihm, und die Community könnte nicht glücklicher sein!
Im Ernst, verwenden Sie Icon-Fonts
SVG macht das Web zu einem besseren Ort. Auch wenn Entwickler die Tatsache berücksichtigen müssen, dass viele immer noch mit veralteten Versionen mobiler Betriebssysteme im Internet surfen, und solche Einblicke erfordern, dass die Entwickler besonders hart arbeiten, damit die Dinge funktionieren. Andere lernen immer noch Icon-Fonts. Aber diese Funktion wird in den modernen Entwicklermärkten immer beliebter, wo Entwickler nahtlose und angenehme Erfahrungen schaffen wollen, mit denen sie arbeiten können.
CSS-Produktvergrößerung – ohne JavaScript
Im E-Commerce ermöglichen Zoom-in und Vergrößerung Kunden, näher an das Produkt heranzuzoomen und seine weniger sichtbaren Aspekte zu erkunden. Es ist ein cooler Effekt, aber für viele ist es für den Erfolg ihres Unternehmens unerlässlich. Michael Weaver ist ein CSS3-Hacker, der auf die Idee gekommen ist, ein Vergrößerungs-Widget ohne Verwendung von JavaScript-Code zu erstellen, eine Leistung, die er vollbracht hat. Jetzt kann jeder seinen Code durchsuchen und ähnliche Widgets auf seinen Websites erstellen.
Really Responsive Tables mit CSS3 Flexbox
Tabellen helfen uns, unsere Informationen freundlicher auszurichten. Manchmal erscheint ein gut gestaltetes Tabellenelement nicht einmal als solches. 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 tiefgreifendes Tutorial zur Verwendung der Flexbox-Funktion von CSS3 veröffentlicht, um beeindruckende und ansprechende Tabellen für Ihr nächstes Website- oder App-Projekt zu erstellen.
Optimieren Sie die CSS-Bereitstellung
Im letzten CSS3-Tutorial dreht sich alles um Geschwindigkeit und darum, wie wir unsere Stylesheets besser codieren können, um zumindest eine gewisse Geschwindigkeitssteigerung über das Gewöhnliche hinaus zu garantieren. Optimize CSS Delivery ist ein technischer Styleguide, der zeigt, wie man nativen CSS-Code schreibt, ohne Ressourcen zu gefährden. Das Schreiben von CSS soll Spaß machen, darum geht es in diesem Tutorial.
Lernressourcen für modernes CSS3
Ohne eine angemessene Grundlage kann sich das Lernen aus Tutorials manchmal ziemlich entmutigend anfühlen. Es macht Sinn, ein Tutorial kann nur so viel für ein bestimmtes Thema abdecken, bevor es an Schwung verliert, Tutorials sind für diejenigen, die schon einmal etwas gebaut haben und diese Projekte mit neuen Funktionen, interessanten Konzepten und anderen inspirierten Möglichkeiten erweitern möchten durch die Gemeinde. Und um Ihnen zu helfen, die CSS3-Tutorials, über die wir in diesem Beitrag gesprochen haben, besser zu verstehen, 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, Boxmodelle, Texte und Schriftarten und andere Funktionen ausführlich besprochen, mit einer Menge Beispiele, 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 Front-End-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 werden. W3Schools ist der perfekte CSS-Lernort für diejenigen, die wirklich unerfahren im Web sind und schnell auf den neuesten Stand kommen möchten.
HTML und CSS
Sie können CSS3 oder HTML5 nicht von Grund auf lernen, ohne Codecademy auszuprobieren. Sogar der Bereich Erfahrungsberichte ist voll von Bewertungen darüber, wie Menschen nach Abschluss ihres Lernens bei Codecademy großartige und gut bezahlte Jobs finden konnten. Viele der Tutorial-Sites lehren die direkte Syntax durch Codebeispiele. Auf der anderen Seite „zwingt“ Codecademy Sie dazu, mit Code herumzuspielen. Dies geschieht durch direkte und interaktive Aufgaben, die von den Personen hinter jedem Lernkurs zugewiesen werden. Solche Plattformen erfreuen sich großer Beliebtheit und sind mittlerweile für nahezu jede Programmiersprache verfügbar. Eine sehr effektive Art zu lernen, ohne Frage.
Lernen Sie CSS-Layout
Wir haben bereits in diesem Beitrag früher gelernt, dass Layout die Grundlage von CSS3 ist. Aber jetzt ist es an der Zeit, dieses Konzept auf die Probe zu stellen. Sehen wir uns ein futuristisches Beispiel an, wie CSS3-Layout-Eigenschaften funktionieren und was wir damit machen können. Nehmen Sie sich ein paar Tage Zeit, um dieses Tutorial abzuschließen. Danach befinden Sie sich auf einem soliden mittleren Niveau im Verständnis von Layout-Eigenschaften und deren Verwendung.
CSS – Das Web lernen
Das Mozilla Developer Network bleibt eine der führenden Quellen für alles rund um HTML5, CSS3 und JavaScript. Das vollständig von der Community geleitete MDN bietet Styleguides für alle genannten Sprachen in einer Weise, die am besten zu Ihrem Lerntempo und Ihrem Gesamtverständnis von CSS3 passt.