Es gibt eine Menge, die Sie nur mit CSS und einem Webbrowser tun können. Große Entwickler lieben es, den Rahmen zu erweitern und zeigen, wie viel möglich ist.
Während experimentelle Projekte nicht immer auf Produktionsstandorten nützlich sind, sind sie unglaublich inspirierend und lehrreich.
Wir haben eine Handvoll CSS-Projekte organisiert, die die wahre Stärke von CSS demonstrieren. Diese werden alle auf CodePen gehostet, so dass Sie den Quellcode sogar studieren und klonen können, um zu sehen, wie sie funktionieren.
Dies Sass Lade Seite verwendet animierte Farbverläufe und veränderbare Elemente, um einen wiederholenden Ladeeffekt zu erzeugen.
Die meisten Leute sollten diese Ladeanimation von Facebook erkennen, die eine kleinere Version dieses vertikalen Balkenladers verwendet. Die meisten Webloader verwenden animierte GIFs, da Bilder mit allen Browsern kompatibel sind.
Dieser CSS3-Ladebalken beweist, dass mit etwas kreativer Denkweise nahezu jeder gewünschte Animationsstil wiederhergestellt werden kann.
Sieh den Stift Balken laden von MaxStalker ( @MaxStalker ) auf CodePen .
Hier ist eines der komplexesten CSS-Projekte, die ich online finden konnte. Diese Dynamik Sonnensystem-Design von Malik Dellidj läuft auf reinem CSS ohne Bilder .
Jeder Planet wird in CSS einschließlich der Rotationsgeschwindigkeiten gerendert. Dieses Projekt soll ein genaues Modell des Sonnensystems sein und sogar einen realistischen interstellaren Hintergrund bieten.
Ich kann mir nicht vorstellen, wie lange das gedauert hat, nur um die Planetensymbole zu machen, geschweige denn die Animationsgeschwindigkeiten richtig zu bekommen. Aber wo ein Wille ist, ist auch ein Weg.
Sieh den Stift Solar System Animation - Pure CSS von Malik Dellidj ( @ Kowler ) auf CodePen .
Ich hätte nie gedacht, dass ich den Tag sehen würde, an dem klassische Minesweeper von Windows gespielt werden könnten mit reinem CSS . Doch dank dem Entwickler Bali Balo ist dieser Tag gekommen.
Beachten Sie, dass dies nicht genau so gut funktioniert wie beim traditionellen Minesweeper, da es die Punkte nicht korrekt speichert. Aber es verfolgt die Zeit genau und es nutzt kein bisschen JavaScript.
Irgendwie sieht sogar die Benutzeroberfläche der ursprünglichen Minesweeper-Benutzeroberfläche erstaunlich ähnlich und alles läuft auf CSS. Auch wenn es vielleicht keine perfekte Nachbildung ist, ist es nahe genug, um mich dazu zu bringen, ein paar Runden zu spielen.
Sieh den Stift Reiner CSS-Minensucher von Bali Balo ( @bali_balo ) auf CodePen .
An der Oberfläche dieser Kippschalter sieht vielleicht ziemlich einfach aus. Es läuft durch eine Checkbox-Eingabe und übergibt Daten an das Backend, obwohl das nicht wirklich der eindrucksvolle Teil ist.
Dieser Toggle verfügt über einige Funktionen, die ihn zu einem der besten Frontend-Ein / Aus-Schalter machen:
Irgendwie fängt dieser Ein / Aus-Schalter jeden Benutzerklick ab und verwendet dieses Ereignis, um den Tag / Nacht-Umschaltbereich in Sicht zu animieren. Die Symbole für Sonne und Mond sind auch schön stilisiert, wenn man bedenkt, dass sie nur auf CSS laufen.
Sieh den Stift Pure Css "Tag und Nacht" umschalten von Benjamin Rethoré ( @bnthor ) auf CodePen .
Traditionelle Mausverfolgung ist die Arbeit von JavaScript, die die X / Y-Koordinaten des Benutzers auf der Seite anzeigt.
Technisch benötigt man immer noch JavaScript um diese Koordinaten zu sammeln und alles Nützliche mit ihnen zu tun. Aber dieser Ausschnitt zeigt, dass Sie eine reine CSS-Mausverfolgungsfunktion entwerfen können, die jeder Bewegung des Benutzers folgt.
Ich kann mir nicht wirklich einen praktischen Nutzen vorstellen, aber es könnte auf einer Streichseite Spaß machen.
Sieh den Stift Experimentelles reines CSS-Maus-Tracking von Momcilo Popov ( @Momciloo ) auf CodePen .
Wir haben alle Vektor-Icons und Illustrationen gesehen für das Web konzipiert . Aber was ist mit ganzseitigen Vektorillustrationen, die mit rohen CSS- und SVG-Code entworfen wurden?
Dies Vergnügungspark Design ist ein experimentelles Projekt, das nur in SVG-unterstützten Browsern funktioniert. Doch in diesen modernen Browsern rendert es einwandfrei und jedes Element hat eine sehr realistische Platzierung auf der Seite.
Die Animationen sind sicherlich beeindruckend, aber es ist die Genauigkeit der SVG-Elemente, die meine Aufmerksamkeit erregen. In ein paar Jahren könnten wir diese Art von Illustrationen im Internet finden, die ausschließlich im Code ohne Bilddateien laufen.
Sieh den Stift Flat Design Vergnügungspark Svg von Lina (Animation powered by CSS) von Vladimir Gashenko ( @ gxash ) auf CodePen .
Entwerfen einer sich wiederholenden CSS-Animation wie das Möbius-Bandkonzept ist ziemlich hart. Aber fügen Sie einige 3D-Elemente und unterschiedliche Farbverläufe hinzu? Jetzt hast du eine echte Herausforderung.
Dieses Snippet ist ziemlich beeindruckend, wenn man bedenkt, wie glatt es aussieht und wie wenig Code verwendet wird (nur 90 Zeilen CSS). Mit Haml benötigen Sie nur 6 Zeilen Code, um das gesamte Konzept zu erstellen.
Ich gebe zu, dass dies auf einer echten Website nicht sehr nützlich wäre, aber es ist ein Beweis dafür, wie viel Sie mit ein paar Dutzend Zeilen HTML und CSS machen können.
Sieh den Stift Möbius 6hedrons (reines CSS) von Ana Tudor ( @ Thebabydino ) auf CodePen .
Nachdem Sie diese Webanwendung für einige Sekunden verwendet haben, können Sie sicher sein, dass sie mit JavaScript ausgeführt wird. Die dynamischen Verhaltensweisen wie 3D-Rotation und Terrain-Platzierung sind Zeichen einer süßen JS-Webapp.
Aber diese Kartenersteller-Benutzeroberfläche von Vincent Durand ist eigentlich 100% reines CSS. Die Pfeile für die Rotation, der Rotationseffekt selbst und alle Click-to-Place-Features laufen auf CSS.
Es ist erwähnenswert, wie das gesamte Konzept auch mit 3D-Cubes dargestellt wird. Die Blöcke selbst arbeiten als 3D-Elemente und Sie können die Würfel einfach durch Schweben drehen.
Ohne Zweifel einer der verrücktesten Anwendungen für CSS, die ich seit langem gesehen habe.
Sieh den Stift Vollständiger CSS Map-Ersteller von Vincent Durand ( @onediv ) auf CodePen .
Dieses Projekt ist etwas weniger interaktiv, aber immer noch genauso atemberaubend. Entwickler Peter Schmiz hat alle Hauptfunktionen neu erstellt iOS 7 App-Symbole Verwendung von reinem HTML und CSS.
Keines dieser Symbole verwendet SVGs oder Bilddateien. Jedes Element in jedem Symbol ist fest in HTML mit einem span / div-Element codiert und dann mit CSS formatiert. Der verrückteste Teil ist, wie genau diese sind!
Das komplette Set enthält 22 Icons und sie sind alle sehr schön. Ich bin sehr beeindruckt von der Liebe zum Detail für Symbole wie Maps und Wetter. Ein weiterer Beweis dafür, dass man mit genügend Zeit und Geduld alles in CSS gestalten kann.
Sieh den Stift iOS 7 Icons mit reinem CSS von Peter Schmiz ( @peterschmitz ) auf CodePen .
Das erneute Erstellen der Slack-Lade-Animation mit CSS3 ist definitiv beeindruckend. Aber dieser Ausschnitt erstellt den Slack-Loader mit nur einem einzelnen Element auf der Seite neu. Das nenne ich Widmung.
Die Gesamt-CSS-Anzahl für dieses Snippet beträgt knapp über 100 Zeilen, einschließlich der Slack-Logo-Farben und der Animationseffekte.
Ich kann nicht sagen, ob diese Idee für andere Ladesymbole funktionieren würde, aber ich bin sicherlich beeindruckt von dieser Idee.
Sieh den Stift Einzelelement Slack loader von CrocoDillon ( @ CrocoDillon ) auf CodePen .
Sie finden Dutzende von benutzerdefinierten 3D-Bar-Designs in CodePen alle mit ihren eigenen Animationen. Aber diese 3D-Balken von Rafael González zeichnet sich durch all die anderen modernen CSS-Balkendiagramme aus.
Jedes dieser Diagramme auf Flexbox laufen Bei Containern wird die Größe automatisch angepasst, je nachdem, wie viele Balken Sie hinzufügen und wie groß der Container ist. Außerdem wird jedes Balkendiagramm animiert, wenn es in den Blickbereich verschoben wird. Alles wird durch reines CSS gesteuert.
Und da die Größe jedes Balkens in ems liegt, können Sie jeden einzelnen Balken so anpassen, dass er auf der Basis der Browserschriftgröße skaliert wird. Ein schönes Beispiel dafür, dass modernes CSS viel flexibler ist als je zuvor.
Sieh den Stift Reine CSS-Balken von Rafael González ( @ rgg ) auf CodePen .