Himmelsk kodbit som hyllar himlen och yttre rymden

Naturen har alltid fungerat som en stor inspirationskälla. Och vi får se några av dess mest fantastiska underverk titta upp mot himlen.

En kristallklar himmel en solig dag, stjärnorna blinkar på natten. Tankar om rymdutforskning och vår egen galax tänder också vår fantasi. Det som är ovanför oss ger både en daglig verklighet och nyfikenhet på det okända.

Inte överraskande har några mycket kreativa utvecklare använt himlen och rymden som ett ämne för experiment. Den potentiella användningen av ljus, färg, rörelse och den senaste webbtekniken passar in naturligt.

Idag kommer vi att presentera några fantastiska exempel som använder himlen och rymden på något sätt. De kör spektrumet från vetenskaplig precision till ren fantasi. Njut av!

Scrolla ner till himlen

Parallaxförskjutningseffekten finns överallt nuförtiden. Det är en av de trender som har fått sitt eget liv. Ändå är detta ett av de mest unika och fascinerande exemplen vi har sett. Att scrolla ner på sidan resulterar i 3D-rullning av molnen, medan den ändrade bakgrundsfärgen gör att det ser ut som att du faller till marken.

Se Shaw’s Pen Canvallax: Parallax Sky Background-demo

Karta för stjärnorna

Det som gör denna stjärnkarta intressant är dess CSS- och JavaScript-baserade interaktivitet. Klicka på ett system och fokusera, komplett med mjuka övergångar som silke. Kartan visar också en simulerad landningsbana och några roliga emojis som grädden på moset.

Se Scott Weavers CSS Star Map-penna (@sweaver2112)

Norrsken

Ett av universums sanna underverk, norrskenet, är något som inte många av oss ser. Men vi kan åtminstone försöka återskapa upplevelsen. Här kan en ren CSS-version av den gröna och ljuslila natthimlen lysa upp din skärm.

Ser du Pure CSS Northern Lights-pennan? av Jhey

Solnedgång online

Tvärtom, en dramatisk solnedgång är något som nästan alla kan uppleva. Men det gör det inte mindre bländande. Detta utdrag låter dig sätta solnedgången i rörelse när som helst på dygnet, klicka bara på den stora gula sfären. De skiftande färgerna skapar en slående effekt.

Visa solnedgångspenna

Nattens ljus

Vill du veta när fullmånen kommer att lysa i Paris, Frankrike? Denna fantastiska animation berättar och ger dig utsikt över Eiffeltornets fönster. Det enda mysteriet här är om den mysiga svarta katten gör något speciellt när händelsen kommer.

Se fullmånepennan i Paris? av Paulina Hetman

Ren Saturn CSS

Saturnus ring är en stor källa till fascination inom oss. Denna planetrepresentation endast för CSS erbjuder ett lite annorlunda perspektiv. Det var mörkt och ringarna stod inte ut som de skulle. Men det ger ett bra exempel på hur CSS-gradienter kan hjälpa oss att skapa fantastisk konst.

Se Luciano Felix Saturn penna

Närmar sig solen

Genom att använda WebGL blir denna solanimation inte av denna värld. När solen faller från toppen av skärmen märker du suddiga effekter runt dess kant. Detaljnivån här är helt enkelt fantastisk. Lyckligtvis passerade ingen värme genom skärmen.

Se Scott Weaver Solar-pennan

Färger för alla himlar

Vår kollektion kompletteras med en något mer användbar del. Det är en samling vackra CSS-gradienter som du kan använda för att återskapa olika himmelsfärgskombinationer. Du hittar allt från nattens mörker, soluppgång, solnedgång och middagens perfekta blå.

Se Pen Sky-gradienten av zessx

Utforska himlen genom kod

Som koden ovan visar kan himlen och yttre rymden lägga till element av kul och skönhet till webben. Oavsett om de återskapar vår värld eller försöker visa oss nya världar, ger de ett unikt sätt att förbättra användarupplevelsen.

Vill du se fler exempel? Kolla in vår CodePen-kollektion!