Cennet ve dış mekanı kutlayan göksel kod parçaları

Doğal dünya her zaman büyük bir ilham kaynağı olmuştur. Ve en şaşırtıcı harikalarının bazılarını gökyüzüne bakarken görebiliriz.

Kristal berraklığında mavi gökyüzü güneşli bir günde, yıldızlar gece parıldayan. Uzay araştırmaları ve galaksimiz de hayallerimizi ateşliyor. Üstümüzde olan şey, hem gündelik bir gerçekliği hem de bilinmeyen hakkında merak uyandırıyor.

Şaşırtıcı olmayan bir şekilde, bazı çok yaratıcı geliştiriciler gökyüzü ve alanı deney için bir konu olarak kullandılar. Işık, renk, hareket ve en yeni web teknolojilerinin potansiyel kullanımı doğal bir uyum sağlar.

Bugün size bir şekilde gökyüzü ve mekan kullanan bazı şaşırtıcı örnekler sunacağız. Gamı bilimsel hassasiyetten saf fanteziye kadar çalıştırıyorlar. Tadını çıkarın!

Gökyüzüne ilerleyin

Paralaks kaydırma etkisi bu günlerde her yerde. Kendi başına bir yaşam süren trendlerden biri. Ancak, bu gördüğümüz en benzersiz ve çekici örneklerden biridir. Sayfayı aşağı kaydırmak bulutların 3B kaydırılmasına neden olurken, değişen arka plan rengi onu Dünya’ya doğru düşüyormuş gibi gösterir.

Kalemi görün
Canvallax Demo: Shaw tarafından Paralaks Gökyüzü Arka Plan

Yıldızlarla eşleştirin

Bu yıldız haritasını bu kadar ilginç kılan şey CSS ve JavaScript tabanlı etkileşimdir. Bir sisteme tıklayın ve odaklanın, ipek gibi yumuşak geçişlerle tamamlayın. Harita ayrıca simüle edilmiş bir yörünge yörüngesini ve pastanın üzerindeki krema gibi bazı eğlenceli emojileri gösterir.

Kalemi görün
Scott Weaver CSS yıldız haritaları (@ sweaver2112)

Kuzey ışıkları

Evrenin gerçek harikalarından biri olan kuzey ışıkları (aurora borealis), çoğumuzun şahsen görmediği bir şeydir. Ama en azından deneyimi yeniden yaratmaya çalışabiliriz. Burada, parlak yeşil ve mor bir gece gökyüzünün saf bir CSS sürümü ekranınızı aydınlatabilir.

Kalemi görün
Saf CSS Kuzey Işıkları? 😎 yapan Jhey

Güneş web üzerinde batıyor

Etkileyici bir gün batımı, tam tersine, neredeyse herkesin yaşayabileceği bir şeydir. Ama bu daha az göz kamaştırıcı değil. Bu snippet, büyük sarı küreye tıklayarak günbatımını günün herhangi bir saatinde hareket ettirmenize olanak tanır. Değişen renkler çarpıcı bir etki yaratır.

Kalemi görün
Aleksandra Sunset

Gece ışıkları şehri

Dolunayın Paris, Fransa’da ne zaman parlayacağını bilmek ister misiniz? Bu keyifli animasyon size söyler ve Eyfel Kulesi penceresini görüntüler. Buradaki tek gizem, rahat kara kedinin olay geldiğinde özel bir şey yapıp yapmadığıdır.

Kalemi görün
Paris’te dolunay mı? ile Paulina Hetman

Saf CSS Satürn

Satürn’ün halkaları, insanlar arasında büyük bir hayranlık kaynağıdır. Gezegenin bu sadece CSS gösterimi biraz farklı bir görüş sunar. Karanlık ve halkalar her zamanki gibi belirgin değil. Ancak CSS gradyanlarının şaşırtıcı sanatlar üretmemize nasıl yardımcı olabileceğinin güzel bir örneğini sunuyor.

Kalemi görün
Saturn 🪐 Luciano Felix tarafından

Güneşe yaklaşmak

WebGL kullanmak bu güneş animasyonunu dünyadan çıkarıyor. Güneş ekranın üstünden düştüğünde, kenarındaki bulanık efektlere dikkat edin. Burada ayrıntı seviyesi şaşırtıcı. Neyse ki, ekran boyunca ısı yok.

Kalemi görün
Scott Weaver Solar

Her gökyüzü için renkler

Koleksiyonumuz biraz daha faydacı olan bir parça ile tamamlandı. Çeşitli farklı gökyüzü rengi kombinasyonlarını çoğaltmak için kullanabileceğiniz bir dizi güzel CSS gradyanıdır. Gecenin karanlığından, güneşin doğuşundan, gün batımından ve öğle vaktinin mükemmel mavisinden her şeyi bulacaksınız.

Kalemi görün
Sky Degrades yazan zessx

Gökyüzünü kodla keşfetme

Yukarıdaki kod parçacıklarının gösterdiği gibi, gökyüzü ve dış alan web’e eğlence ve güzellik unsurları ekleyebilir. İster dünyamızı yeniden yaratıyorlar, ister bize yenilerini göstermeye çalışıyorlar, kullanıcı deneyimini geliştirmek için benzersiz bir yol sunuyorlar.

Daha fazla örnek görmek ister misiniz? CodePen koleksiyonumuza göz atın!