So erstellen Sie eine Website oder ein Blog im Jahr 2020 - Kostenlose und einfache Anleitung zum Erstellen einer Website

Fragmente des himmlischen Codes, die den Himmel und den Weltraum feiern

Die natürliche Welt war schon immer eine großartige Inspirationsquelle. Und wir können einige seiner erstaunlichsten Wunder sehen, die in den Himmel schauen.

Ein kristallklarer blauer Himmel an einem sonnigen Tag, die Sterne funkeln nachts. Auch die Gedanken an die Erforschung des Weltraums und unsere Galaxie regen unsere Vorstellungskraft an. Was über uns liegt, bringt sowohl eine alltägliche Realität als auch Neugier auf das Unbekannte.

Es überrascht nicht, dass einige sehr kreative Entwickler Himmel und Raum als Experimentierobjekt verwendet haben. Die potenzielle Verwendung von Licht, Farbe, Bewegung und den neuesten Webtechnologien ist eine natürliche Ergänzung.

Heute werden wir Ihnen einige erstaunliche Beispiele vorstellen, die auf die eine oder andere Weise Himmel und Raum nutzen. Sie reichen von wissenschaftlicher Präzision bis zur reinen Fantasie. Viel Spaß!

Scrolle runter in den Himmel

Der Parallaxenverschiebungseffekt ist heutzutage überall. Es ist einer dieser Trends, der ein Eigenleben angenommen hat. Dies ist jedoch eines der einzigartigsten und überzeugendsten Beispiele, die wir je gesehen haben. Wenn Sie auf der Seite nach unten scrollen, werden die Wolken in 3D gescrollt, während eine sich ändernde Hintergrundfarbe den Eindruck erweckt, als würden Sie in Richtung Erde fallen.

Siehe den Stift
Canvallax Demo: Parallax Sky Background von Shaw

Karte zu den Sternen

Was diese Sternenkarte so interessant macht, ist die auf CSS und JavaScript basierende Interaktivität. Klicken Sie auf ein System und fokussieren Sie mit glatten Übergängen wie Seide. Die Karte zeigt auch eine simulierte Umlaufbahn und einige lustige Emojis wie das i-Tüpfelchen.

Siehe den Stift
CSS Star Maps von Scott Weaver (@ sweaver2112)

Nordlichter

Eines der wahren Wunder des Universums, das Nordlicht (Aurora Borealis), sehen nicht viele von uns persönlich. Aber zumindest können wir versuchen, die Erfahrung neu zu erschaffen. Hier kann eine reine CSS-Version eines hellgrünen und lila Nachthimmels Ihren Bildschirm beleuchten.

Siehe den Stift
Reines CSS-Nordlicht? 😎 von Jhey

Die Sonne geht im Netz unter

Ein beeindruckender Sonnenuntergang ist im Gegenteil etwas, das fast jeder erleben kann. Aber das macht es nicht weniger blendend. Mit diesem Snippet können Sie den Sonnenuntergang zu jeder Tageszeit in Bewegung setzen, indem Sie einfach auf die große gelbe Kugel klicken. Die wechselnden Farben erzeugen einen auffälligen Effekt.

Siehe den Stift
Aleksandra Sonnenuntergang

Die Stadt der Nachtlichter

Möchten Sie wissen, wann der Vollmond in Paris, Frankreich, scheint? Diese entzückende Animation erzählt Ihnen und gibt Ihnen einen Blick auf das Eiffelturmfenster. Das einzige Rätsel dabei ist, ob die gemütliche schwarze Katze etwas Besonderes tut, wenn die Veranstaltung eintrifft.

Siehe den Stift
Vollmond in Paris? von Paulina Hetman

Reines CSS Saturn

Saturnringe sind eine massive Quelle der Faszination unter uns Menschen. Diese reine CSS-Darstellung des Planeten bietet eine etwas andere Ansicht. Es ist dunkel und die Ringe sind nicht so auffällig wie gewöhnlich. Aber es ist ein schönes Beispiel dafür, wie CSS-Verläufe uns helfen können, erstaunliche Kunst zu produzieren.

Siehe den Stift
Saturn 🪐 von Luciano Felix

Annäherung an die Sonne

Die Verwendung von WebGL macht diese Solaranimation nicht von dieser Welt. Beachten Sie die verschwommenen Effekte am Rand des Bildschirms, wenn die Sonne vom oberen Bildschirmrand untergeht. Der Detaillierungsgrad hier ist einfach unglaublich. Glücklicherweise gibt es keine Hitze durch den Bildschirm.

Siehe den Stift
Scott Weaver Solar

Farben für jeden Himmel

Unsere Sammlung wird durch ein Fragment ergänzt, das etwas nützlicher ist. Es handelt sich um eine Reihe wunderschöner CSS-Verläufe, mit denen Sie verschiedene Himmelsfarbkombinationen reproduzieren können. Sie finden alles aus der Dunkelheit der Nacht, dem Sonnenaufgang, dem Sonnenuntergang und dem perfekten Blau des Mittags.

Siehe den Stift
Himmelsverläufe von zessx

Erkundung des Himmels durch Code

Wie die obigen Codefragmente zeigen, können der Himmel und der Weltraum dem Web Elemente von Spaß und Schönheit hinzufügen. Unabhängig davon, ob sie unsere Welt neu erschaffen oder uns neue zeigen möchten, bieten sie eine einzigartige Möglichkeit, die Benutzererfahrung zu verbessern.

Möchten Sie weitere Beispiele sehen? Schauen Sie sich unsere CodePen-Kollektion an!