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!